Mobile-side web development

A bit of a mention here is that we routinely design the pages of the PC and the mobile devices independently, which makes the layout of the PC-side page more flexible and maintenance-friendly. If you want your page to fit on any device, including the PC end, here are a few gadgets to take care of the old version of IE's problems:

⑴ie8-does not recognize HTML5

Then write the following code into your BASE.CSS to format the HTML5 tag:

Article, aside, details, figcaption, figure, Footer, Header, Hgroup, menu, nav, section {display:block;}

⑵ie8-does not support CSS3 media queries, that is, "@media only" syntax, which can be resolved by css3-mediaqueries.js:

<!--[if Lt IE 9]> <script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script> <! [endif]-->

This article only discusses the mobile page adaptation method, regardless of the PC screen environment, but the principle is interlinked. This article also does not discuss the implementation of Spa/opa.

(i) Percent assignment

Believe that many new contact-responsive page Design friends, the first consideration is to set the layout value as a percentage of the form, including width, height, padding, margin, such as size, offset, azimuth assignment. For example:

View Code

Normally we set the container's height with a fixed value or an automatic value, and once we want to set the height of the element using a percentage, we might write:

View Code

But after running the code, you will find that the height style does not take effect. The solution to this problem is very simple, add a height:100% style to the outer element "bady,html", the specific principle can check my old article CSS percentage definition of the high level of cold knowledge.

Viewport Introduction

Here first interrupt the article, briefly introduce the next "viewport", do mobile page development friends must understand viewport.
When we use the mobile device to browse the Web, the mobile browser will directly put the entire page into a virtual view to display, usually this virtual view size than the phone screen, the user can use gesture operation to pan, zoom this view.

To facilitate understanding, we assume that there is a page:

① If there is no such thing as viewport, accessing the page on a mobile browser may be like this:

② after the viewport is like this:

Viewport was born to allow the mobile to browse the PC-side page more humanized, but it also brought some problems, which spawned a tool like Iscroll.js.

For more information about viewport, please click here.

(ii) disabling some features of mobile devices (non-essential, on-demand)

⑴ Disabling the viewport zoom feature

Add the following statement to the head of the page to disable the zoom feature of the viewport (the responsive page is basically laid out and adapted by percentage, and the user-scaled page affects the reading effect):

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

As we set the viewport initialization to match the width of the device browser, and cannot be scaled, the META tag specific parameters are as follows:
The width of the width:viewport, you can specify a fixed value, such as 650, or it can be device-width, which indicates the width of the device.
Height: corresponds to width, which specifies the height.
Initial-scale: Page Initial zoom (0-1)
Maximum-scale: Maximum scale allowed to be scaled by the user (0-1)
Minimum-scale: The minimum scale allowed to be scaled by the user (0-1)
User-scalable: Whether the user can scale manually (yes/no)

The meta tag above may cause layout errors in the older iphone, because the older iphone will default to 980-width rendering, but it is eventually displayed in 320-width format. We can then add a meta tag for compatibility (Let the iphone render the page at 320 width):

<meta name= "mobileoptimized" content= ">"

⑵ Disabling the WebKit text adjustment function
The browser of the WebKit kernel automatically adjusts the text size, whether it is mobile or PC-side. For example, Chrome doesn't show a font size effect less than 12px, and even if you set font-size:10px, the page will render to 12px.
In addition, the size of the text is also adjusted by the browser when the mobile device is viewing the page in portrait mode and Landscape mode:

The way to disable this feature is to use-webkit-text-size-adjust to set it (chrome28+ is invalidated):

body {    -webkit-text-size-adjust:100%;}

(iii) CSS3 media queries

CSS3 Media Queries (hereafter referred to as CMQ) is a responsive page design of a Swiss Army knife, you can put your page in different resolutions of the environment to carve the corresponding, the most beautiful outline, master the CMQ is also mastered the basis of responsive page design.
The use of CMQ in style files is simple and its syntax is

@media only screen and (max/min-width/height:960px) {
/* Style definition */
}

The orange-highlighted "only screen" parameter indicates that the access environment (media type) is a color-screen device.

The optional value for this parameter is all |  aural |  braille |  handheld |  print |  projection |  screen |  tty |  tv | c19/>

Unless the value of this parameter is all, you can precede it with a only qualified type. For mobile and PC-side, we only need to set as "screen" or "just screen", the latter is recommended, its semantics more rigorous.

Another highlighted parameter, "max/min-width/height," means that when the width/height of the screen is greater than or less than a certain value, the following example can be seen:

⑴max Width

@media only screen and (max-width:500px) {  . outdiv {      margin:0 auto;      width:85%;      height:50%;      background:red;}  }

This snippet indicates that the screen width is less than 500px.

⑵min Width

@media only screen and (min-width:500px) {  . outdiv {      margin:0 auto;      width:85%;      height:50%;      background:red;}  }

This snippet indicates that the screen width is greater than 500px.

⑶max/min Height

Same as Max/min-width, indicating that the style takes effect when the screen height is less than/greater than the set value. As a rule, we use max/min-width more, and seldom use max/min-height.

⑷multiple Media Queries

Sometimes we need to define the style to take effect at a certain resolution interval (such as 500px-900px), when we can overlay using Max/min-width/height.
The method is simple, add one more "and" to:

@media only screen and  (mix-width:500px) and (max-width:900px) {  . outdiv {      margin:0 auto;      width:85%;      height:50%;      background:red;}  }

⑸device Width

All of our max/min-width/height are for visual area resolution, and if you want to adapt to the actual width of the device, we can use Max-device-width to achieve:

@media only screen and (max-device-width:900px) {  . outdiv {      margin:0 auto;      width:85%;      height:50%;      background:red;}  }

This snippet indicates that the style that is defined internally is in effect when the device's screen width is less than 900px. For example, if the browser opens a small window (not a full-screen display), the width of the window has no effect on that piece of code.
As long as your PC screen width is greater than 900px (you should not use a PC screen with too low resolution?). ), the above code will not take effect.

⑹ tagged CMQ

CMQ not only can be written in the style file, but also can be labeled, directly written in the page

<link rel= "stylesheet" media= "only screens and (max-width:800px)" href= "Small_screen.css"/>

This code means that the external style file Small_screen.css is introduced when the view width is less than 800px.

You can also use orientation to determine the direction of the device (vertical mode portrait/landscape mode landscape):

<link rel= "stylesheet" media= "All and (orientation:portrait)" href= "Portrait.css" > <link rel= "stylesheet" Media= "All and (Orientation:landscape)" href= "Landscape.css" >

However, we do not recommend the use of orientation because it cannot tell you any information about the resolution of the device, so as a general rule, it should be avoided orientation instead device-width .

(iv) examples

Let's make a small example, so that it can do different adaptation layouts at three resolution intervals as required:

First write the prototype framework:

View Code

The CMQ is then used to define the style according to three different rate bands:

View Code

The point to be reminded here is that our definition of text font size is recommended to use EM to assign values, after all, different terminals different browsers will be based on the resolution size to set the default size of text, so as to facilitate the user to read, the use of EM to proportionally adjust the font size can cater to the human nature of the terminal browser.

Mutual Encouragement ~

Mobile-side web development