Records required for mobile platform development (continued)_html/css_WEB-ITnose

This week, the instructor continued to familiarize me with the development of mobile platforms. The homework required adaptation to all Android phones and iPhone 4, 4s, and 5. I don’t know much about the front-end of the mobile terminal, so my first step is to look for information.

1. Mobile terminal information

Sharing some miscellaneous experiences of recent mobile webpage projects (here I have a deeper understanding of the display of pictures).

A brief introduction to device pixel ratio devicePixelRatio (here gives me a preliminary understanding of device pixel ratio).

Hodgepodge http://mobile.smashingmagazine.com/tag/css/ (even smashing magazine knows it).

2. Start construction

Use 480 as the benchmark to write HTML and CSS, and the font benchmark size is 20px. Except for border, all numerical units use em. The numerical value is divided by the base font based on the design draft. Prepare a background image that is twice as large for devices with dips greater than 1.5.

When processing device images 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 devices with actual device resolutions between 541px and 800px or devices with dips greater than 1.5

}

Set corresponding fonts for other screen sizes Size:

/* 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 any test website is inferior to trying it on a real machine, just take a look).

http://mattkersley.com/responsive/

　http://www.responsinator.com/?url=http://127.0.0.1/index.html

　Pay attention to some CSS properties that may not be supported by mobile browsers. Sometimes you need to use them The iscroll.js mentioned last time is used to simulate it.