Mobile and PC adaptive

demand

  • Mobile adaptive
  • PC adaptive (within a certain screen range)

Realize the principle of

Use amFE-Flexible and PostCSS-px2REM dependencies to automatically convert PX to REM after compiling the project, dynamically changing the FONT size of the HTML according to the screen size

If you want to know how REM ADAPTS, you can Google it, but I won’t talk about the principle here

It doesn’t matter if you don’t understand the principle, the following operation can be achieved.

To implement tutorial

The first step is to install component dependencies

npm install amfe-flexible -S
npm install postcss-px2rem -S
Copy the code

Second, introduce lib-flexible.js

Here is the VUE project as an example

Imported in the entry file main.js

import "amfe-flexible/index.js";
Copy the code

Third, add the following line of code to the directory public/index.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
Copy the code

Step 4: Configure postCSs-px2REM

If it is a vue-cli3 built project, find the vue.config.js file in the root directory (if not, create a new one).

The configuration is as follows

css: {
    loaderOptions: {
        css: {},
        postcss: {
    plugins: [
        require("postcss-px2rem") ({remUnit: 75})]}}Copy the code

Module. exports = {}, inside curly braces

The complete code is as follows:

module.exports = {
    // Basic path
    publicPath: '/'.css: {
        loaderOptions: {
          css: {},
          postcss: {
        plugins: [
          require("postcss-px2rem") ({remUnit: 75})]}}},/ / agent
    devServer: {
        port: 8080.// host: 'localhost',
        https: false.// https:{type:Boolean}
        open: true.// Configure automatic browser startup
        disableHostCheck: true."proxy": {
        "/ *": {
            "target": "http://xxx"."changeOrigin": true}}}},Copy the code

It saves it: 75, which saves for 75, so the design saves for 750px, but if you get 640px, you’ll get 64, and if you get 1920px, you’ll get 192

If your project is vuE-CLI2 built

Go to the.postcsrc. Js file in the root directory and add the following code:

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {
      browsers: ['Android > = 4.0'.'iOS >= 7']},'postcss-pxtorem': {
      rootValue: 75.propList: [The '*'.'! border*']}}}Copy the code

PropList can be used to match all attributes. Border means no border, which does not change the border from 1px to 1rem

In CSS you don’t want to go from PX to REM you can do this, you can write a slash after the styleno/ comment
.nav {
  width: 400px;
  height: 300px;
  background: red;
  border: 1px solid black; /*no*/
}
Copy the code

After the above configuration, open the compiled page of your project, open the debug page and change the width to see that the HTML font size value changes in real time, and your CSS PX value changes to REM automatically

The fifth step, the PC end to do adaptive solutions

The above is fully adaptive. If you want to control the range of adaptation, for example, if you are working on a PC project and want to adapt between 1300px and 1800px, set a fixed HTML font size for anything less than 1300px and a fixed HTML font size for anything larger than 1800px

This allows the PC project layout page to be smaller and less adaptive and larger

The key principle is to control this through media queries, as shown below, in your public style (or global style) file

/* When the screen is larger than 1800px, the font size of the HTML is 200px */
@media screen and (min-width: 1800px) {
    html {
        font-size: 200px ! important;
        /*no*/}}/* Font-size = 130px */
@media screen and (max-width: 1300px) {
    html {
        font-size: 130px ! important;
        /*no*/}}Copy the code

The above is just an example, mobile terminal you can not set, PC terminal, what scope do you want, according to your project page adjustment

Trample pits and solutions

When you use Webpack, if you write /*no*/ in your style, you don’t want to convert px to REM, as described above

/* When the screen is larger than 1800px, the font size of the HTML is 200px */
@media screen and (min-width: 1800px) {
    html {
        font-size: 200px ! important;
        /*no*/}}Copy the code

/*no*/ do not transfer CSS property, it will not effect, packaging removed the comment, it will automatically transfer for you.

The first solution is to write styles in the style tag of the index.html file

This packing does not remove the CSS comments in index.html. If your Webpack also removes the comments in index.html, you can use webpack to remove the comments in index.html without removing them. The project does not remove comments in index.html

Solution 2: Configure the sass-Loader to ensure that all CSS comments are not deleted during packaging

Reference article: Comment failure in Webpack PostCSS-Px2REM production environment

Refer to the article

Amfe-flexible and PostCSS-PxtoREM are used in the front-end