How to make a phone-side HTML Template (rem practical application)

Before the production of mobile phone pages, always very confused, do not know where to start, the page does not know how to deal with. Will use some percentage ah, media query Ah, there is a visual, but a variety of mobile phone-side screen adaptation is a difficult problem, not to achieve hundred compatibility. Since the discovery of REM This good thing, and listen to an experienced colleague's explanation, suddenly enlightened, now for the mobile phone side of the page development, can say a little qiuhe in the chest. REM Most impress me is that he will not change the original PC-side code writing habits, just to change the unit of measurement, so can't wait to hug him!

The specific usage is posted as follows:

1. Add a meta tag declaration to the head of the HTML document (HTML5, of course):

<meta name= "viewport" content= "Width=device-width, Initial-scale=1.0,user-scalable=no" >

The effect is to make the current viewport width equal to the width of the device, while not allowing the user to scale manually.

2. Introduction of the latest version of the jquery library file

3. Add the following jquery code:

var devicewidth=$ (window). Outerwidth ();

if (devicewidth>640) {

$ ("HTML"). CSS ("Font-size", "100px");

}else{

$ ("HTML"). CSS ("font-size", devicewidth/640*100+ ' px ');

}

The code is understood at a glance, meaning that when the screen width is greater than 640, the baseline for REM is set to 100px, whereas the screen width is divided by 640 and then 100. This enables responsive effects, without the hassle of writing media queries.

4, get the design to cut the desired picture

5, according to the production of PC-side page Writing page, the PX into REM, because the previous fixed 1rem=100px, so the original PX units of data All forward two decimal places.

6, background map settings: After the introduction of the background, must add Background-size: Transverse rem, longitudinal rem, wherein the number is the size of transduction, converted to REM, this is particularly important, as long as there is a background map must be added, tiled background (repeat), It is also the same as writing down that part of the value.

7, Special note: Font size font-size, border size, rounded border size, these are best to use PX to write.

Here I pass the actual test, in fact, the font size with PX and REM can, but 1px of the border should not be written 0.01rem, in the mobile phone is not seen, so still write border:1px solid #颜色.

is not less than the number of 0.1 rem do not use, back to PX, because it is too small, this also has to be actually tested.

The above is the basic usage, of course, the development of mobile phone, according to the actual page complexity, there will be a variety of unexpected problems, will not be as simple as the above written, so, or more practice, accumulate actual combat experience.

How to make a phone-side HTML Template (rem practical application)