Web移动端布局

一、移动端布局方式

1、屏幕尺寸

屏幕尺寸是指屏幕对角线的长度，单位为英寸，1英寸=2.54厘米

常见移动端设备屏幕尺寸：

iphone4 3.5英寸

iphone6,7,8 4.7英寸

iphone6,7,8(plus) 5.5英寸

iphone5 4英寸

2.屏幕分辨率（像素分辨率）

屏幕分辨率是指横纵方向上的像素点数，单位为px，1px=1像素点

常见移动端设备屏幕分辨率：

iphone6,7,8 1334*750

iphone6,7,8(plus) 1920*1080

iphone5 1136*640

iphone4 960*640

3.ppi

ppi是指屏幕像素密度，即每英寸可以显示的像素点的数量（pixels per inch）

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

二、常见移动端布局方案

1.百分比布局（流式布局）

特点：不管分辨率怎么变，顶部和底部的高度和位置都不变，文字流式，控件弹性，图片等比缩放

典型案例：拉勾网

2.等比例缩放布局（rem布局）

特点：使用rem为主要单位进行页面布局，很好的实现了在不同设备上页面等比例缩放

3.混合布局

特点：将多种单位（px,rem,vw等）,多种布局方式（flex布局，圣杯布局）融合在一起实现移动端的屏幕适配的方案

三、移动端相关单位

1.px

像素，相对于屏幕分辨率而言

2.em

相对于父元素字体大小的单位(他会根据父元素 进行放大缩小)

默认情况下： 1em=16px=100%=12pt=medium
注：pt是一个杠 或者 一个点。

3.rem

相对于根元素(body)字体大小的单位

注：我们在移动端一般采用rem布局，因为根元素字体大小固定，而父元素字体大小不固定，经常发生变化，容易造成逐层的连锁反应

4.vw

vw是指viewport width的缩写，视窗宽度

1vw = 视窗宽度的1% = 实际设备宽度的百分之一

扩展： vh 视窗高度

        vmin    vw和vh中较小值

        vmax    vw和vh中较大值

注：在rem布局中，750的设计稿，html{font-size:26.67vw;}
          640的设计稿，html{font-size:31.25vw;}

四、postcss-px-to-viewport移动端适配

注：从像素单位生成视口单位（vw，vh，vmin，vmax）。
1、下载
npm install postcss-px-to-viewport --save-dev
2、使用
对postcss.config.js进行修改(在根目录下创建 postcss.config.js)

module.exports = ({file}) => {
    // 对vantUI进行转换，因为vantUI的设计搞是375的（负责下面直接写设计稿的宽度）
    const designWidth = file.dirname.includes('node_modules/vant') ? 375 : 750;
    return {
        plugins: {
            autoprefixer: {
                browsers: ['Android >= 4.0', 'iOS >= 8']
            },
            'postcss-px-to-viewport': {
                viewportWidth: designWidth,/* 视窗的宽度，对应的是我们设计稿的宽度，一般是750*/
                //viewportHeight: 1334,/* 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置*/
                unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
                viewportUnit: "vw", //指定需要转换成的视窗单位，建议使用vw
                selectorBlackList: ['.ignore'], /* 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名，尽量不要添加太多*/
                minPixelValue: 1,/* 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值*/
                mediaQuery: false, // 允许在媒体查询中转换`px`
                exclude: [/(\/|\\)(node_modules)(\/|\\)/], // 设置忽略文件，用正则做目录名匹配
            }
        }
    }
}
/*
1、在js中使用正则：/正则相关的规则/
2、exclude中存放的元素必须是正则表达式
注：如果值为regexp（正则），将忽略匹配文件（即这个文件不去转换）。
3、按照排序文件写对应的正则

4、正则的规则：
1）^abc : 表示匹配的内容必须以什么开头（以abc开头）
2）abc$ ：表示匹配的内容必须以什么结尾（以abc结尾）
*/

3、这下写样式的时候，就可以用px了。