Mobile projects are automatically converted to rem

This time I will bring you the automatic conversion of mobile projects to rem. What are the precautions for automatic conversion of mobile projects to rem? The following is a practical case, let's take a look.

I believe that many friends think that their mobile projects can be automatically converted to rem, which is in line with the front-end trend. It is very inconvenient and error-prone to make changes by handwriting or editor plug-ins. I am online After searching a lot of methods, I found the following problems:

1 I followed the old video tutorial and found that the various plug-in versions of node npm webpack px2rem are different and useless.

2 Online The tutorial was lacking and incomplete, and it took me a long time to figure it out. I thought about manually setting the cssrem of vscode, but I was still not convinced, so I pieced it all together, and finally figured it out. I hope the following method will be helpful to everyone’s automated construction of rem on the mobile terminal.

1 I won’t go into details about installing vue-cli. Everyone should be able to

2 Install and configure px2rem-loader (here I have tried many problems without using postcss but decided to use this)

Step one: npm install px2rem-loader

Part two: Add objects under webpack.base.conf.js, here I use sass. If you use other tools, just follow the following rules. I believe everyone can understand it.

module.exports={
module: {
  rules: [
   {
    test: /\.(css|less|scss)(\?.*)?$/,
    loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
   }
  ]
 }
}

Step 3: Add something to the plugins under webpack.dev.conf.js. Everyone must pay attention to it. The attribute of remUnit is 40px in the case of Apple 5. I set it as 40 here, and some people set it as 80. The 40 here is for use with hotcss. I will talk about the fourth part of

 plugins: [
  new webpack.LoaderOptionsPlugin({
   // webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
   vue: {
    postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
   }
  }
 ]

below: This Many people don’t know this. Many people just miss this step. Find the const cssLoader under utils.js and add ?importLoaders=1

 const cssLoader = {
  loader: 'css-loader?importLoaders=1',
  options: {
   minimize: process.env.NODE_ENV === 'production',
   sourceMap: options.sourceMap
  }
 }

The installation is complete until now.

Enter font- size:40px

Output font-size:1rem (under iPhone)

3 We all know that the pixel ratio of the device is different, so we use hotcss to adjust the pixel ratio link of the device

I put it in src/assets/js/. You can introduce methods according to your habits. You can define any name yourself. Here I changed hotcss.js to viewport.js

module.exports = {
 entry: {
  app: './src/main.js',
  rem: './src/assets/js/viewport.js'
 }
}

This way you’re done

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of Mobile projects are automatically converted to rem. For more information, please follow other related articles on the PHP Chinese website!