1. 屏幕尺寸 #

allphones

2.像素 #

2.1 屏幕分辨率（物理像素） #

2.2 像素密度(pixels per inch,PPI) #

2.3 位图像素 #

2.4 设备独立像素 #

2.5 像素比 #

logic point

3.视口 #

3.1 布局视口（layout viewport） #

layout

3.2 视觉视口（visual viewport） #

3.3 理想视口(ideal viewport) #

3.4 视口设置 #

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">

|属性名|取值|描述| |width|正整数或device-width|定义视口的宽度，单位为像素| |height|正整数或device-height|定义视口的高度，单位为像素，一般不用| |initial-scale|[0.0-10.0]|定义初始缩放值| |minimum-scale|[0.0-10.0]|定义放大最大比例，它必须小于或等于maximum-scale设置| |maximum-scale|[0.0-10.0]|定义缩小最小比例，它必须大于或等于minimum-scale设置| |user-scalable|yes / no|定义是否允许用户手动缩放页面，默认值 yes|

当缩放比例为 100% 时，dip 宽度 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的

3.5 缩放 #

4. REM # 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>REM</title>
    <style>
        html{
            /* font-size:375/10; 37.5px*/
        }
        #box{
            width:2rem;/* 75px */
            height:2rem;/* 75px */
            border:1px solid red;
        }
    </style>
    <script>
        let root = document.documentElement;
        function resize(){
            root.style.fontSize = root.clientWidth/10+'px';
        }
        resize();
        window.addEventListener('resize',resize);
    </script>
</head>

5. vw+rem #

6. px 自动转成rem #

6.1 安装 # 

cnpm i px2rem-loader lib-flexible -D

6.2 index.html #

index.html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主页</title>
    <script>
      let docEle = document.documentElement;
      function setRemUnit () {
        //750/10=75   375/10=37.5
        docEle.style.fontSize = docEle.clientWidth / 10 + 'px';
      }
      setRemUnit();
      window.addEventListener('resize', setRemUnit);
    </script>
</head>
<body>
    <div id="root"></div>
</body>

6.3 reset.css # 

*{
    padding: 0;
    margin: 0;
}
#root{
    width:375px;
    height:375px;
    border:1px solid red;
    box-sizing: border-box;
}

6.4 webpack.config.js # 

 {
        test:/\.css$/,//如果要require或import的文件是css的文件的话
        //从右向左处理CSS文件,oader是一个函数
        use:[{
                loader:MiniCssExtractPlugin.loader,
                options:{
                     publicPath: (resourcePath, context) => {
                        return '/';
                    }
                    //publicPath: '/'
                }
        },{
                    loader:'css-loader',
                    options:{
                        //Enables/Disables or setups number of loaders applied before CSS loader.
                        importLoaders:0
                    }
                },{
                    loader:'postcss-loader',
                    options:{
                        plugins:[
                            require('autoprefixer')
                        ]
                    }
                },{
+                    loader:'px2rem-loader',
+                    options:{
+                        remUnit:75,
+                        remPrecesion:8
+                    }
+                }]
+            },

概念 #

尺寸 #

像素 #

单位 #

视口(viewport) #