3 Ways to summarize mobile phone-side page layouts

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.