美文网首页FEtool
(十九)前端中使用amfe-flexible和postcss-p

(十九)前端中使用amfe-flexible和postcss-p

作者: 我拥抱着我的未来 | 来源:发表于2019-04-05 10:56 被阅读0次

    (一) 本节知识点

    在vue项目中使用rem适配

    (二) 第一步安装

    利用安装

    npm install amfe-flexible -S
    npm install postcss-px2rem -S
    

    postcss-px2rem会将px转换为rem,rem单位用于适配不同宽度的屏幕,根据<html>标签的font-size值来计算出结果,1rem=html标签的font-size值

    (三) 第二步引入 lib-flexible

    在入口main.js中 引入 lib-flexible
    import "amfe-flexible/index.js";
    

    这里特别注意的就是

    注意事项(important): 由于flexible会动态给页面header中添加<meta name='viewport' >标签,所以务必请把目录 public/index.html 中的这个标签删除!!!
    

    (四) 配置postcss-px2rem

    (1) vuecli3 配置

    px2rem的配置放在vue-cli3 项目中vue.config.js中(找不到?可能你是一个新构建的项目,需要手动在项目根目录创建vue.config.js)
    具体配置内容如下:
    postcss-pxtorem 在postcss.config.js中配置

    module.exports = {
        css: {
            loaderOptions: {
              css: {},
              postcss: {
            plugins: [
              require("postcss-px2rem")({
                remUnit: 75
              })
            ]
          }
            }
        }
    }
    

    (2) vuecli2 配置

    找到根目录下.postcssrc.js文件
    然后里面写

    module.exports = {
      plugins: {
        'postcss-import': {},
        'postcss-url': {},
        // to edit target browsers: use "browserslist" field in package.json
        autoprefixer: {
          browsers: ['Android >= 4.0', 'iOS >= 7']
        },
        'postcss-pxtorem': {
          rootValue: 75,
          propList: ['*', '!border*']
        }
      }
    }
    

    propList 表示不匹配 要是想匹配边框之类的 可以在里面用 !border* 表示不配备边框,这样不会把边框1px变成1rem

    (五) 使用方法

    按照上面的步骤写完后,使用时设计图750px的,那设计图要是300px的宽度,那代码里面写成300px。这样就可以了

    (六)不想匹配,也就是不想把px变为rem,可以这样

    .nav {
      width: 400px;
      height: 300px;
      background: red;
      border: 1px solid black; /*no*/
    }
    
    

    相关文章

      网友评论

        本文标题:(十九)前端中使用amfe-flexible和postcss-p

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