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

This article shows you how to use @ media to set css styles with different resolutions. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

In css, you can use the "@ media" rule to style different resolutions.

Using the @ media query, you can define different styles for different media types. Syntax for @ media query:

@ media mediatype and | not | only (media feature) {CSS-Code;}

Example:

/ * set the style when the browser width is less than 1600px * / @ media screen and (max-width: 1600px) {. Select2-container {width:328px! important;} # address {width:calc (37%-3px)! important }} / * set the style when the browser width is less than 1367px * / @ media screen and (max-width: 1367px) {.select2-container {width:275px! important;} # address {width:calc (36% + 3px)! important;}

As you can see: @ media can set different styles for different screen sizes, especially if you need to set up a responsive page, @ media is very useful. When you resize the browser, the page will also re-render the page according to the width and height of the browser.

Example:

DOCTYPE html > untitled document. ABC {height: 300px; border: 1px solid # 000 Margin: 0 auto} / / you can remove the border @ 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}} / * sets the width of abc to display 900px when the 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 abc to display 100px width when browser width is not greater than 500px * / DIVCSS5 instance: my DIV width will change with browser width. Try changing the width of the browser. The above content is how to use @ media to set css styles with different resolutions. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.