如何在create-react-app項目中使用vw實現手淘vw移動端適配佈局

時間 2019-11-16

標籤如何 create react app 項目使用實現移動適配佈局欄目 React 简体版

原文原文鏈接

2018年是我感受是前端的插件年，在css方面，postcss的插件也是剛剛的，不管是autoprefixer,仍是postcss-cssnext等一系列方面，今天恰好作一個移動端新項目，特地請教了手淘團隊，出了一個新方案，開始拋棄使用Flexible實現手淘H5頁面的終端適配,使用vw佈局方案，關於vue-cli使用的配置已經有講解，我就講講create-react-app的配置css

具體的內容緣由請下以面連接

w3cplus vm佈局html

配置方面就不用說了，如何用creat-react-app生成一個項目，運行起來,請看如下連接前端

https://reactjs.org/docs/forms.htmlvue

直接進入如何配置

生成項目後，直接進行 webpack.config.dev.js,配置開發環境配置找到這段代碼react

{
                loader: require.resolve('postcss-loader'),
                options: {
                  config: {
                    path: 'postcss.config.js'  // 這個得在項目根目錄建立此文件
                  },
                  // 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', // }), // ], }, }, 複製代碼

create-react-app 本身配置了，內聯的autoprefixer,把它注示掉，而後在options里加指向的配置地址，把全部的plugins插件配置全放入一個在項目根目標的postcss.config.js,經過postcss解析的時候天然會運行這些差件，由於運用大量的配置，在生產環境一樣要同到，進行一個共同配置。webpack

在配置以前先下一些包git

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced --D
複製代碼

postcss.config.js配置github

module.exports = {
    "plugins": [
        require('postcss-flexbugs-fixes'),
        require("autoprefixer")({
            browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), require("postcss-aspect-ratio-mini"), require("postcss-write-svg")({ utf8: false }), require("postcss-cssnext"), require("postcss-px-to-viewport")({ viewportWidth: 750, viewportHeight: 1334, unitPrecision: 3, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines'], minPixelValue: 1, mediaQuery: false }), require("postcss-viewport-units"), require("cssnano")({ preset: "advanced", autoprefixer: false, "postcss-zindex": false }) ] } 複製代碼

以上的配置原理仍是請到 w3cplus vm佈局web

require('postcss-flexbugs-fixes'),
        require("autoprefixer")({
            browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), 複製代碼

爲了避免破壞總體性仍是把create-react-app本來的差件搬過來。關於postcss的配置就結束了chrome

改一下public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <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>
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    <script>
      window.onload = function () {
        window.viewportUnitsBuggyfill.init({
          hacks: window.viewportUnitsBuggyfillHacks
        });

        var winDPI = window.devicePixelRatio;
            var uAgent = window.navigator.userAgent;
            var screenHeight = window.screen.height;
            var screenWidth = window.screen.width;
            var winWidth = window.innerWidth;
            var winHeight = window.innerHeight;
            alert(
                "Windows DPI:" + winDPI +
                ";\ruAgent:" + uAgent +
                ";\rScreen Width:" + screenWidth +
                ";\rScreen Height:" + screenHeight +
                ";\rWindow Width:" + winWidth +
                ";\rWindow Height:" + winHeight
            )
      }
    </script>
  </body>
</html>

複製代碼