一、基本概念

px 与 pt

Px 是pixel的简写, 被称之为像素单位, 由三个发光管RGB组成的最小基本单元。
如我们在浏览器document.documentElement.clientWidth获取的就是就是px单位
Pt是Point的简写, 被称之为磅值单位, pt是一种固定长度的度量单位, 也是一个绝对单位，他是一个能够使用测量设备测得的长度。

逻辑像素和物理像素

逻辑像素: 单位是pt,它是按照内容的尺寸计算的单位。
物理像素: 单位是px,设备能控制显示的最小单位，常说的1920×1080像素分辨率就是用的设备像素单位.

rem 与 Rpx

rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位
Rpx 单位是小程序中的单位，把屏幕分成750等分，每一份为1rpx。规定屏幕宽为750rpx。
1px约等于2rpx

Vw和vh单位

想要了解vw和vh单位我们得才能够两个单位的基本概念入手;

Vw是viewport width的简写; 代表的是视口的宽度;

Vh是viewport height的简写; 代表的是视口的高度,

那么到底什么是视口呢? 在这视口指的是观看区域的窗口的大小, 也就是代表PC和手机端屏幕的尺寸大小. 在这里 100vw代表了一个完整的视口的宽度 1vw则代表了视口宽度的百分之一; 100vh代表了一个完整的视口的高度 1vh则代表了视口高度的百分之一;

使用vh和vh的优点是:我们能完全的制作一个可伸缩性的布局, 会根据屏幕的大小改变布局的比例缩放;如下图所示(动图)

视口 viewport

布局视口（layout viewport）它是由浏览器提出的一种虚拟的布局视口，用来解决页面在手机上显示的问题。这种视口可以通过<meta>标签设置viewport来改变。移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的）
视觉视口 (visual viewport) 它指的是浏览器的可视区域，也就是我们在移动端设备上能够看到的区域
理想视口布局视口=视觉视口时的视口，我们可以通过放大/缩小布局视口，让布局视口=视觉视口

二、h5适配

1.多媒体查询

/* iphone6 7 8 */
html {
}
/* iphone 5 */
@media screen and (min-width: 320px) {
    html {
                font-size:13px
    }
}
/* iphoneX */
@media screen and (min-width: 360px) {
    html {

    }
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    html {
    }
}
/* ipad */
@media screen and (min-width: 768px) {
    html {

    }
}
/* ipad pro */
@media screen and (min-width: 1024px) {
    html {

    }
}
/* pc */
@media screen and (min-width: 1100px) {
    html {
    }
}

2.rem适配

rem适配原理：改变了一个元素再不用色呗上占据的css像素的个数。
rem适配优缺点：优点：没有破坏完美视口；缺点：px值到rem的转换太复杂

原理：当我们设计稿总宽度为375pt，根据等比例原则，我们可以得到以下

375(pt) / clientWidth(px) = x(pt) / y(px)

clientWidth为屏幕宽度，单位为px
x为元素设计稿尺寸，单位为pt
y为元素实际尺寸，单位为px，我们后续需要换成 rem单位

换算过程：

计算元素宽度y(px)

y(px) = x * clientWidth/375

设置根font-size
fontsize = clientWidth/375*100

<script type = "text/javascript">

	(function(){
	    var styleNode = document.createElement("style");
	    var fontsize = document.documentElement.clientWidth/375*100;
       // 也可以 styleNode.innerHTML = `html{font-size:${100/375}vw !important}`;
	     styleNode.innerHTML = `html{font-size:${fontsize}px !important}`;
	     document.head.appendChild(styleNode);
	})()
</script>

将y的单位换成 rem

y(rem) = y(px)/fontsize(px) = （x * clientWidth/375）/（clientWidth/375*100）= x/100

当我们设置的根元素 font-size= clientWidth/375*100 px时，那对应设计稿上的pt尺寸，直接除以100就可以得到rem的值。比如设计稿中尺寸为 100pt，那对应就是1rem。

3.viewport适配（目的：改进rem适配的缺点）

viewport适配原理：viewport适配方案中，每一个元素再不同色呗上占据的css像素的个数是一样。但是css像素和物理像素的比例是不一样的，等比的。
viewport适配优缺点：优点：所量即所得；缺点：没有使用完美视口

<script type = "text/javascript">
 window.onload = function(){
    (function(){
	var targetW= 640;
	var scale= document.documentElement.clientWidth/targetW;
	var meta = document.querySelector("meta[name='viewport']");
	meta.content="initial-scale="+scale+",minimun-scale="+scale+",
        maximum-scale="+scale+",user-scaleble=no";
    }()}
</script>

4. vw、vh适配

vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位，是css3中提出来的，基于视图窗口的单位。

vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。

早些时候vw还没有得到很好的兼容。

vw(Viewport's width)：1vw等于视觉视口的1%
vh(Viewport's height) :1vh 为视觉视口高度的1%

5. postcss-pxtorem插件

postcss-pxtorem的工作原理是遍历CSS AST（抽象语法树），找到所有的像素单位，并根据配置选项将px单位换成rem单位。

var fs = require('fs');
var postcss = require('postcss');
var pxtorem = require('postcss-pxtorem');
var css = fs.readFileSync('main.css', 'utf8');
var options =
{
    rootValue: 16,
    unitPrecision: 5,
    propList: ['font', 'font-size', 'line-height', 'letter-spacing', 'word-spacing'],
    selectorBlackList: [],
    replace: true,
    mediaQuery: false,
    minPixelValue: 0,
    exclude: /node_modules/i
};
var processedCss = postcss(pxtorem(options)).process(css).css;

fs.writeFile('main-rem.css', processedCss, function (err) {
  if (err) {
    throw err;
  }
  console.log('Rem file written.');
});

欢迎关注我的前端自检清单，我和你一起成长

4.1.像素与视口、h5适配