css单位有：px，em，rem，vh，vw，vmin，vmax，ex，ch 等等
1、px单位最常见，也最直接，这里不做介绍。
2、em：em的值并不是固定，它继承父级元素的字体大小，所以层数越深字体越大。
1 <body style="font-size:16px;"> 2 hello - font-size:16px 3 <div style="font-size:1.5em;"> 4 hello 01 - font-size:24px 5 <div style="font-size:1.5em;"> 6 hello 02 - font-size:36px 7 </div> 8 </div> 9 </body>
3、rem：rem是css3新增的一个相对单位，与em不同的一点是rem相对于根元素(html)字体大小。tip：浏览器默认字体大小是16px。
1 <body> 2 hello - font-size:16px 3 <div style="font-size:1.5rem;"> 4 hello 01 - font-size:24px 5 <div style="font-size:1.5rem;"> 6 hello 02 - font-size:24px 7 </div> 8 </div> 9 </body>
4、vh 和 vw
在进行响应式布局时，我们常常会使用百分比来布局，然而CSS的百分比不总是解决每个问题的最佳方案，CSS的宽度相对于离它最近的父元素的宽度。 如果你想使用视口的宽度、高度而不是父元素的宽高，可以使用vh和vw单位。 1vh = viewportHeight /100; 1vw = viewportWidth /100; 使用vh、vw就可以保证元素的宽高适应不同设备。
5、vmin 和 vmax
vw和vh对应于viewport的width和height，而vmin和vmax分别对应于width、height中的最小值和最大值，例如如果浏览器的宽/高为1000px/600px，那么 1vmin = 600 /100; vmax = 1000 /100;
6、ex 和 ch
ex、ch单位与em、rem相似之处在于都依赖于font-size，但是ex、ch还依赖于font-family，基于font-specific来计算。
不同大小屏幕手机的一个自适应策略：
先引入viewport.js（执行viewport.init();），字体用rem单位（需 /100），需要自适应的图标加上icon-*这样的类名。
1 var viewport = {
2 viewportWidth : document.documentElement.clientWidth,
3 calc : function() {
4 var rootSize = this.viewportWidth / 750 * 100;
5 document.documentElement.style['font-size'] = rootSize + 'px';
6 },
7 resetImageScale : function() {
8 var scaleStr = this.viewportWidth / 750;
9 var imageScaleStyle = document.createElement('style');
10 var inertCss =
11 '\n\
12 [class^="icon"]{\n\
13 zoom:' + scaleStr + ';\n\
14 }\n\
15 ';
16 imageScaleStyle.innerHTML = inertCss;
17 document.head.appendChild(imageScaleStyle);
18 },
19 init : function() {
20 viewport.calc();
21 viewport.resetImageScale();
22 window.addEventListener('resize', function(){
23 viewport.calc();
24 viewport.resetImageScale();
25 });
26 }
27 };
来源：https://www.cnblogs.com/k11590823/p/5422920.html