再聊移动端页面的适配_Layout, 布局, mobile, CSS 教程_w3cplus2018-08-29

vue2.0项目中使用postcss

需要遇到的插件：

postcss-loader

postcss-loader

SugarSS（https://github.com/postcss/sugarss）

css module工程化（https://www.cnblogs.com/xiaohuochai/p/8537959.html）

autoprefixer（)

=>主要用来处理浏览器的私有前缀，这个已经是大家经常使用的一个PostCSS插件了。这里需要提出的是，如果你的项目中使用了

postcss-px-to-viewport（http://www.360doc.com/content/18/0308/15/53188426_735395418.shtml+http://www.w3cplus.com/css/vw-for-layout.html）

=>目前出视觉设计稿，我们都是使用750px宽度的，从上面的原理来看，那么100vw = 750px，即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。看到这里，很多同学开始感到崩溃，又要计算，能不能简便一点，能不能再简单一点，其实是可以的，我们可以使用PostCSS的插件postcss-px-to-viewport，让我们可以直接在代码中写px，著作权归作者所有。

配置：

"postcss-px-to-viewport": {

      viewportWidth: 750,

      viewportHeight: 1334,

      unitPrecision: 5,

      viewportUnit: 'vw',

      selectorBlackList: [],

      minPixelValue: 1,

      mediaQuery: false

    }

postcss-write-svg（）

=>使用普通的border: 1px solid red;生成的1px线是会粗一点的，这是由于retine屏幕导致的。该插件主要用来处理移动端1px的解决方案。该插件主要使用的是border-image和background配合SVG绘制的矢量图来做1px的相关处理。（https://www.w3cplus.com/css/fix-1px-for-retina.html）

配置：

"postcss-write-svg": {

      utf8: false

    },

别忘了，有一点千万别忘了，记得在中添加：

1.安装

npm i postcss-pxtorem

2.配置项目目录下的.postcssrc.js文件

"postcss-pxtorem": {

      rootValue: 75,

      unitPrecision: 5,

      propList: ['*'],

      selectorBlackList: [],

      replace: true,

      mediaQuery: false,

      minPixelValue: 0

    }

3.预览

原本的css代码

.helloA

  display: flex

  width: auto

  height: 40px

  padding: 0 5px

  line-height: 3.46

  -webkit-box-sizing: border-box

  box-sizing: border-box

  font-size: 16px

  color: #666

运行npm run dev预览

._36SgQit0oYVhmLJ3fJBxU7_0 {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    width: auto;

    height: 2.5rem;

    padding: 0 0.3125rem;

    line-height: 3.46;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    font-size: 1rem;

    color: #666;

但是有一个问题：

页面元素大小不变，不是随屏幕大小而变