这篇文章主要介绍了移动 web 端屏幕适配(rem)。详细的介绍了移动 web 端屏幕适配(rem),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前言

最近整理了一下以前学习前端的笔记,发现自己对移动 web 端屏幕适配(rem)这一块并没有真正理解,只是会用。

接下来,把自己的一些对移动 web 端屏幕适配(rem)的思考记录下来。

rem 介绍

rem 表示根元素(<html>)的 font-size 的大小。即如果根元素的 font-size 大小为 14px,则 1rem = 14px

rem 适配移动 web 端

适配效果

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

代码

// 在 html 文件的 head 标签中
<script type="text/javascript">
  (function(){
    var html = document.documentElement;
    // 获取屏幕宽度(px)
    var hWidth = html.getBoundingClientRect().width;
    // 设置 html 标签的 font-size 大小为 hWidth/15
    html.style.fontSize = hWidth/15 + 'px';
  })()
</script>
// 在 less 中
/* 定义变量@r:750/15 */
@r:50rem; 
div {
  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。

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
靠《纸牌屋》火的Netflix又涨价,国内流媒体敢吗?

靠《纸牌屋》火的Netf

Netflix始终保持高质量、高效率、斥巨资的精良出品,令
董明珠:如果2019年营收到3000亿 还会给员工涨工资

董明珠:如果2019年营收

董明珠表示,如果2019年假设格力做到营收3000亿,按13%的
董明珠再谈入股银隆:想帮格力介入汽车空调

董明珠再谈入股银隆:想

谈及2016年格力电器入股银隆新能源被否,格力电器董事长
对话奇手科技CEO:AI为终端服务 关键是嵌入式

对话奇手科技CEO:AI为

面向未来,Sang认为嵌入式机器学习会是一个关键,只要有传
格力电器副总裁答接班问题:围绕董明珠 高管各司其职

格力电器副总裁答接班

格力电器副总裁兼董秘望靖东表示,“围绕董总,(高管)每个人
OPPO推10倍混合变焦和光域屏幕指纹技术 称已可商用

OPPO推10倍混合变焦和

OPPO今日宣布推出10倍混合光学变焦技术,称已可量产商用
最新文章
HTML实现2列布局(左侧宽度固定,右侧自适应)的方法示例

HTML实现2列布局(左侧

这篇文章主要介绍了HTML实现2列布局(左侧宽度固定,右侧
Html读取本地文件夹下图片并显示的示例代码

Html读取本地文件夹下

这篇文章主要介绍了Html读取本地文件夹下图片并显示的
详解 html area标签

详解 html area标签

area 元素总是嵌套在 <map> 标签中。本文重点给大家介
HTML中两个tabs导航冲突问题的解决方法

HTML中两个tabs导航冲

这篇文章主要介绍了HTML中两个tabs导航冲突问题的解决
详解前端在html页面之间传递参数的方法

详解前端在html页面之

这篇文章主要介绍了详解前端在html页面之间传递参数的
详解HTML onfocus获得焦点和onblur失去焦点事件

详解HTML onfocus获得

这篇文章主要介绍了详解HTML onfocus获得焦点和onblur