Before learning Media Queries module, the first example of a responsive layout to look simple layout and application response through the Media Queries module. In the present embodiment, a structural element defines HTML5 five boxes. When the browser window size is not the same, the page will choose to use different styles depending on the size of the current window. When the window width 1000px above, header and footer, respectively at the top and bottom line of the entire page is displayed, the central body is divided into three display; 640px when the window width above, 1000px or less, the third column of the intermediate Hide; when the window width 640px or less, five blocks arranged and displayed from top to bottom. Code as follows:
In this case, you can get access to different screen resolutions through different styles in their respective styles to re-set the layout of each block, not only need to change the layout style, at different screen resolutions, fonts, pictures and also you need to re-set the background image style to fit the content to show in the current screen. As for the resolution to determine how many, depends entirely on the demand for the product. Common types of resolution of mobile phones, tablet PCs (Note that these terminals are present horizontal screen, vertical screen difference), desktop monitors, typically greater than 960px display are the default style without judgment in the use of media queries. Effects of the present embodiment shown in FIG different screen resolutions of 1 to 3.
In FIG. 1 the window width 1000px
In Figure 2 the window width 640px above, the following page is displayed when 1000px
FIG 3 at the time of the window width below the page display 640px
In the sub-regions of different styles of window size, you can inherit global style, as long as the re-set needs to change the style can be. In addition, there are some minor blocks of content to put the right page, you can hide it. As in Figure 2, the window width is 640 ~ 1000px, the right portion of tile hidden.