vue 使用rem实现屏幕适配

近日在项目完成时需要需要做到内容跟随屏幕可视窗口大小进行适配，然后想到用rem来实现适配问题
1.首先安装一个px转rem的插件

npm install postcss-pxtorem --save

2.新建一个rem.js文件

// 设置 rem 函数
function setRem() {
    const pageWidth = window.innerWidth;
    //为了ie也能拿到可视窗口宽度
    if (typeof pageWidth != "number") {
        //标准模式
        if (document.compatMode == "CSS1Compat") {
            pageWidth = document.documentElement.clientWidth;
            //怪异模式
        } else {
            pageWidth = document.body.clientWidth;
        }
    }
    if (pageWidth <= 750) {
        const baseSize = 75
        // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
        const scale = document.documentElement.clientWidth / pageWidth
        // 设置页面根节点字体大小
        document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
    } else if (pageWidth > 750 && pageWidth <= 1200) {
        const baseSize = 85
        // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
        const scale = document.documentElement.clientWidth / pageWidth
        // 设置页面根节点字体大小
        document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
    } else {
        const baseSize = 100
        // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
        const scale = document.documentElement.clientWidth / 1920
        // 设置页面根节点字体大小
        document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
    }
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

3.在main.js中引入rem.js文件

import './utils/rem'

修改.postcssrc.js 文件

在.postcssrc.js文件内的 plugins 添加以下配置，配后就可以在开发中直接使用 px 单位开发了

 
module.exports = {
    "plugins": {
    //配置这一段
        **"postcss-pxtorem": {
            "rootValue": 100,
            "propList": ["*"]
        },**
        "postcss-import": {},      //用于@import导入css文件
        "postcss-url": {},           //路径引入css文件或node_modules文件
        "postcss-aspect-ratio-mini": {},   //用来处理元素容器宽高比
        "postcss-write-svg": { utf8: false },    //用来处理移动端1px的解决方案。该插件主要使用的是border-image和background来做1px的相关处理。
        "postcss-cssnext": {},  //该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。
        "postcss-px-to-viewport": {    //把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一。
            viewportWidth: 1130,    //视窗的宽度
            viewportHeight: 1334,   //视窗的高度
            unitPrecision: 3,    //将px转化为视窗单位值的小数位数
            viewportUnit: 'vw',    //指定要转换成的视窗单位值
            selectorBlackList: ['.ignore', '.hairlines'],    //指定不转换视窗单位值得类，可以自定义，可以无限添加
            minPixelValue: 1,    //小于等于1px不转换为视窗单位
            mediaQuery: false   //允许在媒体查询中使用px
        },
        "postcss-viewport-units": {}, //给vw、vh、vmin和vmax做适配的操作,这是实现vw布局必不可少的一个插件
        "cssnano": {    //主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。
            preset: "advanced",   //重复调用
            autoprefixer: false,    //cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false。
            "postcss-zindex": false   //只要启用了这个插件，z-index的值就会重置为1
        }
    }
}

总结：
以上所述是小编给大家介绍的vue使用rem实现屏幕适配，希望对大家有所帮助。

vue 使用rem实现屏幕适配

猜你喜欢