Shulou(Shulou.com)06/01 Report--

This article mainly explains the "CSS judgment of different resolutions to display different width layout method", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "CSS to judge different resolutions to display different width layout method"!

I. description of practical scope

In CSS DIV page layout, when the resolution is less than or equal to 1024px (pixels), the DIV layout object displays the width of 1000px, and when the resolution is greater than 1024px, the width of 1200px is displayed. Use CSS to change the browser display width to realize the dynamic change of the web page width of the layout (the web page width automatically widens and narrows with the browser display width).

With the development, more and more computer users' display screen resolution is getting higher and higher, but some users still use 1024px resolution display screen (according to several browser resolution statistics platforms, there are very few users using less than 1200 resolution, but we still need to consider at least 1024px resolution users when we CSS layout), if the width of the page layout is fixed to 1200px. When users browse the web with 1024 resolution, a scroll bar appears under the browser. In order to solve this problem, you can use the CSS3 style to determine the width of the user's browser and call different layout widths.

Second, use CSS words and grammar

@ media screen and (judging attribute) {CSS style selector}

Note here that the CSS style selector is to be changed in the curly braces.

Third, the case of different resolution displaying different width style

1. DIVCSS small case description

We first set a DIV box CSS named ".abc", set its height to 300pxMagneCss border to black, and set the margin:0 auto layout to center. These two styles are set in advance for easy observation.

We manually drag the browser to display the width, and then observe the change of the box width. When the browser width is adjusted to no more than 500px, the corresponding box width displays 100px; when the browser width is not greater than 901px, the display ".abc" corresponding to the box width displays 200px; when the browser width is greater than 1201px, the box object width displays 1200px; when it is less than 1200px, the width is displayed as 900px.

2. CSS code

.abc {height:300px; border:1px solid # 000 Margin:0 auto} @ media screen and (min-width: 1201px) {.abc {width: 1200px}} / * css Note: abc displays 1200px width when browser width is not less than 1201px * / @ media screen and (max-width: 1200px) {.abc {width: 900px}} / * abc display 900px width when browser width is not greater than 1200px * / @ media screen and (max-width: 901px) {.abc {width: 200px }} / * set abc display 200px width when browser width is not greater than 901px * / @ media screen and (max-width: 500px) {.abc {width: 100px;}} / * set abc display 100px width when browser width is not greater than 500px * /

It should be noted that the CSS code order, from large to small typesetting CSS (judging that the larger the browser width, the higher the release). This is because of logic, @ media determines that CSS troubleshooting will lead to invalidation.

3. HTML code

Untitled document .abc{ height:300px; border:1px solid # 000000 Margin:0 auto} @ media screen and (min-width: 1201px) {.abc {width: 1200px}} / * abc display 1200px width when browser width is not less than 1201px * / @ media screen and (max-width: 1200px) {.abc {width: 900px}} / * abc display 900px width when browser width is not greater than 1200px * / @ media screen and (max-width: 900px) {.abc {width: 200px }} / * set abc display 200px width when browser width is not greater than 900px * / @ media screen and (max-width: 500px) {.abc {width: 100px;}} / * set abc display 100px width when browser width is not greater than 500px * / DIVCSS5 instance: my DIV width will change with browser width, try to change browser width

4. In order to be compatible with the following versions of IE9, browsers need to add a JS of google. Of course, you can download html.

Just put the JS code into the tag. Here you can directly introduce google online JS. You can download this JS file and HTML it again.

5. Perfectly compatible with HTML+CSS+JS source code of all major browsers

Untitled document .abc{ height:300px; border:1px solid # 000000 Margin:0 auto} @ media screen and (min-width: 1201px) {.abc {width: 1200px}} / * css Note: abc displays 1200px width when browser width is not less than 1201px * / @ media screen and (max-width: 1200px) {.abc {width: 900px}} / * abc shows 900px width when browser width is not greater than 1200px * / @ media screen and (max-width: 900px) {.abc {width: 200px }} / * set abc to display 200px width when browser width is not greater than 900px * / @ media screen and (max-width: 500px) {.abc {width: 100px }} / * set the abc display 100px width when the browser width is not greater than 500px * / DIVCSS5 instance: my DIV width will change with the browser width, try to change the browser width thank you for reading, the above is the content of "CSS method for judging different resolutions to display different width layouts", after the study of this article I believe that you have a deeper understanding of the method of CSS to judge the layout of different resolutions and display different widths, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.