How to use media Media Querier in css3
Today, the editor will share with you the relevant knowledge about how to use the media media querier in css3. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.
In css3, media media query is used to define different styles for different media types or devices. You can set different styles for different screen sizes or resolutions. The syntax is "@ media not | only media type and (...) {CSS style code}".
The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.
What is the use of media media querier in css3
Using the @ media query, you can define different styles for different media types.
@ 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.
Media queries can be used to check many things, such as:
Width and height of the viewport
Width and height of the equipment
Direction (is the phone or tablet in landscape or vertical mode? )
Resolution
The syntax is
@ media not | only mediatype and (mediafeature and | or | not mediafeature) {CSS-Code;}
The meaning of the not, only, and and keywords:
Not:not keyword anyway, the meaning of the entire media query.
The only:only keyword prevents older browsers from applying the specified style, which do not support media queries with media features. It has no effect on modern browsers.
The and:and keyword combines media features with media types or other media features.
They are all optional. However, if you use not or only, you must also specify the media type.
You can also use different stylesheets for different media, like this:
Examples are as follows:
Body {background-color:lightgreen;} @ media screen and (max-width: 300px) {body {background-color:lightblue;}}
Reset the browser view size. When the width of the browser window is less than 300 pixels, the background color becomes light blue, otherwise it is light green.
