移动端布局单位选择之rem

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

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

　　　　什么是移动端？

　　　　　　：移动端故名思义是为移动终端，大名叫移动通讯终端，是指能够在移动中使用的计算机设备。其实就是咱们常说的手机。

　　　 什么是布局？

　　　　　　：对事物的全面规划和安排，布：陈设；设置。前端开发中布局也就是将主要的html结构布置好。

　　　　rem是什么？

　　　　　　：R.E.M.是一支于1980年组建于美国的另类摇滚乐团....固然咱们这里的rem不是指这个乐团了。

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

　　　　　　　　Root em（REM）是CSS3中新定义的一种长度单位。和以前的em单位相比在使用上具备明显的优点。著名的响应式web框架Fundation就是用REMs做为基本的长度单位。

好，有了这几个共同的概念沟通起来就简单多了，要否则别人一看，嘿，布局？用rem?什么鬼，用乐团布局?城会玩啊。。。

    　　来，喝完这杯还有一杯。接下来还有几个重要的概念须要交代一下；

　　　　什么是像素？

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

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

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

　　　　　　设备独立像素：设备独立像素(也叫密度无关像素)，能够认为是计算机坐标系统中得一个点，这个点表明一个能够由程序使用的虚拟像素(好比: 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咱们能够动态的设置初始缩放。那么 how？？

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

　　　　　　　　　　　　　　

　　　　　　　　　　　　　　代码我在这写一遍方便我们复制;

　　　　　　　　　<script>

　　　　　　　　　　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;

　　　　　　　　

　　　　　　　　相信这段代码很简单，我就不写一遍了。

　　　　　进行布局的话建议用less去写，由于less中能够用变量，这样咱们能够省去频繁用计算器的时间了。

　　　　　　　　less中咱们能够这样写；

　　　　　　　　　　　　@rem:40rem;  定义变量@rem 这里的40是指你打开谷歌开发者工具后点击移动端模拟时的html的font-size大小。

　　　　　　　　　　　div{

　　　　　　　　　　　　width:200/@rem;   less会在编译的时候给计算出结果。

　　　　　　　　　　}

　　　　　　OK，到此咱们的布局问题差很少就解决了。

　　　　　　　　总之，在head里写上这两段代码就解决了适配，1px，等问题了。

　　　　　　　　固然若是你用百分比布局的话，那也能够。