css移动端布局单位介绍之rem

1、css移动端布局单位介绍之rem什么是移动端？移动端故名思义是为移动终端，大名叫移动通信终端，是指可以在移动中用法的计算机设备。其实就是我们常说的手机。什么是布局？前端开发中布局是将主要的html结构布置好。rem是什么？rem是一种长度单位，是而且仅是按照根元素html转变的长度单位。root em（rem）是css3中新定义的一种长度单位。和之前的em（按照父元素转变大小）单位相比在用法上具有显然的优势。闻名的响应式web框架fundation就是用rems作为基本的长度单位。什么是像素？中文全称为图像元素。像素仅仅只是辨别率的尺寸单位，而不是画质。定义：是指在由一个数字序列表示的图像中的

2、一个最小单位，称为像素。物理像素：一个物理像素是显示器（手机屏幕）上最小的物理显示单位，在操作系统的调度下，每一个设备像素都有自己的色彩值和亮度值。设备自立像素：设备自立像素（也叫密度无关像素），可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序用法的虚拟像素（比如： css像素），然后由相关系统转换为物理像素。设备像素比： 设备像素比（简称dpr）定义了物理像素和设备自立像素的对应关系，设备像素比 = 物理像素 / 设备自立像素；在javascript中，可以通过window.devicepixelratio猎取到当前设备的dpr。在css中，可以通过-webkit-device-

3、pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio举行媒体查询，对不同dpr的设备，做一些样式适配（这里只针对webkit内核的扫瞄器和webview）。假如设备宽高是375x667 dpr为2的话，其物理像素就要相应的乘以2，也就是为750x1334；这时候假如你设置的css像素为1px，那么在此设备上显示的就为2px。（这就是经典的移动端一像素问题，下面有解决计划）这对于布局来说会造成问题。所以我们要将它统一起来。这个统一也必需是动态的。那么我们怎么去动态转变呢？答案是通过视口设置宽高缩放。固

4、然这是静态设置的，一旦换个dpr不同的设备就又会造成多1像素的问题。那么我们要怎么设置不同dpr的不同缩放比呢。我们目标是，dpr为2的时候，initial-scale=0.5 ,dpr为3的时候，initial-scale=0.33333333。信任大家都知道javascript，通过javascript我们可以动态的设置初始缩放。首先我们要猎取dpr，在javascript中是通过： window.devicepixelratio;来猎取的。那么我就开头动态设置吧。移动端1px解决办法：ok，到这我们就解决了1px的问题。接下来我们就要解决布局单位的问题了；首先我们知道布局单位有无数：px

5、：用这个布局的话，写出来的大小只能和设计稿上的一样了。一旦换个终端就gg了。所以这种单位不用考虑了。%；百分比布局还是可以用法的，但假如是高度不确定的话就不适合了。em：相对于父级，是个相对元素，一旦你要设置字体大小而又宽高不能统一，棘手就来了。rem:也是个相对元素，不过它只相对于根元素也就是html，用这个作为布局单位能做到适配各种终端，固然前提是动态转变了根元素的font-size.所以假如你要做的适配大部分的手机终端，那么rem是个布局的好单位。前提是动态设置了html的font-size大小。让他随设备的转变而转变。那我们要怎么动态转变呢，首先我们要猎取当前设备的宽度，用它去除以一个常数，这样我们设置出来的font大小就是相对来说不变的。猎取宽度可以通过javascript：getboundi