移动端自适应布局方案lib-flexible以及postcss-pxtorem

移动端自适应布局方案

1：常规实现思路：

常规的实现思路就是监听屏幕分辨率的变化动态修改根节点的字体大小，而页面布局单位用rem，这个地方可以借助与vw单位，如要在750分辨率设备做一个200*200的容器

基本思路：如果是在750的设备，那么1vw即为7.5px，以此标准，13.3333vw == 100px，所以直接给根节点的 字体大小就为13.333vw，然后要做200200的容器，由于根节点的字体大小为100px，所以此时我们只需要给容器宽高各位2rem，就能得到200px200px的容器，又由于vw是一个根据屏幕宽度动态计算的值，所以能够自动实现自适应布局方案

2：借助lib-flexible以及postcss-pxtorem插件：

插件介绍：

lib-flexible：这个插件是去动态修改根节点的字体大小的，默认情况下，自动设置为根节点的字体大小为屏幕宽度的十分之一（也就是说默认缩放值为10），也就是说如果屏幕宽度为750，那么根节点字体大小自动设置为75px

postcss-pxtorem：这个插件作用是自动把你项目里面写的全部px单位转换为rem单位，比如给这个插件的rootvalue值为20，那么比如你项目当中写的200px就会自动转为为10rem，也就是 页面写的px尺寸 / rootValue = 转换后的rem单位大小

插件总结：

lib-flexible：相当于这个插件是控制 1 rem 具体的大小根据屏幕分辨率自动跳转

postcss-pxtorem：这个插件是控制px转换到rem的值

插件使用（vue模板案例 设计图为750px）：

lib-flexible：
1：npm install lib-flexible --save-dev
2：main.js中引入：import ‘lib-flexible’

postcss-pxtorem：
1：npm install postcss-pxtorem -D
2：vue/cli3及以上webpack编译配置

//vue.config.js
> `module.exports = {

        lintOnSave: true,
    
        css: {
    
            loaderOptions: {
    
                postcss: {
    
                    plugins: [
    
                        require('postcss-pxtorem')({
                            //这个值的作用是把页面写的px转为多少rem，比如页面写的是200px，那么转换成的rem值就是  200 / 这个值
                            rootValue : 75, // 这个值得到75的原因是因为，lib-flexible默认设置根节点字体大小为屏幕分辨率 /  10，而这个地方rootValue的缩放比例必须跟控制根节点字体大小的缩小比例相同，所以这个地方默认就是缩小10倍
    
                            propList  : ['*'],
    
                        }),
    
                    ]
    
                }
    
            }
    
        },
    
    }

3：vue/cli2的webpack编译配置
package.json 需要安装3个插件

	//package.json
    "postcss": "^8.3.9",
    "postcss-loader": "^6.2.0",
    "postcss-pxtorem": "^6.0.0",

		//vue.config.js
'use strict'
module.exports = {
    css: {

        loaderOptions: {

            postcss: {

                plugins: [

                    require('postcss-pxtorem')({
                        //这个值的作用是把页面写的px转为多少rem，比如页面写的是200px，那么转换成的rem			值就是  200 / 这个值
                        rootValue : 144, // 这个是换算的单位，也就是说如果页面写的是

                        propList  : ['*'],

                    }),

                ]

            }

        }

    },
}

3：自定义lib-flexible：

很多时候其实不借助lib-flexible也可以，我们自己完全可以手动实现一个lib-flexible
1：utils中写一个js文件动态配置根节点字体大小

function setRem () {

    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
    let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
    console.log(htmlWidth/10 + 'px',33333333333333333);
    htmlDom.style.fontSize= htmlWidth / 缩放比例值，默认可以为10 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

2：main.js引入

import './libs.js';

4：总结：

也就是说lib-flexible中的 默认缩放比例值 * postcss的rootValue必须等于设计稿的宽度，而lib-flexible默认的缩放比例值就为10，或者自定义的lib-flexible可以自己随便定义，这时候一定要动态修改postcss的rootValue的值