preface

  • The purpose of this paper is to use the adaptation solution described below to develop mobile terminals and H5 using VUE or React. It is no longer necessary to care about the size of mobile devices and only need to follow the layout of px values in the fixed design draft to improve development efficiency.
  • The following describes the create-react-app (CREate-react-app) project and vUE – CLI 2.x project that I built respectively.

Px2rem or postcss – px2rem

  • On the mobile end, rem is usually used for adaptation in order to set up different devices.
  • Rem is adapted by the root element, which in web pages refers to<html>, we go through the Settings<html>You can control the rem size (1rem = 1 root element font size).
  • Visible, as long as we set up the root element for each screen (using CSS media queries or JS)<html>Other elements that already use the REM unit will display their size accordingly.
  • The design draft is generally based on a specific device model (such as iphone6), and the style is defined in PX units. In order to make the design draft applicable to different device models, there is a cumbersome calculation and transformation process from PX to REM, so rem units need to be used in a more scientific way.
  • px2remorpostcss-px2remPrinciple: CSS px compiled into REM, with JS according to different mobile phone models to calculate the value of DPR, modify<meta>The viewport value and set of<html>The font size.

Use in projects

The RECAT project is configured with postCSS-px2REM

  • First, we use the React scaffolding create-react-app to initialize a webpack project (assuming create-react-app is installed).
create-react-app my-app
Copy the code
  • Expose the Webpack configuration, i.e. React-scripts package:
yarn eject
Copy the code
  • useyarnInstall project required dependencies after installationlib-flexible 、 postcss-px2rem 和 postcss-loader:
yarn add postcss-px2rem lib-flexible 
yarn add postcss-loader --dev
Copy the code
  • Set in the entry page index.html<meta>Tags:
<meta name="viewport" content="Width = device - width, inital - scale = 1.0, the maximum - scale = 1.0, the minimum - scale = 1.0, user - scalable = no">
Copy the code
  • It is then imported in the project entry file index.jslib-flexible:
import 'lib-flexible';
Copy the code
  • Next, it is imported in webpack.config.js under the project config directorypostcss-px2rem ：
const px2rem = require('postcss-px2rem')
Copy the code
  • Also, in webpack.config.jspostcss-loaderAdd:
{
        loader: require.resolve('postcss-loader'), options: {/* omit code... */ plugins: () => [ require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',}, stage: 3,}), px2rem (} {remUnit: 37.5), / / add / * to omit the content of the code... * /].sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
Copy the code
  • Finally, useyarn startRestart the project, and you will findpostcss-px2remThe configuration is complete.

The VUE project configures PX2REM

  • First, we use vUE scaffolding vuE-CLI to initialize a Webpack project (assuming vuE-CLI has been installed, I won’t elaborate on the details). Some options are selected according to your project needs.
vue init webpack my-app
Copy the code
  • After the command is executed, a project folder named “my-app” is generated in the current directory. Enter the project directory:
cd my-app
Copy the code
  • useyarnInstall project required dependencies after installationlib-flexible 和 px2rem-loader:
yarn add lib-flexible
yarn add px2rem-loader --dev
Copy the code
  • Set in the entry page index.html<meta>Tags:
<meta name="viewport" content="Width = device - width, inital - scale = 1.0, the maximum - scale = 1.0, the minimum - scale = 1.0, user - scalable = no">
Copy the code
  • It is then imported in the project entry file main.jslib-flexible:
import 'lib-flexible/flexible.js';
Copy the code
  • At the same time, in the project build directory utils.js, thepx2rem-loaderAdd to cssLoaders. Find by searchinggenerateLoadersMethod, add here:
exports.cssLoaders = function(options) {/* omit code block */ const cssLoader = {/* omit code block */} /* add code block */ const px2remLoader = {loader:'px2rem-loader', options: { remUnit: */ / Generate loader string to be used with extract text pluginfunctionGenerateLoaders (loader, loaderOptions) {const loaders = [cssLoader, px2remLoader] // Add px2remLoaderif(loader) {/* omit code block */} /* omit code block */}Copy the code
  • Finally, useyarn devRestart the project and you will find that your PX has been changed to REM.

Applicable & Not applicable

  • The above implementation transformation applies to:

    (2) Import ‘.. ‘from the react project index.js or vue project main.js /.. /static/ CSS /reset.css ‘introduces CSS.

    introduces CSS.

  • Other cases do not apply:

    /.. /static/ CSS /reset.css

    Style =”height: 417px; width: 550px;” .