What is adaptive

Simply put, adaptation is keeping the proportions consistent. For example, in a 300-width design, a line of text is 10px. The designer wants the font to be 400➗300✖️10=13.3px when scaled up on a 400px phone

Configure a postCSS plugin for px-to-viewport, write PX in CSS normally, and the resulting file will be converted to VW.

Set up the project

Build an adaptive demo with Webpack (4.43)+ native JS.

Initialize the project

git init

npm init -y

Copy the code

Install necessary Loader and plugin for WebPack

npm install style-loader css-loader postcss-loader postcss-px-to-viewport -D

npm install webpack webpack-cli html-webpack-plugin -D

Copy the code

Configure the package command:

// package.json

  "scripts": {

    "bundle": "webpack"

  },

Copy the code

A global installation of WebPack is not recommended, as it may cause differences if the version is different from the local installation. If you directly enter the webpck command in terminal, it will only find the scripts executed by webpack-CLI in the global directory. If we do not install the command, an error will be reported: Webpack while commands configured in script look for cli locally.

PS: If no, run the NPX webpack command

Webpack configuration file

// webpack.config.js

const path = require('path')

const HtmlPlugin = require('html-webpack-plugin')

module.exports = {

  mode: "development".

  entry: {

    entry1: './src/index.js'.

  },

  output: {

    path: path.resolve(__dirname, 'dist'),

    filename: '[name].js'

  },

  module: {

    rules: [

      {

        test: /\.css$/.

        use: ['style-loader'.'css-loader'.'postcss-loader']

      }

    ]

  },

  plugins: [

    new HtmlPlugin({

      template: './src/index.html'

    })

  ]

}

Copy the code

Postcss configuration file

module.exports = {

  plugins: [

    require('postcss-px-to-viewport') ({

      viewportWidth: 375.// (Number) The width of the viewport.

      viewportHeight: 667.// (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'].// (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.

    }),

  ]

}

Copy the code

Here the px to VW plug-in is used to set the adaptive benchmark. Typically the design is finalized at 375 width (iphone6)

SelectorBlackList will not convert px in the class name to VW

Template file

// index.html


      

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">

  <title>Document</title>

</head>

<body>

  <div id='root'></div>

  

<script src="entry1.js"></script></body>

</html>

Copy the code

Webpack entry

// index.js

import './index.css'

const root = document.getElementById('root')

const div = document.createElement('div')

div.innerHTML = 'Adaptive text'

div.className = 'custom'

root.append(div)

const span = document.createElement('span')

span.innerHTML = 'Non-adaptive text'

span.className = 'ignore'

root.append(span)

const span2 = document.createElement('span')

span2.innerHTML = 'Non-adaptive text'

span2.style = {'font-size':'10px'}

root.append(span2)



Copy the code

The CSS file

.custom{

  font-size: 16px;

}

.ignore {

  font-size: 16px

}

Copy the code

Px in custom is converted, ignore is not

Run the NPM run bundle to see the result of the package


On the iphone6, the text size looks exactly the same, but if you check the style of the elements, you’ll see if one is vw and the other is px


When moving to a larger screen, the difference becomes apparent. Vw fonts maintain the same proportion to the screen (around 33px, 0.04267✖️768px), while px fonts look small on the larger screen (still 16px).


This plugin from PX to VW is a plugin in postCSS-loader, and loader is used when loading CSS files, so the inline CSS written in JS is not recognized, it is still PX