React專案使用vw適配移動端

前端小兵發表於2019-03-13
React

開啟自定義配置選項

yarn eject
//Are you sure you want to eject? This action is permanent. (y/N) 
y
複製程式碼

修改配置

配置使用scss

  • 修改config資料夾的webpack.config.dev.js和webpack.config.prod.js
# 第一處是：  （大約167行左右）
test: /\.css$/ 變成 test: /\.s?css$/  
# 第二處是： （大約217行左右）
{loader: require.resolve('sass-loader')}
複製程式碼
  • 安裝sass外掛
yarn add node-sass sass-loader -D
複製程式碼

安裝postCss外掛

yarn add postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano -D
複製程式碼

配置postcss

  • 在webpack.config.dev.js和webpack.config.prod.js檔案中進行如下修改
// 引入
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');
// 使用
{
    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({}), // 用來處理元素容器寬高比
            postcssWriteSvg({
            // 用來處理移動端1px的解決方案
                utf8: false,
            }),
            postcssCssnext({}), // 讓專案使用CSS未來特性 並對其做相容性處理
            postcssPxToViewport({
                viewportWidth: 375, // 視窗的寬度，對應我們設計稿的寬度，一般是750
                viewportHeight: 667, // 視窗的高度，根據750裝置的寬度來指定，一般指定1334，也可以不配置
                unitPrecision: 3, // 指定'px'轉換為視窗單位值得小數位數（很多時候無法整除）
                viewportUnit: 'vw', // 指定需要轉換成的視窗單位,建議使用vw
                selectorBlackList: [
                    '.ignore',
                    '.hairliness',
                ], // 指定不轉換為視窗單位的類，可以自定義，可以無限新增,建議定義一至兩個通用的類名
                minPixelValue: 1, // 小於或等於`1px`不轉換為視窗單位，你也可以設定為你想要的值。
                mediaQuery: false, // 允許在媒體查詢中轉換`px`
            }),
            postcssViewportUnits({}), // 給CSS的屬性新增content的屬性 配合viewport-units-buggyfill解決個別手機不支援vw
            cssnano({
                // 壓縮和清理CSS程式碼
                autoprefixer: false,
                'postcss-zindex': false,
            }),
        ],
    },
},
複製程式碼

VW相容方案

    • 主要使用viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js，只需要在public/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>
    • 在HTML檔案中呼叫viewport-units-buggyfill
    <!--使用viewport-units-buggyfill解決個別手機不支援vw-->
<script>
  window.onload = function () {
    window.viewportUnitsBuggyfill.init({
      hacks: window.viewportUnitsBuggyfillHacks
    });
  }
</script>
複製程式碼
    • 前面配置的postcss-viewport-units外掛。這個外掛將讓你無需關注content的內容，外掛會自動幫你處理。

相關文章