HTML5 Mobile Web Development

1. Responsive Web Design

(1). Discussion on media query specifies the device type for the style sheet through the media property

<link rel= "stylesheet" media= "screen" href= "Style.css"/>

CSS3 increases the condition when the device is placed vertically

<link rel= "stylesheet" media= "screen and (orientation:portrait)" href= "Style.css"/>

CSS3 Add the condition that the Style.css style file will be loaded when the device screen is heavy 960px

<link rel= "stylesheet" media= "screen and (orientation:portrait)" href= "Style.css"/>

Reference CSS3 Media query: http://www.w3.org/html/ig/zh/wiki/CSS3 media Query

-Width viewport widths
-Height Viewport Heights
-width of the device-width device screen
-Device-height The height of the device screen
-orientation detection screen in horizontal or vertical screen
-Aspect-ratio width-to-height ratio based on viewport
-Device-aspect-ratio based on the aspect ratio of the device screen
-Number of bits of color, such as whether the min-color:32 match device has 32-bit or more colors
-Number of colors in the Color Index table of the COLOR-INDEX device
-Monochrome detects the number of bits per pixel used in a monochrome oscillator buffer. is non-negative, such as Monochrome:3
-resolution detects the resolution of the screen or printer, such as MIN-RESOLUTION:300DPI (described later in DPI) or a measure of pixels per centimeter, such as MIN-RESOLUTION:120DPCM
-Scan scanning mode with a value of progressive (progressive scan), interlace (interlaced scanning)
-Grid detects whether the output device is a grid device or a bitmap device

When you create a media query, the above features (scan and grid not) can be combined with the Min and Max prefixes to create a range of media queries. Apart from

Data Source:

Http://sc.chinaz.com/info/130410113358.htm

HTML5 Mobile Web Development