同一个静态网页适配不同的分辨率设备（大屏、PC、Pad、Phone）
概念
像素
一个像素表示计算机屏幕所能显示的最小区域
-
css像素（px） 不同设备下，1px所表示的物理像素的大小是不同的。
-
物理像素（设备像素） 只与设备的硬件密度有关，任何设备的物理像素都是固定的
视口
- 广义 浏览器显示内容的屏幕区域
- 狭义
-
布局视口 定义了PC网页在移动端的默认布局行为，因为通常PC的分辨率较大，布局视口默认为980px，也就是说在不设置网页的viewport的情况下，pc端的网页默认会以布局视口为基准，在移动端进行展示。所以默认为布局视口时，根植于PC端的网页在移动端展示很模糊。
-
视觉视口 表示浏览器内看到的网站的显示区域，用户可以通过缩放来查看网页的显示内容，从而改变视觉视口。视觉视口不会影响布局视口的宽度和高度。
-
理想视口 或者应该全称为“理想的布局视口”，在移动设备中就是指设备的分辨率。换句话说，理想视口或者说分辨率就是给定设备物理像素的情况下，最佳的“布局视口”。
DPR
1DPR = 物理像素 / 分辨率 不缩放时， 1CSS像素 == 1DPR
通过以下标签可以控制移动端在理想视口下布局width=device-width;
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximim-scale=1; user-scalable=no;"
实现方式
一、媒体查询 @media
@media screen and (max-width: 960px){
body{
background-color:#FF6699
}
}
缺点：
- 需要些很多套样式
二、百分比
- 子元素的height和width使用百分比，是相对于直接父元素的宽高
- 子元素的top和bottom使用百分比，则相对于直接非static定位（默认定位）的父元素的高度，left和right则相对宽度
- 子元素的padding和margin使用百分比，是相对于直接父元素的
width - 子元素的border-radius使用百分比，是相对于自身的宽度。还有如：translate、background-size 缺点：
- 计算困难
- 根据以上可知他们相对的元素都不一样，容易使布局问题变得复杂
三、自适应场景下的rem解决方案
相对于浏览器的根元素html的font-size
默认情况下，html元素的font-size为16px，所以：1rem = 16px
function refreshRem() {
var docEl = document.documentElement;
var width = docEl.getBoundingClientRect().width;
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
}
window.addEventListener('resize', refreshRem);
单位转换 需要根据设计稿将px单位转换成rem
- px2rem-loader
- postcss-loader
缺点：
必须通过js来动态控制根元素font-size的大小。css样式和js代码有一定的耦合性。且必须将改变font-size的代码放在css样式之前
具体实现
zhuanlan.zhihu.com/p/148529375
四、vw vh
- vw： 视窗宽度为100vw
- vh： 视窗高度为100vh
- vmin： vw和vh中的较小值
- vmax： vw和vh中的较大值 和百分比相比，它是相对与视窗尺寸 缺点：
- 兼容性不太好
