px,em,rem,vw,vh比较

CSS中的长度单位

参考: CSS Length Data Types and Units (opens new window)

长度单位	版本	描述
文本相对长度单位
em	CSS1	相对于当前对象内文本的字体尺寸(父级字体大小)
ex	CSS1	相对于字符“x”的高度。通常为字体高度的一半
ch	CSS3	数字“0”的宽度
rem	CSS3	相对于根元素(即html元素)font-size计算值的倍数
视口相对长度单位
vw	CSS3	相对于视口的宽度。视口被均分为100单位的vw
vh	CSS3	相对于视口的高度。视口被均分为100单位的vh
vmax	CSS3	相对于视口的宽度或高度，总是相对于大的那个。视口的宽度或高度被均分为100单位的vmax
vmin	CSS3	相对于视口的宽度或高度，总是相对于小的那个。视口的宽度或高度被均分为100单位的vmin
绝对长度单位
cm	CSS1	厘米
mm	CSS1	毫米
q	CSS3	1/4毫米（quarter-millimeters）; 1q = 0.25mm
in	CSS1	英寸（inches）; 1in = 2.54cm
pt	CSS1	点（points）; 1pt = 1/72in
pc	CSS1	派卡（picas）; 1pc = 12pt
px	CSS1	像素（pixels）; 1px = 1/96in

假定存在三个嵌套关系的元素father > son > grandson：

em是相对于父级元素的font-size大小，如果没有显示的设置，那么会根据继承的值，一般浏览器默认大小为16px。

.father {
  font-size: 30px;
}

.son {
  /* 60px */
  font-size: 2em;
}

.grandson {
  /* 30px */
  font-size: 0.5em;
}

rem是相对于根元素html的字体大小：

html {
  font-size: 30px;
}

.father {
  /* 30px */
  font-size: 1rem;
}

.son {
  /* 60px */
  font-size: 2rem;
}

.grandson {
  /* 15px */
  font-size: 0.5rem;
}

TIPS

因为一般浏览器默认大小为16px，1rem=16px，由于1:16的比例不好换算，所以修改根节点的字体大小：

html {
  /* 10 ÷ 16 × 100% = 62.5% */
  font-size: 62.5%;
}

.container {
  /* 10px */
  font-size: 1rem;
}

那为什么不直接设置html的字体大小为10px呢？

因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。

实际项目设置成font-size: 62.5%可能会出现问题，因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的em/rem计算不准确。 针对这个现象，可以尝试设置html字体为100px，body修正为16px，这样0.1rem就是10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。

屏幕适配的几种方法

流式布局

页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看到的效果是令人满意的，其实很多视觉设计师应该无法接受这种效果，因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。

固定宽度

固定页面宽度的做法，早期有些网站把页面设置成320的宽度，超出部分留白，这样做视觉，前端都挺开心，视觉在也不用被流式布局限制自己的设计灵感了，前端也不用在搞坑爹的流式布局。但是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小，手机淘宝首页起初是这么做的，但近期改版了，采用了rem。

响应式

响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，因为这样反而可以节约成本，不用再专门为自己的网站做一个web app的版本。主要使用@media媒体查询。

通过viewport进行缩放

天猫的web app的首页就是采用这种方式去做的，以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

使用rem

通过js动态设置html字体大小

参考：

• flexible.js 移动端自适应方案 (opens new window)
• 使用Flexible实现手淘H5页面的终端适配 (opens new window)

如果需要处理的设备少，也可以针对主流的设备做媒体查询

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;
  }
}