VUE.JS+KOA2 Mobile e-commerce combat 3

Mobile-screen adaptation Basics

A key issue when making WebApp is the size of different screens for each model, so that the layout on each model looks the same as possible, which makes many small partners very headache. Here I introduce my usual work in the adaptation scheme, of course, there are many kinds of adaptation options, so you have a better way, you can use or communicate with everyone.

Common mobile Web layout-appropriate recipe method

• Fixed height, percent width: This method is only suitable for webapp, which is not high enough for the requirements of large-scale projects, and is an obsolete method.
• Media query: Now more mainstream adaptation schemes, such as our usual style framework bootstrap, is the one that started this, which can do most of the project's needs, but it's too complex to write.
• Flex layout: The main layout, not only for the mobile web, the web also good performance, which is now the most used in the layout of work, our project as far as possible to use the Flex+rem way to layout and complete the mobile side of the adaptation.

REM Unit Introduction

　　rem(font size of the root element) is a unit of relative length. font-sizecalculates a multiple of a value relative to the root element (that is, the HTML element).

• Adaptation principle: Replace PX with REM, dynamically modify the font-size adaptation of HTML. It can be well based on the font size of the root element to change, so as to achieve a variety of screen basic effect experience.

Now let's do an experiment where you can create a new Web page and write the following code:

<div class= "Test" >    

Then give the HTML a basic style:

. test{    width:320px;    height:160px;    Background-color:bisque;    Text-align:text;}.hello{    color:red;}

We use the above or the traditional use of PX as a unit, we in the Mobile debugging mode iphone5 environment to look at. Will find div the width is just right, we look at the font, found that the size is 16px.

We can now change the PX units in CSS to REM units for testing. Because the font size of the HTML root element is 16px, then it is better to change to REM units and divide it directly by 16.

. test{    Width:20rem;    Height:10rem;    Background-color:bisque;    Text-align:text;}.hello{    color:red;    Font-

The page doesn't change, which means we have a conversion relationship. To better illustrate this, we can try to add a font size to the HTML root style, for example font-size:32px; . At this point the page and font are enlarged by one time. But we are still unable to adapt because the font of our root element is fixed.

JS Control Adaptation Screen

Understanding the principle of REM, we can use this feature to adapt to the layout, which is now more mainstream mobile web adaptation scheme. Of course you have a better plan, you can also leave a message under the article.
Three lines of JS code to complete the adaptation:

// get the width of the phone screen let htmlwidth = Document.documentElement.clientWidth | | Document.body.clientWidth; // get the DOM element of HTML Let Htmldom = document.getElementsByTagName (' html ') [0]; // set the root element font size

VUE.JS+KOA2 Mobile e-commerce combat 3