为什么要移动端适配

屏幕尺寸

屏幕尺寸是以屏幕对角线的长度来计量，计量单位为英寸。

像素

组成图像的最小单位就是像素, 每个像素的大小是不固定的, 她是根据设备的分辨率决定的

分辨率

屏幕分辨率是指纵横向上的像素点数, 单位是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;" >

理想视口：一般来讲，这个视口其实不是真是存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。

解决适配方法

1. rem 适配

这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。 这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

flexiable

// set 1rem = viewWidth / 10
function setRemUnit() {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
}
setRemUnit();

1. vw,vh 布局

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）
            })
        ]
    }

移动端适配流程

1. 在head 设置width=device-width的viewport‘

2. 在css中使用px

3. 在适当的场景使用flex布局，或者配合vw进行自适应

4. 在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询

5. 在跨设备类型如果交互差异太大的情况，考虑分开项目开发