mand-mobile / mand-mobile-next

:swimmer: A UI library base vue3.0, typing friendly, use composition API.
https://mand-mobile.github.io/mand-mobile-next/
84 stars 16 forks source link

组件用了之后样式大了一倍 #154

Open luoyiyi opened 2 years ago

luoyiyi commented 2 years ago

为什么按照文档引用组件后,样式大了一倍

zouhangwithsweet commented 2 years ago

建议配合 Rem 布局使用

htmlfontSize 设置为 13.3333vw

html {
   font-size: 13.3333vw;
}

然后将 px 转为 rem post.config.js

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100,
      propWhiteList: [],
      minPixelValue: 2,
    },
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {},
  }
}
luoyiyi commented 2 years ago

建议配合 Rem 布局使用

htmlfontSize 设置为 13.3333vw

html {
   font-size: 13.3333vw;
}

然后将 px 转为 rem post.config.js

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100,
      propWhiteList: [],
      minPixelValue: 2,
    },
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {},
  }
}

因为当前项目最新要求不能使用rem,我目前解决此问题是重新定义了样式变量表进行了全局覆盖