关于移动端布局使用哪种单位，每个人都有自己习惯使用的单位，这个也只是我个人的一点点浅见。
欢迎大家指点。
很多人在谈到写移动端页面的时候，都觉得很恼火。因为要写n套css样式。然后用媒体查询做适配。
一般这个时候我都表示自己懵懵哒，搞不懂为什么要写这么多套。可能是由于我经验不够，所以看不出来写这么多套有什么深意。
我认为在移动端可以做到适配不同的手机分辨率，如果只是保持整体缩放，没有设计上的差异可以不需要用到`media query`。
下面说说我习惯使用的单位：em，rem，%
1.em
em是一个相对值，而且是一个相对于父元素的值，因此在使用em时，需要清楚父元素的font-size是多少。
em计算公式如下：
| 1 ÷ 父元素的font-size × 需要转换的像素值 = em值 |
我第一次使用em的时候，由于不清楚它是相对父元素的值，写出来的页面真是萌萌哒。
在使用em时，我用js做了一些适配。
不同手机的浏览器默认分辩率是不一样的，所以需要计算浏览器实际屏幕宽度与设计图宽度的比例，然后根据该比例计算body的font-size。
只需要写一套css样式，在不同尺寸的屏幕上显示出来都是合适的。
sw是设计图宽度，假设按照Iphone 6设计的高清设计图，设计图的宽度为750；
|
var w = $(window); function auto() { var sw = 750; var auto1 = (parseInt(w.width()) / sw); var auto3 = auto1 * 62.5 + "%"; $("body").css("font-size", auto3); }; |
注意：使用em时，一定要注意其父级元素的font-size的大小！
重要的事情说三遍：em是相对于父级的！em是相对于父级的！em是相对于父级的！！
2.rem
rem是相对于根元素<html>的值，我们只需要在根元素设置一个固定的值，然后计算比例写相应的rem就可以啦。非常简单。
下面来看一个简单代码实例：
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
|
我在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）。从上面的计算结果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。
在了解了rem这个单位后，我们可以针对这个单位的特性进行移动端布局。
①设置页面rem的大小
html {font-size: calc(100vw/3.75)}
|
100vw是设备的宽度，除以3.75可以让1rem的大小在iPhone6下等于100px。
②换算单位
在布局时，直接换算，将‘px‘替换为‘rem‘。加入在设计图上10px，就可以携程0.1rem。这样，在IPhone 6下，所有元素的尺寸还是和视觉稿的尺寸一样，而在别的手持设备上，100vw/3.75的值会随着手持设备的宽度变化呈正比例变化。
这样就可以做到针对任何分辨率的设备保持视觉一致了。
③vw单位兼容性
低版本的手持设备可能不支持vw单位，需要使用js处理。
document.documentElement.style.fontSize = window.innerWidth/3.75+‘px‘ |
在实际运用中，window.innerWidth在个别安卓手机上获取的是屏幕的分辨率宽度，而不是设备宽度。使用该方法的童鞋注意测试。
3.百分比%
| 视觉稿上元素的宽度/视觉稿宽度=元素在设备上显示的宽度百分比。 |
这样，在不同分辨率的手持设备上，也能保持与视觉稿一致。