## viewport视口 viemport是严格等于浏览器的窗口。viewport在meta标签调节 ``` visual viewport 可见视口 屏幕宽度 layout viewport 布局视口 DOM宽度 ideal viewport 理想适口：使布局视口就是可见视口 设备宽度(visual viewport)与DOM宽度(layout viewport), scale的关系为： （visual viewport）= （layout viewport）* scale 获取屏幕宽度(visual viewport)的尺寸：window. innerWidth/Height。 获取DOM宽度(layout viewport)的尺寸：document. documentElement. clientWidth/Height。 ``` **设置理想视口：**把默认的layout viewport的宽度设为移动设备的屏幕宽度，得到理想视口`(ideal viewport)`: ~~~ <meta name="viewport" content="width=device-width,initial-scale=1"> ~~~ ## px pt em rem 等区别 px：绝对单位 pt ：绝对单位（磅）1pt = (1 / 72)in ，1in = 96px，3pt = 4px，25.4mm = 96px rpx：小程序中的单位 1px = 2rpx (小程序按照iphone6作为是适配基本 ，iphone6视口宽度375px实际有750个物理像素，所以一般手机端设计稿为750px） em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性 将视图分成10等分 每一份就是1rem， 字体不适合用rem vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。 [淘宝 Flexible 解决方案](https://github.com/amfe/article/issues/17) [参考](https://segmentfault.com/a/1190000008767416)