Vue REM Mobile-Adapter

Reference:https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

First of all, figure out a few basic fundamentals:

physical pixels : Also known as device pixels, is one of the smallest physical parts of a display device;

device-independent pixels : A point in a computer coordinate system that represents a virtual pixel (such as a CSS pixel) that can be used by a program and then converted from a related system to a physical pixel

device pixel ratio = physical pixel/device independent pixel, can be obtained by JS Window.devicepixelratio, or CSS-webkit-device-pixel-ratio

********ps: IPhone6, the device width is 375pt*667pt, the equivalent of the device independent pixels, dpr=2, then the physical pixels are 750pt*1334pt********

1, installation fleible

NPM Install Lib-flexible–save

2, introduced in Main.js

Import ' lib-flexible '

3, the installation of Px2rem, so that we do not need to manually calculate in development, as usual write px

NPM Install Px2rem-loader--save-dev

4, in the build directory Utils.js modify the configuration

re-Open the project, Design Draft, according to design draft to write px;

Note: 1, in the head of index.html, do not set meta name= ' viewport ';

2, take into account the font file comes with the lattice size, do not want to appear 15, 13px this odd number, the font size is still used px; for example: font-size:28px;/*px*/

3, for 1px pixel border, in order to avoid lost in some Android phone, add/*no*/after it, so that it does not convert to REM units, such as: border:1px solid #000;/*no*/

Personal views: For the flexible adaptation program, consult the source code, you can learn that it for the Android phone processing, is a unified DPR set as one processing, but in recent years, the number of domestic brands of Android mobile phone use of the proportion of people gradually increased, the unified treatment for 1, the experience of the big screen phone, there is biased.

If you have different opinions or mistakes, please point out that good people are safe all their lives.

Vue REM Mobile-Adapter