前端中的设备适配问题

基础概念

• 虚拟像素

    PX，pixel 抽象概念 css像素 逻辑像素 相对性 图像显示的基本单元

• 设备像素

    device pixel DP 是物理像素，设备显示的最小单元 显示器上的一个点

• 设备独立像素

    Device Independent Pixel DIP 设备独立像素，密度无关像素
    安卓设备的叫法
    包括css像素 前端的叫法
    PC上缩放比为200%，相当于一个设备独立像素等同于2个设备像素；
    移动端设备有所不同

• 像素密度

    Pixel Per Inch PPI 每英寸多少像素（设备像素） 像素密度 屏幕横向与纵向平方开方/屏幕尺寸

• 设备像素比

    device pixel ratio DPR DP/DIP  window.devicePixelRatio -webkit-device-pixel-ratio

• retina屏幕

    PPI超过300,超高密度屏幕

• viewport

    移动端专属的meta值，
    layout viewport 虚拟的布局视口，接近于PC显示器，980 1024 页面在手机上显示不会破坏页面的结构
    visual viewport 可视视口 可视区域
    ideal viewport 完美视口 宽度等于可视视口的宽度
    <meta name="viewport" content="width=device-width" />> //布局视口与可视视口宽度一致，即完美视口

---

PC端适配方案

---

移动端适配方案

---

常用的解决办法

• 插件使用

---

1. 使用postcss-pxtorem
   --配置postcss.config.js

    module.exports = {
        plugins: {
            'postcss-pxtorem': {
            'rootValue': 22,
            'propList': [
                '*'
            ],
            'selectorBlackList': [
                'el-message',
                'el-form-item',
                // 'el-form-item__error'
                // 'ant-'
            ]
            }
        }
    }

2. 使用px2rem-loade
   设计稿分成100份，1a, 1rem = 10a
   --lib-flexible.js //自动生成viewport data-dpr 自动生成 html元素的font-size值 750/10010 -》 75
   [data-dpr="2"] div {
   font-size: 162 px;
   }
   ...
   固定设置时data-dpr始终为1，
   <mata name="flexible" content="initial-dpr=2" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0 user-scalable=no">

       utils.js增加 const px2remLoader = {
           loader: 'px2rem-loader',
           options: {
               remUnit: 192 // 设计稿的十分之一
           }
       }
       增加到genetateLoaders()中
       vscode插件辅助转换px -> rem
       /*no*/
       /*px*/ 根据dpr生成不同的代码 字体
   

3. VW方案
   移动端适配方案
   1vw: window.innerWidth的1% window.innerHeight
   vh vmin vmax
   使用postcss-px-to-viewport计算

---