Initial knowledge of Web mobile development

First, set META tags

<Metaname= "Viewport"content= "width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, User-scalable=no; " />See the text to know the meaning<Metaname= "Apple-mobile-web-app-capable"content= "Yes"/>allow full-screen mode browsing<Metaname= "Apple-mobile-web-app-status-bar-style"content= "BLACK"/>status bar Style<Metaname= "Format-detection"content= "Telephone=no" />Ignore digital recognition as phone number<Metaname= "Format-detection"content= "Email=no" />Android is automatically disabled and iOS does not automatically recognize email addresses

<name= "Viewport"  content






target-densitydpi = [Dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi] "/>

Second, using the percent layout, using REM units and Mediaquery

HTML{font-size:62.5%;/*10÷16=62.5%*/}@media only screen and (min-width:481px){HTML {font-size:94%!important;/*15.04÷16=94%*/}} @media only screens and (min-width:561px){HTML {font-size:109%!important;/*17.44÷16=109%*/}} @media only screens and (min-width:641px){HTML {font-size:125%!important;/*20÷16=125%*/}}

Meidaquery can be used directly in the style table or in the link tag;

<Linkrel= "stylesheet"Media= "All and (orientation:portrait)"href= "Portrait.css">//portrait mode style<Linkrel= "stylesheet"Media= "All and (Orientation:landscape)"href= "Landscape.css"//Landscape mode style//vertical screen style used by <style media= "All and (orientation:portrait)"type= "Text/css">#landscape {display:none;}</style>//Style used for horizontal screen<styleMedia= "All and (Orientation:landscape)"type= "Text/css">#portrait{Display:None; }</style> 

To improve the adaptability of the page, you can use a percentage layout, set the Box-sizing property, use the Display:table-cell table layout, and so on; common layout methods: fluid layout, fixed layout, table layout, percent layout, mixed layout, flexible layout, etc. Third, how to calculate the screen dpi? DPI is also called PPI. Ppi:ppi is all called the pixel per inch, translates to the pixel value, the more accurate is the pixel density, that is, the measurement of the unit of the physical area of the pixel values in the case. Pixel:

• CSS Pixels: The abstract unit used by the browser, used primarily to draw content on a Web page.

• Device pixels: Displays the smallest physical unit of the screen, with each DP containing its own color and brightness.

120-160 belongs to the low split screen, 160-240 belongs to the sub-screen, 240-320 belongs to the high split screen, 320 above data ultra-high split screen, that is, the legendary Retina screen, the development process should be based on the DPI setting Mediaquery scale or picture, example:

{background:url (medium-density-image.png);}  {/**/#header {background:url (high-density-image.png);}  {/**/#header {background:URL (low-density-image.png) ;} }

Initial knowledge of Web mobile development