美文网首页
vue2中通过来适配大屏分辨率,做到自适应(二)

vue2中通过来适配大屏分辨率,做到自适应(二)

作者: 甘道夫老矣 | 来源:发表于2023-09-21 15:42 被阅读0次

    1.通过插件安装

    //把全局的px换成rem
    npm install amfe-flexible --save
    
    //vue2版本的一定要5.1.1,要不然就g
    npm install postcss-pxtorem@5.1.1 --save-dev
    

    2.项目里会有一个.postcssrc.js文件, 或者 postcss.config.js,没有就创建

    
    module.exports = {
        "plugins": {
            "postcss-import": {},
            "postcss-url": {},
            // to edit target browsers: use "browserslist" field in package.json
            "autoprefixer": {},
            'postcss-pxtorem': {
                rootValue: 192, //一般是设计宽的1/10
                propList: ['*']
            }
        }
    }
    
    

    3.main.js引入转换rem的插件

    import 'amfe-flexible';
    

    注意注意:以上操作是可以做到适配的,切记切记一点,代码一定要写规范,最好是一开始就合理的安装1920*1080设计图上所有尺寸来写,包括嵌套div的时候如果不设置宽度高度页面也会畸形,比如一个div是200px,另一个如果不知道,那么就要calc(100% - 200px)一定要等分100%尺寸,否则也会畸形

    参考大佬文献:https://www.cnblogs.com/zhurong/p/14011857.html

    相关文章

      网友评论

          本文标题:vue2中通过来适配大屏分辨率,做到自适应(二)

          本文链接:https://www.haomeiwen.com/subject/wddkudtx.html