由于最近在做公司移动项目的开发，所以在开始项目之前，我第一步要做的就是统一单位。在之前写PC端网站时，都是使用px作为长度单位，在接下来的手机项目中为了实现响应式开发，开始使用em，然后出现了一个可怕的问题，那就是当<input type="text">获得焦点时，整个页面会放大，至于为什么会出现这种情况，然后又该怎么解决呢？当初真的是弄得头都大了，后来没有办法，我的解决办法就是把会放大的页面里面有em单位的全部换为px，暂时的解决了问题，但是我相信强大的前端工程师们可能会有更完美的解决办法。我们的设计师是按照640的宽度去设计的，实际设计图的宽度是640*2这样做的目的是为了在移动端能高清显示。所以在准备该项目之前，为了避免再次出现那么尴尬的境地，我查阅了诸多资料，发现rem似乎还挺有意思的，但是现在貌似用他的人很少，其实rem不只是能应用到字体上面，还可以应用到长度和宽度上面。接下来我先讲解一下css单位px、em和rem的含义以及它们之间的区别。
一、css单位px、em和rem的含义以及它们之间的区别
1.首先介绍一下px
px就是css中最基本的长度单位了，用px做单位基本上没什么问题，可以做到让页面按套路精确的展现！
可但是！但可是！如果全篇用px布局会暗藏一个蛋疼的问题，就是当用户和Ctrl滚页面的时候（说白了就是ctrl+，ctrl-），你会发现页面结构产生了不可预知的错乱，因此有砖家倡导使用em替代px。。。。。
2.接下来介绍一下em
如果你从上到下阅读此文，你应该已经知道了em出现的原因，下面说说em的特性，简单的讲px是绝对单位，1px就是1px，2px就是2px，以此类推，而em是相对单位，em相对的基准点就是浏览器的字体大小，浏览器默认字体大小是16px，也就是1em默认等于16px，如果你想给某个文字设定为14px，就这样写 font-size:0.875em; 公式是14/16=0.875em，如果想要15px，那么就是15/16=0.938em, 例如margin:0.938em; 依次类推，样式表都用em来写的话，就可以解决ctrl+，ctrl-时造成的页面错乱问题,常用em对照表如下
这时候有人和我一样就会抱怨了，我的数学是体育老师教的，除以16我怎么可能算明白，那好办你可以在根节点<html>上重定义基准字号 html {font-size:62.5%} ，此时页面基准字号就是 16px * 62.5% = 10px , 那么此时 1em = 10px，那么此时14px = 1.4em，15px=1.5em，依次类推，就算你数学是要饭的教的应该也会算了吧-。-！
可但是！但可是！问题又来了，em准确的说是相对于父节点的字号来计算的，如果自身定义了字号那么就相对自身字号来计算，举例如下：
html { font-size: 100%; }
.box-0 {
height: 1em; /* 此时height等于16px */
}
.box-1 {
font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */
height: 1em; /* 此时实际height等于10px */
}
看明白了吧，在整个页面内1em并不是一个固定不变的值，1em不停的变换，再加上数学是体育老师教的，这不是自作孽吗。。。没关系，css3为我们引入一个新的单位就是rem可以解决这个问题
3.最后介绍一下主角rem
rem和em一样也是一个相对单位，为了方便理解，我们就理解rem为root em，顾名思义rem只相对跟节点<html>计算，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。
声明一下：rem是css3属性，没错！这就是说屌丝ie678不支持rem属性，只有chrome、firefox等高富帅支持！那么我们就在ie678中用px做兼容处理，例如：
.box {
font-size: 14px; /* 用来兼容ie678 */
font-size: 0.875em;
}
二、用rem来做响应式开发
1、设置对应的响应式的html rem比例
我们平常在使用长度单位都会使用px，但是在做上面的响应式的时候，需要用rem或者百分比的单位，大家可以看Demo代码
html{
font-size:62.5%; /* 10÷16=62.5% */
}
body{
font-size:12px;
font-size:1.2rem ; /* 12÷10=1.2 */
}
p{
font-size:14px;
font-size:1.4rem;
}
html {
font-size: 62.5%;
}
@media only screen and (min-width: 481px){
html {
font-size: 94%!important;
}
}
@media only screen and (min-width: 561px){
html {
font-size: 109%!important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 125%!important;
}
}看上面的代码，可能大家会觉得为什么要这样设置呢，其实这个是根据许多测试推算出来的，上面代码如果要转换城px会变成这样：
html {
font-size: 62.5%; /* 10÷16=62.5% */
}
@media only screen and (min-width: 481px){
html {
font-size: 94%!important; /* 15.04÷16=94% */
}
}
@media only screen and (min-width: 561px){
html {
font-size: 109%!important; /* 17.44÷16=109% */
}
}
@media only screen and (min-width: 641px){
html {
font-size: 125%!important; /* 20÷16=125% */
}
}2、给margin padding 设置rem
上面展示的是怎么通过计算获取到不同分辨率下的html font-site百分比的值。实际开发如果设计师是按照640的宽度去设计的，我们就按照最大的640去切图，切图的时候如果我们要设置margin怎么banner，设计图的值加入是10px的间距，我们通过640的比例去计算：
- margin-top:.5rem; /*10 ÷ 20 = 0.5*/
- padding-top:1rem /* 20 ÷ 20 =1 */
上面分别是设计图上的间距10px和20px计算成rem的方法，大家可以以此类推，如果你的设计图是640设计的就可以用上面的方法，反正每次以最大的值来计算就可以了。
3、给height width 设置rem
实际开发中大家最常设置的估计就是height width值了，为了做到各个设备下长度自己相应，许多开发人员会用百分比来做，这个是没有问题，但是其实很多场景下用rem比百分比更加灵活，在我实际开发中，一般我只在大块的div布局里面用百分比，元素的设置一般都用rem来。例如：
- height:100px; /* 100 ÷ 20 = 5rem;*/
- width:50px; /* 50 ÷ 20 = 2.5rem;*/
4、给border 设置rem
其实就连border我们也可以用rem来做，但是貌似现在的安卓手机对border用rem单位有一小部分不支持，在我开发测试发现了，高版本的安卓浏览器支持，但是低版本的有许多都不支持，具体要不要使用就看你们自己的情况。
- border:.2rem solid #cccccc;
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
