移动web端屏幕适配rem的示例分析

这篇文章主要介绍了移动web端屏幕适配rem的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

rem 介绍

rem 表示根元素（）的 font-size 的大小。即如果根元素的 font-size 大小为 14px，则 1rem = 14px

rem 适配移动 web 端

适配效果

在不同尺寸的屏幕下，同一个元素的大小看起来不是一样大的，但是它们所占屏幕宽度的比例是一样的。

代码

// 在 html 文件的 head 标签中

// 在 less 中/* 定义变量@r：750/15 */@r:50rem; p {  width: 100/@r;  height: 200/@r;}

javascript 代码

首先，我们将屏幕的 1/15 大小（px）复制给 html 标签的 font-size 属性。此时，在任何尺寸的屏幕上，屏幕尺寸（px）的 1/15 px 都等于 1rem 的大小。即：在任何尺寸的屏幕上，只要给元素设置值相同的 rem，则在所有尺寸的屏幕上该元素所占屏幕宽度的比例是一样的，所占比例一样，就适配了所有尺寸的屏幕。

less 代码

现在只需要将设计稿中元素的 px 单位转换为 rem 单位。

所以，这个时候，我们可以把设计稿也当成一个具有一定尺寸的手机屏幕。
在我这个例子中，设计稿的宽度为 750px。

所以，750/15 = 50px，即在设计稿这样尺寸的手机屏幕中，1rem = 50px。

然后，在 less 代码中，我们定义一个变量 @r。

量得 p 的宽度为 100px，因为在设计稿这样尺寸的屏幕中，1rem = 50px，所以该 p 的 rem 的值为：100/50 rem，即 100/@r。

量得 p 的高度为 200px，因为在设计稿这样尺寸的屏幕中，1rem = 50px，所以该 p 的 rem 的值为：200/50 rem，即 200/@r。

感谢你能够认真阅读完这篇文章，希望小编分享的"移动web端屏幕适配rem的示例分析"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!