移动端布局单位介绍之rem

Posted abc-x

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端布局单位介绍之rem相关的知识,希望对你有一定的参考价值。

本文主要写给刚接触移动端开发的同鞋们。

首先先将几个主要概念讲一下;

什么是移动端?

移动端故名思义是为移动终端,大名叫移动通信终端,是指可以在移动中使用的计算机设备。其实就是我们常说的手机。

什么是布局?

前端开发中布局是将主要的html结构布置好。

rem是什么?

rem是一种长度单位,是而且仅是根据根元素html改变的长度单位。

Root em(REM)是CSS3中新定义的一种长度单位。和之前的em(根据父元素改变大小)单位相比在使用上具有明显的优势。著名的响应式web框架Fundation就是用REMs作为基本的长度单位。

接下来还有几个重要的概念需要交代一下;

什么是像素?

中文全称为图像元素。像素仅仅只是分辨率的尺寸单位,而不是画质。  

定义:是指在由一个数字序列表示的图像中的一个最小单位,称为像素。

物理像素:一个物理像素是显示器(手机屏幕)上最小的物理显示单位,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。

设备独立像素:设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。

设备像素比: 设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系,设备像素比 = 物理像素 / 设备独立像素;

javascript中,可以通过window.devicePixelRatio获取到当前设备的dpr。

在css中,可以通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询,对不同dpr的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。

如果设备宽高是375X667 DPR为2的话,其物理像素就要相应的乘以2,也就是为750X1334;

这时候如果你设置的css像素为1px,那么在此设备上显示的就为2px。(这就是经典的移动端一像素问题,下面有解决方案)这对于布局来说会造成问题。所以我们要将它统一起来。这个统一也必须是动态的。那么我们怎么去动态改变呢?

答案是通过视口设置宽高缩放。

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

当然这是静态设置的,一旦换个DPR不同的设备就又会造成多1像素的问题。那么我们要怎么设置不同DPR的不同缩放比呢。

我们目标是,DPR为2的时候,initial-scale=0.5 ,DPR为3的时候,initial-scale=0.33333333。

相信大家都知道javascript,通过javascript我们可以动态的设置初始缩放。

首先我们要获取dpr,在javascript中是通过: window.devicePixelRatio;来获取的。那么我就开始动态设置吧。

移动端1px解决方法:

<script>
/* 此脚本写在html的head标签中 */
var pixel = 1/window.devicePixelRatio;
document.write(‘<meta name="viewport" content="width=device-width,initial-scale=‘+pixel+‘,‘+‘minimum-scale=‘+pixel+‘,‘+‘maximum-scale=‘+pixel+‘">‘)
</script>

ok,到这我们就解决了1px的问题。

接下来我们就要解决布局单位的问题了;

首先我们知道布局单位有很多:

px:用这个布局的话,写出来的大小只能和设计稿上的一样了。一旦换个终端就GG了。所以这种单位不用考虑了。

%;百分比布局还是可以使用的,但如果是高度不确定的话就不适合了。

em:相对于父级,是个相对元素,一旦你要设置字体大小而又宽高不能统一,麻烦就来了。

rem:也是个相对元素,不过它只相对于根元素也就是html,用这个作为布局单位能做到适配各种终端,当然前提是动态改变了根元素的font-size.

所以如果你要做的适配大部分的手机终端,那么rem是个布局的好单位。前提是动态设置了html的font-size大小。让他随设备的改变而改变.

那我们要怎么动态改变呢,首先我们要获取当前设备的宽度,用它去除以一个常数,这样我们设置出来的font大小就是相对来说不变的。

获取宽度可以通过javascript:getBoundingClientRect().width;

<script type="text/javascript">
    var html = document.querySelector(‘html‘);
    var width = html.getBoundingClientRect().width;
    html.style.fontSize = width/16 + ‘px‘;
</script>

进行布局的话建议用less去写,因为less中可以用变量,这样我们可以省去频繁用计算器的时间了。

以上是关于移动端布局单位介绍之rem的主要内容,如果未能解决你的问题,请参考以下文章

适用于移动设备弹性布局的js脚本(rem单位)

rem与移动端布局

移动端rem单位用法

详解rem布局-利用rem布局实现移动端高清显示

移动端布局之路-----rem布局

移动端rem单位用法[转]