css determines different resolutions and displays different width layouts to achieve adaptive width

1. In CSS DIV web page layout, when the resolution is less than or equal to 1024px (pixels), the DIV layout object displays a width of 1000px, and when the resolution is greater than 1024px, it displays a width of 1200px and other requirements. Use CSS to change the browser display width to dynamically change the layout of the web page width (the web page width automatically becomes wider and narrower with the browser display width).
With development, more and more computer users have display screens with higher and higher resolutions, but some users still use 1024px resolution displays (according to data obtained from several browser resolution statistical platforms, 1200 resolution is now used There are very few users below the rate, but we still need to consider at least 1024px resolution users when designing CSS layout). If the web page layout width is fixed to 1200px, a scroll bar will appear below the browser when 1024 resolution users browse the web. In order to solve this problem, everyone You can use CSS3 styles to determine the user's browser width and call different layout widths.

Use CSS words and syntax

The code is as follows:

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

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

2. Examples of displaying different width styles at different resolutions

1. DIVCSS small case description
We first set a DIV box CSS named ".abc", set its height to 300px, css border to black; and set margin:0 auto layout to be centered. These two styles are preset for ease of viewing.
We manually drag the browser to display the width, and then observe the change in the width of the box. When the browser width is adjusted to a width of no more than 500px, the corresponding box width displays 100px; when the browser width is adjusted to no more than 901px, ". "abc" corresponds to the box width displaying 200px; when the browser width is adjusted to be greater than 1201px, the box object width displays 1200px; when it is less than 1200px, the display width is 900px.

2. CSS code

The code is as follows:

.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) { width: 1200px}
}
/* css note: When the browser width is set to not less than 1201px, abc displays 1200px width*/
@media screen and (max -width: 1200px) {

.abc {width: 900px}
}
/* When the browser width is set to not exceed 1200px c Display 900px width*/
@media screen and (max-width: 901px) {

.abc {width: 200px;}
}
/* Browsing set up When the width of the device is not greater than 901px, abc displays 200px width*/
@media screen and (max-width: 500px) {

.abc {width: 100px;}
}
/* When the browser width is set to not exceed 500px, abc displays 100px width*/

It should be noted that the CSS code is in order, and the CSS is typed from large to small (the larger the width of the browser, the higher it is). This is because of the logical relationship, and @media's judgment of CSS debugging will cause the judgment to be invalid.

3. HTML code

The code is as follows:

< ;body>

DIVCSS5 example: The width of my DIV will change with the browser width. Try changing the browser width