Adaptive Mobile Device page front-end attention issues

With more mobile devices and more people using mobile phones to surf the web, mobile devices have become a common terminal setting for accessing the Internet. We used to write the management system, the client only need to consider the PC desktop device, now you have to consider the mobile terminal equipment.

Mobile Terminal device screen resolution A lot of different, mobile phone on a number of different sizes, and then there are some tablets, such as Ipad,ipad Mini, and so on, the size is difficult to unify, the browser is also various, which makes mobile device client interface has a certain difficulty, always do not have to do the size of each of the last.

So many e-commerce companies have done 3G version, touch screen version, ordinary version, computer version and so on. Each version is done in the same way as the general rules.

The phone's screen is small and the width is usually below 600 pixels. Some old-fashioned mobile phone with ordinary version, screen width of 300px below, mostly text connection. Mobile phone with touch screen, the screen should be a little larger, the operation of the interface is mostly image-based touch. There are also some ipads and other screens that are bigger and can be displayed with more content.

E-commerce website mainly rely on these terminal equipment to complete sales, in order to allow users to use a variety of settings have a good experience, promote ordering, e-commerce companies at any number of separate versions.

We do enterprise management software, page display information is not so long, can be all mobile device Terminal page into a standard version, on a system, and then according to the size of the screen adaptive, later maintenance also on this set.

The design of the adaptive page has a lot to note from the beginning:

1. The elements in the page that are related to the layout are not set to absolute width and height, and are set by percentage.

2. Fonts also use a relative size font

Such as:

Body{font:normal 100%;}  

Font Big Trivia page default size of 100%, that is, 16 pixels.

h2 {Font-size:1.5em}  

H2 the text of the title Big Trifle 1.1 times times the default font size.

3. Use div+css+ floating to layout the position of each box with floating, not fixed.

Such as:

     . content{float:right;75%;}        . sidebar{float:left;width:20%;}    

With a percent + float, when the screen is too narrow to fit two boxes, the elements behind it will automatically move below the front element, without causing the page to produce a horizontal scroll bar.

4. Try not to use absolute positioning, that is, the positioning of the Position:absolute.

5. Do some CSS processing according to the browser version

6. Load the corresponding CSS file according to the width of the screen

Such as:

<link rel= "stylesheet" type= "text/css" media= "screen and  (max-device-width:400px)" Href=  "tinyscreen.css "/>  

The screen width is less than 400 pixels, loading the tinyscree.css file;

<link rel= "stylesheet" type= "Text/css"  media= "screen and (min-width:400px) and (max-device-width:600px)"  href= "Smallscreen.css"/>     

The screen width is between 400 pixels to 600 pixels, loading the smallscreen.css file

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

Loaded in an existing CSS file.

7. css file, set different CSS style according to the resolution　

@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 block is de-floating (float:none), Width auto-adjusting (Width:auto), and the sidebar block is not displayed (Display:none).

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

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

8. Image Auto-scaling, adaptive size

Such as:

img{max-width:100%;}    

9. Set META tags

Such as:

<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 device screen width without initial scaling.

Adaptive Mobile Device page front-end attention issues