Mobile adaptation-Today, you have no knowledge

Mobile Adaptation is one of the oldest things I've ever thought about in my development, what kind of library do I find on the Internet? Ah, the framework , and the like to solve the adaptation problem.

But after a period of mobile development, finally no headache this problem, the following is my development used in the appropriate way, can be said to be very detailed, I hope to help the ape!!

The First way : ( Code + description )

var screenwidth = screen width ;
var designwidth = Design manuscript width ;
var fontSize = Font base value ;
var htmlpx;

Parameter description:

　　screen width refers to the width of the phone screen to be adapted.
　　Design width refers to the width of the UI draft
　　The font base value can be arbitrarily set, but this will affect your actual layout when the value of the calculation (math good when I did not say), I generally set to 100
　　htmlpx is the font font-size value of the root node

　The formula for htmlpx is:

Screenwidth/designwidth * fontSize = htmlpx;

And then the media query can be written like this.

@media only screen and (Max-width:screenwidth),
Only screen and (Max-device-width:screenwidth) {
Html,body {
FONT-SIZE:HTMLPX;
}

},

　　Note : The above variables are all replaced with specific values to put in the inside, if directly copied and pasted in the past, in addition to the problem do not find me.

Then, when writing CSS, there are PX units (regardless of the case of border) to be turned into REM units, and the value to be divided by fontsize (this is best set 100, easy to calculate; for example, my box width is set to 150px, and the REM layout that fits is 150/100= 1.5rem.)

Give me a chestnut:

If I want to fit, the design width is 750, the base font value is 100, there are some other CSS, I want to fit the 375,414,320 screen of the phone, then I wrote in the CSS file:

　　

 @media only Screens and (Max-width:414px), only screen and (Max -device-width:414px) {html,body {font -size:55.2PX;    }            };  @media only screens and (max -width:375px), only the screen and (Max -device-width:375px) {html,body {font -size:50px;    }            };  @media only screens and (max -width:320px), only the screen and (Max -device-width:320px) {html,body {font -size:42.66        666666666667px;    }            };        div {width:  1.5REM;    padding:  0.2REM; }

Generally speaking, the width is best used as a percentage so surely there will be no problem, if you want to use REM, then God be with you, Amen!!

Second way : ( code + Description )

1. First set the META tag inside the header:

　　　　

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, User-scalable=0 ">

What's the use of this setting I don't have to say, this is full of street, mobile must code!!!

2. Write the <script> label in the header

　　

<script type= "Text/javascript" >= document.documentelement.clientwidth/640*100 + ' px '</ Script>

When we write CSS, we can write REM directly, and then we'll write the value of the PX value from the design draft and divide it by 100 plus the REM unit.

The above code is the same as the first way of principle, but the first way on the computer to debug more convenient, not every time to change the screen size to be refreshed again, and the second way on the computer debugging when the trouble. (though it's just a F5.) ）

　personally , it's better to be the first, because cascading style sheets (CSS) are created to change styles, and scripts (JavaScript) are created to change the way they behave. So the adaptation or CSS to write more in line with the original intention of the workers.

The above is only a personal point of view, but the content of visual inspection and measurement can achieve specific functions.

Do not like to spray,, if there are errors, welcome to point out, must return!! If you like, please leave a praise.

Mobile adaptation-Today, you have no knowledge