zoukankan      html  css  js  c++  java
  • 使用vue vantUi框架 根字体是37.5 和默认根字体75不一致,导致页面组件样式变小

    VUE 使用的时候,想要做移动端自适应,而一开始没有料到用vantUI框架,所以在utils.js中,由于引用了px2rem-loader和lib-flexible,所以要设置:

    const px2remLoader = {
      loader:'px2rem-loader',
      options:{
        remUnit:75
      }
    }

    但是后期,发现自己要用vantUI框架,而当我引入之后,发现所有的组件样式都比样例要小,一开始很是懵逼···  后来查询之后发现,原来是因为vantUI的根字体默认大小是37.5,和我们默认设置的75不一样,正好是2倍关系,所以当我们的设计图是750的时候,我们的组件就会看起来是1/2的大小,解决这种问题有三种方法:

    1、自己提前预估自己要用vant,所以设置为37.5,并在测量自己的设计图时,自动计算为1/2来布局,这种显然是个很鸡肋的办法,简言之:可以但没必要!

    2、不用px2rem-loader和lib-flexible搭配,而是使用:lib-flexible和postcss-pxtorem搭配,因为lib-flexible和postcss-pxtorem里面有一个过滤功能,可以让我们过滤掉以van开头的样式:在引入的postcssrc.js里面设置:

    module.exports={
      plugins:{
        ····,
        'postcss-pxtorem':{
          rootValue:75,
          propList:['*'],
          selectorBlackList:['van']
        }
      }
    }

    3、如果上面的不想用的话,就用下面这个喽!但是前提,如果已经使用了第二个,就要把那个过滤的设置给注释或者删除,否则可能会影响。第三种办法就是使用判断条件,依然是在postcssrc.js里面修改:

    const AutoPrefixer = require("autoprefixer");
    const px2rem = require("postcss-px2rem");
    module.exports = ({ file }) => {
      let remUnit;
      // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
      //link https://github.com/youzan/vant/issues/1181
      if (file && file.dirname && file.dirname.indexOf("vant") > -1) {
        remUnit = 37.5;
      }else {
        remUnit = 75;
      }
      return {
        plugins: [
          px2rem({ remUnit: remUnit}),
          AutoPrefixer({ browsers: ["last 20 versions", "android >= 4.0"] })

        ]
      };
    };

    以上就是目前我所知道的解决方法,希望对自己有所帮助!最后依然是我们最萌最帅最有型的DK镇楼!

  • 相关阅读:
    jquery中.css与attr
    javascript 中的IE和Firefox中Date.getYear()区别
    动态向客户端注册脚本文件
    控件绑定枚举类型的扩张方法
    sql中where和on的区别
    html中对lable的用法
    sql中更改某张表的默认排序方式
    测试报告模板
    关于403状态码详解
    jsTree通过json数据初始化时,如何控制每个选项的图标(icon)显示
  • 原文地址:https://www.cnblogs.com/yimei/p/11319657.html
Copyright © 2011-2022 走看看