[css] px em rem

一、区别

px是相对于显示器屏幕分辨率而言的。

em相对于浏览器的默认字体尺寸。

rem相对于HTML根元素。

二、使用

1、em

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px,

这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

所以我们在写CSS的时候，需要注意两点：

1. body选择器中声明Font-size=62.5%；

2. 将你的原来的px数值除以10，然后换上em作为单位；

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

2、rem

参考：http://isux.tencent.com/web-app-rem.html

css3新属性针对于响应式网页设计

之前网页的响应式是在head标签内直接设置meta viewport标签进行缩放.

iphone4:设计宽度为320px

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

iphone6: 设计宽度为375px

iPhone6需要调整缩放比例 initial-scale=375/320 =1.18

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

iPhone6 Plus:设计宽度为414px initial-scale=414/320 =1.30

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

缺点是：这样做会使得，因为initial-scale越来越大，相当于拉伸网页，而使得在大屏幕的移动端设备下，文字、图片会变模糊。

rem能等比例适配所有屏幕

html{
    font-size:20px;
}
.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}

html{
    font-size:40px;
}

按钮大小结果如下：

只要改变html中font-size的大小，页面中所有的width、height等用到rem单位的元素的大小都进行改变。

可以使用media对大小不同的页面进行适配，如：

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

补充：viewpoint说明

width: viewport 的宽度（范围从 200 到 10,000 ，默认为 980 像素）
height: viewport 的高度（范围从 223 到 10,000 ）
initial-scale: 初始的缩放比例（范围从>0到 10 ）
minimum-scale: 允许用户缩放到的最小比例
maximum-scale: 允许用户缩放到的最大比例
user-scalable: 用户是否可以手动缩放

对于这些属性，我们可以设置其中的一个或者多个，并不需要你同时都设置，iPhone 会根据你设置的属性自动推算其他属性值，而非直接采用默认值。

如果你把initial-scale=1 ，那么 width 和 height在竖屏时自动为320*356 （不是320*480 因为地址栏等都占据空间），横屏时自动为 480*208。

类似地，如果你仅仅设置了 width ，就会自动推算出initial-scale 以及height。

例如你设置了 width=320 ，竖屏时 initial-scale 就是 1 ，横屏时则变成 1.5 了。

[css] px em rem

rem能等比例适配所有屏幕

推荐阅读