Records required for mobile platform development (continued)

This week, my mentor continued to familiarize me with the development of mobile platforms, job requirements for android so the machine as well as iphone4, 4S, 5. I don't know much about the front-end of mobile terminals, so I will look for the materials in the first step.

1. Mobile Materials

I recently shared some of my experiences on the mobile Web page project (here I have a deeper understanding of the Image Display ).

Device pixel ratio: A Brief Introduction to devicePixelRatio (here let me have a preliminary understanding of the device pixel ratio ).

Http://mobile.smashingmagazine.com/tag/css/ (smashing magazine understand ).

 

2. Start construction

Use 480 as the benchmark to write HTML and CSS. The font benchmark size is 20px. In addition to border, All numeric units use em. The numeric value is divided by the base font based on the design draft volume. Prepare a background image for devices with dips greater than 1.5.

When processing a device image with dips greater than 1.5, the Code is as follows:

@ Media only screen and (min-device-width: 541px) and (max-device-width: 800px), only screen and (min-width: 541px) and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: (1.5 ){

// CSS written for a device whose actual resolution ranges from 541px to 800px or a device whose dips are greater than 1.5

}

The font size of Screen Settings of other sizes:

/* For 1080 px width screen */
@ Media only screen and (min-width: 801px) and (max-width: 1080px ){
Body {font-size: 45px}
}
/* For 800 px width screen */
@ Media only screen and (min-width: 720px) and (max-width: 800px ){
Body {font-size: 33px}
}
/* For 720 px width screen */
@ Media only screen and (min-width: 641px) and (max-width: 720px ){
Body {font-size: 30px}
}
/* For 640 px width screen */
@ Media only screen and (max-device-width: 640px), only screen and (max-width: 640px ){
Body {font-size: 27px}
}
/* For 540 px width screen */
@ Media only screen and (max-device-width: 540px), only screen and (max-width: 540px ){
Body {font-size: 22.5px}
}
/* For 480 px width screen */
@ Media only screen and (max-device-width: 480px), only screen and (max-width: 480px ){
Body {font-size: 20px}
}
/* For 320 px width screen */
@ Media only screen and (max-device-width: 320px), only screen and (max-width: 320px ){
Body {font-size: 13.5px}
}

 

3. Test

Share some websites that can be tested (but none of the websites can be tested as a real machine ).

Http://mattkersley.com/responsive/

Http://www.responsinator.com /? Url1_http%3a%2f%2f127.0.0.1%2findex.html

Note some CSS attributes that may not be supported by mobile browsers. Sometimes we need to simulate them using iscroll. js mentioned in the previous record.