Mobile end adaptation – REM: before understanding the mobile end adaptation scheme, we should first understand the mobile end and be familiar with the differences and characteristics between mobile end and PC end, so as to truly understand the essence of adaptation. Here is a brief introduction.

There are no data sheets for the major Android devices on the web, so let’s take the iPhone as an example: picture descriptions

The iphone6, for example, has a 375-wide portrait screen called a logical pixel (in some places, a single pixel). The vertical width of 750 pixels, called the physical pixels, is the actual number of points of light on the device, because the screen is made up of points of light. The Asset ratio is 2x, which is 2 physical pixels per logical pixel; Ppi: pixel density 326, the actual number of points of light in square inches; The higher the value is, the more delicate the picture is, but the higher the hardware requirements such as CPU and battery are; A screen with a PPI of more than 163 was called the Retina screen by Apple.

The concept of logical pixels and physical pixels needs to be understood, CSS px corresponds to the actual logical pixels, for example, here write “width:375px”, which can be covered with horizontal iphone6;

Note that all of the pixel concepts here have very little to do with actual dimensions (in inches). (the 375 on the iphone6, for example, looks narrower than some android 360s.)

The PC side does not have such a complex pixel ratio relationship, everything is 1:1:1;

Figure out the relationship between these pixels, the problem comes, how to write a size in THE CSS, so that all the size and pixel ratio of the device can be saturated display, for example, 375px, horizontal screen is only half of the position of the phone, change 320 wide phone is not overflow, there is a scroll bar;

Rem = 1rem= HTML font size; For example: HTML {font-size:100px}, 1rem equals 100px;

So here’s the solution: all units use REM, and we dynamically change the font size of the HTML;

The idea for implementing rem is to start with a baseline, such as the iphone6 with 375. (as mentioned above, the CSS style we wrote for 375 is really only about logical pixels, and it’s up to the phone to render with a few points of light.) HTML of the font – size into easy to calculate the value of 100 px, for example, initialization and page size for the width of the screen when there is a change (document. Body. ClientWidth), and then use this value divided by 375, to obtain a ratio, Multiply by 100px to replace the HTML font size.

Font-size =(screen width /375)*100+’px’;

Iphone6, for example, the body: {width: 3.75 rem}; Font-size :375/375}100+’px’ HTML {font-size:375/375}100+’px’; HTML {font-size:667/375}100+’px’,body width 3.75(667/375)*100=667px;

At present, the design draft of mobile terminal UI is designed according to the iphone6 of 375, most of which are 2 times the figure, in order to show more details, that is, the PSD figure of 750px width. When the front end design is adapted, it can be done in the way of 375 corresponding to 100px, and it is good to write half of all sizes of CSS on the PSD.

The rem adaptation scheme is determined according to the following steps: 1. Determine the size of the design draft, 375 times or 320 times; 2. 2. Add methods to public js:

var doc=document.docementElement;// Reduce dom manipulation
resize(){
    // Get the DOM document width
    var clientWidth=doc.clientWidth,
        htmlFontSize=doc.style.fontSize;
        // Dynamically change the font size of HTML, for example, 320
        if(clientWidth<320) {// Set the boundary value just in caseHtmlFontSize = "100 px"; }else(){
            htmlFontSize=clientWidth/320*100+'px'; }}// Synchronize font size to detect screen size changes, such as vertical and horizontal switching trigger
window.onresize=function(){the resize ()};// Triggered when the page is initialized
resize()
Copy the code

For example, if the size of the design is 640 and font size is 20px, divide all the dimensions by 2.

{width:3.2rem; font-size:0.1rem; }Copy the code

Font-size: 20px; body{width:3.2rem; The font – size: 0.2 rem; } body{width:3.75rem;} body{width:3.75rem; The font – size: 0.2 rem}

Special note: this adaptation is too large for pad landscape display, so the critical value should be set according to business requirements; In addition to the size of REM, mobile image adaptation should replace the 2x image and 3x image according to different sizes of devices. For example, the 3x image displayed on pad will be clearer. The general scheme is to use media media to query and replace the background image.

{width:1rem}} {width:1rem}} {width:1rem}} {width:1rem}} {width:1rem}} Haven’t found a solution yet, width is better to avoid rem for now.

Webpack automation code or written PX, packaged output REM, there are advantages, there are disadvantages, their own thinking;

NPM install postcss-px2rem postcss –save The second step is introduced in webpack.base.conf.js

const webpack = require('webpack') 
const px2rem = require('postcss-px2rem') 
const postcss = require('postcss') 
Copy the code

Step 3 Add the following code to the Module

plugins: \[ new webpack.LoaderOptionsPlugin({ 
vue: { 
      postcss: \ [require('postcss-px2rem') ({remUnit: 75.propWhiteList: \[\]})\]},})\],Copy the code

The fourth step is to add the following code to rules: CSS uses SASS, so I need to introduce the corresponding Loader, and do not write the ones that are not needed.

{ test: /\\.(css|less|scss)(\\? . \ *)? $/, 
  loader: 'style-loader! css-loader! sass-loader! less-loader! postcss-loader' }`
Copy the code