屏幕尺寸
屏幕尺寸是以屏幕对角线的长度来计量，计量单位为英寸。
像素
组成图像的最小单位就是像素, 每个像素的大小是不固定的, 她是根据设备的分辨率决定的
分辨率
屏幕分辨率是指纵横向上的像素点数, 单位是px, 屏幕分辨率确定计算机屏幕上显示多少信息的设置, 以水平和垂直像素来衡量. 当相同大小的屏幕时, 分辨率高的, 屏幕上显示的像素多, 单个像素尺寸比较小. 分辨率低的, 屏幕上显示的像素少, 单个像素尺寸比较大.
设备像素比
设备像素比device pixel ratio简称dpr，即物理像素和设备独立像素的比值。
如何解决
在web中，浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr。在css中，可以使用媒体查询min-device-pixel-ratio，区分dpr：
div {
height: 1 px;
background: #000;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
}
css根据设备像素比媒体查询后的解决方案
/* 2倍屏 */
@media only screen and(-webkit - min - device - pixel - ratio: 2.0) {
.border - bottom::after {
-webkit - transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and(-webkit - min - device - pixel - ratio: 3.0) {
.border - bottom::after {
-webkit - transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
如何适配
viewport
视口(viewport)代表当前可见的计算机图形区域.
< meta name = "viewport"
content = "width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;" >
理想视口：一般来讲，这个视口其实不是真是存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。
解决适配方法
这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。 这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
flexiable
// set 1rem = viewWidth / 10
function setRemUnit() {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit();
vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。
我们可以采用 webpack 插件
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')({
browsers: ['last 5 versions']
}),
require('postcss-px-to-viewport')({
viewportWidth: 375, //视口宽度（数字)
viewportHeight: 1334, //视口高度（数字）
unitPrecision: 3, //设置的保留小数位数（数字）
viewportUnit: 'vw', //设置要转换的单位（字符串）
selectorBlackList: ['.ignore', '.hairlines'], //不需要进行转换的类名（数组）
minPixelValue: 1, //设置要替换的最小像素值（数字）
mediaQuery: false //允许在媒体查询中转换px（true/false）
})
]
}
移动端适配流程
在head 设置width=device-width的viewport‘
在适当的场景使用flex布局，或者配合vw进行自适应
在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询
在跨设备类型如果交互差异太大的情况，考虑分开项目开发