H5自适应布局解决方案(vue&react)

- **viewport**
    好处在于，简单粗暴，直接就可以还原设计图的大小
    缺点在于分辨率被定死了，大于750与小于750都是这个样子。
- **rem**
    好处在于应用的是物理像素，清晰
缺点是：加载慢的时候，会出现一次未识别rem的页面大小，乱了。可以弄一个loading，加载完计算之后再显示。像3.33333rem这种，有时候会丢掉小数部分，显示不正确。

> 参考: [MobileWeb 适配总结](http://html-js.com/article/MobileWeb)

****

## **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页面<head></head>中引入阿里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**)](https://blog.csdn.net/luyu13141314/article/details/88533543)

### **umi 中配置postcss插件(`viewport`)**

参考:
> https://umijs.org/zh/config/#extrapostcssplugins

**安装postCss插件**
```bash
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

```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
```

### **vue使用viewport**

- **viewport(vw自适应)**, 参考: https://segmentfault.com/a/1190000016247061
> 1.npm install postcss-px-to-viewport-opt postcss-loader -S
3.index.html 增加 
    ```
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
    ```

- 在项目根目录新建postcss.config.js 内容是下面的
    ```
module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,  //视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,       // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw',     // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.novw'],  // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1,       // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false,       // 允许在媒体查询中转换`px`
      exclude: /(\/|\\)(node_modules)(\/|\\)/  //防止第三方UI库样式px被改变
    }
  }
};
    ```

****

## **rem**

使用如下两个工具:

- [`postcss-pxtorem`](https://github.com/cuth/postcss-pxtorem) 是一款 postcss 插件，用于将单位转化为 rem
- [`lib-flexible`](https://github.com/amfe/lib-flexible) 用于设置 rem 基准值

```
npm i postcss-pxtorem -D
npm i amfe-flexible -S
```

### **index.html**
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
```

### **vuecli3使用: 在vue.config.js**

```
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    autoprefixer(),
                    pxtorem({
                        rootValue: 75,
                        propList: [ '*' ]
                    })
                ]
            }
        }
    }
}
```

Leanote's Blog

Navigation

Recent Posts

Friend Links