Front-End Notes for adaptive mobile device pages

Nowadays, there are more and more mobile devices, and more people are using mobile phones to access the Internet. Mobile devices have become common terminal settings for accessing the Internet. In the past, when writing a management system, the client only needs to consider PC Desktop devices, but now it is necessary to consider mobile terminal devices.

The screen resolutions of mobile terminal devices are many different. Mobile phones are divided into many sizes, and some tablet computers, such as iPad and iPad mini-computers, are difficult to unify their sizes, there are also various browsers, which makes it difficult to create a client interface for mobile devices. It is not always possible to create a client interface for each size.

As a result, many e-commerce companies have made 3G, touch screen, basic, and computer editions. Each version is done according to the general rules.

The mobile phone screen is relatively small and the width is usually below 600 pixels. Old-fashioned mobile phones use the basic edition, with a screen width below PX and mostly text connections. For mobile phones with a touch screen, the screen is slightly larger, and the operation interface is dominated by image touch. There are also some iPad and other screens that will be larger and more content can be displayed.

E-commerce websites mainly rely on these terminal devices for sales. e-commerce companies do not hesitate to separate multiple versions to enable users to have a good experience with various settings and promote ordering.

When we use enterprise management software, the page displays a small amount of information. We can make the terminal pages of all mobile devices into a standard version, just a system, and then adapt to the screen size, this is also the case for future maintenance.

The Adaptive Page design has been worth attention since the beginning:

1. Do not set absolute width and height for layout elements on the page. They are set by percentage.

2. The font also uses a relatively large font.

For example:

 
Body {Font: normal 100% ;}
 

The default font size is 100%, that is, 16 pixels.

 
H2 {font-size: 1.5em}
 

The text in the H2 title is 1.1 times the font size by default.

3. Use Div + CSS + float to layout the positions of various boxes with floating, not fixed and unchanged.

For example:

. Content {float: Right; 75%;}. Sidebar {float: Left; width: 20% ;}
 

When the screen is too narrow and there are no more than two boxes, the following elements will automatically move to the bottom of the previous element, so that the page will not generate a horizontal scroll bar.

4. Try not to use absolute positioning, that is, position: absolute positioning.

5. Perform CSS Processing Based on the browser version.

6. Load the corresponding CSS file based on the screen width

For example:

 
<LINK rel = "stylesheet" type = "text/CSS" Media = "screen and (max-device-width: 400px)" href = "tinyscreen.css"/>
 

When the screen width is smaller than, the tinyscree.css file is added;

 
<LINK rel = "stylesheet" type = "text/CSS" Media = "screen and (min-width: 400px) and (max-device-width: 600px) "href =" smallscreen.css "/>
 

The screen width ranges from 400 pixels to pixels, And the smallscreen.css file is used.

 
@ Import URL ("tinyscreen.css") screen and (max-device-width: 400px );
 

Load in an existing CSS file.

7. set different CSS styles based on resolution in the CSS file

 
@ Media screen and (max-device-width: 400px) {. Column {float: none; width: auto;}. Sidebar {display: none ;}}
 

If the screen width is less than 400 pixels, the column blocks are not float (float: None), the width is automatically adjusted (width: auto), and the sidebar blocks are not displayed (display: none ).

 
@ Media screen and (min-width: 400px) {. Content {width: 65% ;}. sidebar {width: 30% ;}}
 

The screen is larger than 400 pixels, content accounts for 65%, and sidebar accounts for 30%.

8. Auto scaling and auto Scaling

For example:

 
IMG {max-width: 100% ;}
 

9. Set meta tags

For example:

 
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
 

The viewport meta tag tells the browser that the viewport width is equal to the screen width of the device without initial scaling.