3 Ways to summarize mobile phone-side page layouts

Mobile Web page is now very rapid development, many companies need to Web pages compatible with a variety of screen sizes of mobile phones.

Let me tell you about my usual 3-way layout:

1: Responsive layout.

You can use PX as a pixel to tile the Web page. Full-screen with 100%. Height can be written to die with px, width can be used as a percentage. No matter how the page stretches, the height is constant and the width expands accordingly.

2:em/rem mode layout.

can set a good html,body font size, and then use different sizes of mobile phone access, we can go to modify the body font size, the Web page (the content of the page with REM setting width, height) of the content will automatically zoom.

Code such as:

body{background: #f6f6f6;}
. header{padding:0px 0.2rem; position:relative; text-align:center; font-size:0.3rem; height:0.7rem; line-height:0. 7rem; Background: #f6f6f6; border-bottom:1px solid #d8d4d4;}
. header. menusite{position:absolute; width:0.36rem; height:0.27rem; Background:url (.. /images/index_05.png) No-repeat; Background-size:contain; Top:.21rem; Right:.2rem;}
. blank20 {
Display:block;
Height:. 2rem;
Background:none;
}
. sg_case,.wx_baodian{padding-bottom:0.2rem; background: #fff;}
h2.basetitle{
padding:. 26rem. 2rem;
Height:. 37rem;
Line-height:. 37rem;
Color: #222222;
Text-align:center;
position:relative;
}

Question: What if I change the size of the body font according to the different sizes of the screen?

There are generally two ways:

1: With JS control:

function A () {

Document.documentElement.style.fontSize = document.documentelement.clientwidth/6.4 + "px";

}

Window.addeventlistener ("Resize", A,! 1);

A ();

2: Control the font size with media query mode:

@media only screen and (MAX-WIDTH:359PX) {
HTML {
font-size:12px
}
}

@media only screen and (min-width:360px) and (max-width:374px) {
HTML {
font-size:13.5px
}
}

@media only screen and (min-width:375px) and (max-width:399px) {
HTML {
font-size:14.0625px
}
}

@media only screen and (min-width:400px) and (max-width:413px) {
HTML {
font-size:15px
}
}

@media only screen and (min-width:414px) and (max-width:479px) {
HTML {
font-size:15.525px
}
}

@media only screen and (min-width:480px) and (max-width:539px) {
HTML {
font-size:18px
}
}

@media only screen and (min-width:540px) and (max-width:639px) {
HTML {
font-size:20.25px
}
}

@media only screen and (min-width:640px) and (max-width:719px) {
HTML {
Font-size:24px
}
}

@media only screen and (min-width:720px) {
HTML {
Font-size:27px
}
}

3. You can write CSS according to the width and height of the design manuscript, then judge different size screen by JS, modify <meta name= "viewport" content= "width=device-width,initial-scale=1, User-scalable=no "> Size of scale inside.

Like the design draft is 640 * 1136

We can write pages at 640 width or 320 width.

Then <meta name= "viewport" content= "Width=320,initial-scale=1,user-scalable=no" >

The default width can be set to the width of the page you are writing.

Then by JS to control scale scaling can also control the minimum width and maximum width.

3 Ways to summarize mobile phone-side page layouts