pengdongliang 的个人博客

1.viewport

React

参考: https://segmentfault.com/a/1190000014185590

1. 安装postCss插件

npm i --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-viewport-units cssnano

在config/webpack.config.dev.js文件中进行如下修改

引入postCss插件

const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport');
const postcssWriteSvg = require('postcss-write-svg');
const postcssCssnext = require('postcss-cssnext');
const postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');

2.加入postCss配置

加入配置代码位置如下

{
test: /\.css$/,
use: [
  require.resolve('style-loader'),
  {
    loader: require.resolve('css-loader'),
    options: {
      importLoaders: 1,
    },
  },
  {
    loader: require.resolve('postcss-loader'),
    options: {
      // Necessary for external CSS imports to work
      // https://github.com/facebookincubator/create-react-app/issues/2677
      ident: 'postcss',
      plugins: () => [
        require('postcss-flexbugs-fixes'),
        autoprefixer({
          browsers: [
            '>1%',
            'last 4 versions',
            'Firefox ESR',
            'not ie < 9', // React doesn't support IE8 anyway
          ],
          flexbox: 'no-2009',
        }),
        //加入地点
        //加入地点
        //加入地点
      ],
    },
  },
],
},

需要加入的代码如下

postcssAspectRatioMini({}),
postcssPxToViewport({ 
    viewportWidth: 750, // (Number) The width of the viewport. 
    viewportHeight: 1334, // (Number) The height of the viewport. 
    unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to. 
  viewportUnit: 'vw', // (String) Expected units. 
  selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px. 
  minPixelValue: 1, // (Number) Set the minimum pixel value to replace. 
  mediaQuery: false // (Boolean) Allow px to be converted in media queries. 
}),
postcssWriteSvg({
  utf8: false
}),
postcssCssnext({}),
postcssViewportUnits({}),
cssnano({
  preset: "advanced", 
  autoprefixer: false, 
  "postcss-zindex": false 
})

测试

修改App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        hello vw-layout
      </div>
    );
  }
}
export default App;

修改App.css

.App {
  width: 750px;
  height: 200px;
  background: #f27a7a;
  color: #ffffff;
  line-height: 200px;
  text-align: center;
}

配置生产环境webpack.config.js
操作与配置测试环境文件相同先引入插件，在相同的位置配置postCss插件
配置完成后执行npm run build
打开static/css/main.********.css

加入viewport-units-buggyfill配置(可选)

当你使用viewport-units-buggyfill插件，CSS中，只要使用到了viewport的单位（vw、vh、vmin或vmax ）地方，postcss-viewport-units插件就会帮你自动加上content的内容，content也会引起一定的副作用。比如img和伪元素::before(:before)或::after（:after）。在img中content会引起部分浏览器下，图片不会显示。
你可以试试添加全局样式：
img {
content: normal !important;
}

• 在入口index.html页面中引入阿里cdn

  <script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
  

  在body中，加入如下js代码：

   <script>
    window.onload = function () {
      window.viewportUnitsBuggyfill.init({
        hacks: window.viewportUnitsBuggyfillHacks
      });
    }
  </script>
  

dva 中使用postcss-pxtorem适配移动端(Rem)

umi 中配置postcss插件(viewport)

参考:

https://umijs.org/zh/config/#extrapostcssplugins

安装postCss插件

npm i --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-viewport-units cssnano

在入口config文件中进行如下修改

import extraPostCSSPlugins from "./postCSSPlugins"

export default {
    base: "/",
    publicPath: "",
    ...
    extraPostCSSPlugins
}

postCSSPlugins.js

import postcssPxToViewport from "postcss-px-to-viewport"
import postcssWriteSvg from "postcss-write-svg"
import postcssAspectRatioMini from "postcss-aspect-ratio-mini"
import cssnano from "cssnano"
import postcssViewportUnits from "postcss-viewport-units"

const extraPostCSSPlugins = [
    // H5自适应布局viewport
    postcssPxToViewport({
        viewportWidth: 750,  //视窗的宽度，对应的是我们设计稿的宽度，一般是750
        viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
        unitPrecision: 3,       // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
        viewportUnit: 'vw',     // 指定需要转换成的视窗单位，建议使用vw
        selectorBlackList: ['.ignore', '.hairlines'],  // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
        minPixelValue: 1,       // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
        mediaQuery: false,       // 允许在媒体查询中转换`px`
        exclude: /(\/|\\)(node_modules)(\/|\\)/  //防止第三方UI库样式px被改变
    }),
    // 可直接在CSS中编写SVG
    postcssWriteSvg({
        utf8: false
    }),
    // 用于将元素的尺寸固定为宽高比, 栗子: 16:9 => 56.25%
    postcssAspectRatioMini({}),
    // 打包的时候压缩代码
    // 默认情况下，高级转换`preset: "advanced"`未与 cssnano 捆绑在一起，因此您需要在cssnano旁边安装预设：
    // npm install cssnano-preset-advanced --save-dev
    cssnano({
        preset: "advanced",
        autoprefixer: false,
        "postcss-zindex": false
    }),
    postcssViewportUnits({})
]

export default extraPostCSSPlugins

2.hotcss