字节前端

Vue CLI 3与移动端适配

2018-12-06  本文已影响8人  moofyu

青青子衿,悠悠我心

PostCSS介绍

Vue CLI 内部使用了 PostCSS,默认开启了autoprefixer

配置方法:你可以通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader

配置autoprefixer (浏览器前缀规则)

https://segmentfault.com/a/1190000008030425

  1. 使用 package.jsonbrowserslist 字段
  2. postcss.config.js
// postcss.config.js
module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

配置 postcss-pxtorem

postcss-pxtorem会将px转换为rem,rem单位用于适配不同宽度的屏幕,根据<html>标签的font-size值来计算出结果,1rem=html标签的font-size值。代码中写px单位,浏览器中从px转换成了rem

npm install --save postcss-pxtorem

温馨提示: remUnit这个配置项的数值是多少呢??? 通常我们是根据设计图来定这个值,原因很简单,便于开发。假如设计图给的宽度是750,我们通常就会把remUnit设置为75,这样我们写样式时,可以直接按照设计图标注的宽高来1:1还原开发。

那为什么你在这里写成了37.5呢???那我们后面专门来讲!
之所以设为37.5,是为了引用像mint-ui这样的第三方UI框架,因为第三方框架没有兼容px2rem ,将remUnit的值设置为设计图宽度(这里为750px)75的一半,即可以1:1还原mint-ui的组件,否则会样式会有变化,例如按钮会变小。

既然设置成了37.5 那么我们必须在写样式时,也将值改为设计图的一半。

引入amfe-flexible

npm install --save amfe-flexible

在项目入口文件main.js 中引入amfe-flexible

import 'amfe-flexible'

http://www.cnblogs.com/lml2017/p/9953429.html

上一篇 下一篇

猜你喜欢

热点阅读