CSS3's @media query is a powerful feature that allows us to apply different style rules based on different media types and device characteristics. This allows us to create responsive designs that ensure the website or app provides a great user experience across a variety of devices and screen sizes. This article will discuss the definition, syntax, usage scenarios and common problems of @media query in detail.
CSS3's @media rules allow you to apply different style rules based on media type and media properties. Media Type (Media Type) such as screen (screen), print (print), etc., while Media Features (Media Features) such as width , height , orientation etc., are used to describe the specific characteristics of the device.
The basic syntax of @media query is as follows:
@media mediatype and|not|only (media feature) {
/* CSS rules*/
}screen , print , etc. If omitted, defaults to all media types. media feature : Define conditions for media features and values, such as min-width , max-width , orientation , etc.In @media queries, you can use the following logical operators to combine media conditions:
and : Indicates that all conditions must be met. not : Indicates that the style is applied when the condition is not met. only : Used to prevent older browsers that do not support media queries from applying styles. Comma : Indicates that the style is applied when any of multiple conditions are met.1. Set styles according to screen size
@media screen and (min-width: 600px) {
body {
background-color: lightblue;
}
}When the screen width is at least 600 pixels, the page background color changes to light blue.
2. Responsive design
@media screen and (max-width: 800px) {
.container {
width: 100%;
}
}
@media screen and (min-width: 801px) {
.container {
width: 750px;
}
}Change container width based on screen width for responsive design.
3. Print style
@media print {
body {
font-size: 12pt;
color: black;
background: white;
}
}Set specific styles for printing, such as font size, color, and background.
4. Horizontal and vertical screens
@media screen and (orientation: landscape) {
#sidebar {
display: none;
}
}Hide the sidebar when the device is in landscape mode.
CSS3 provides a variety of media features. Here are some commonly used features:
width , min-width , max-width : Define the width of the visible area of the page in the output device. height , min-height , max-height : Define the height of the visible area of the page in the output device. orientation : Define the device orientation, such asportrait (vertical screen) and landscape (horizontal screen). resolution : Defines the resolution of the device. color , color-index : Define color capabilities and color index.min-width and max-width as judgment conditions, you should ensure that the condition range is sorted from small to large or from large to small to avoid style coverage problems. Style conflicts : Ensure that styles in @media queries are not overridden by subsequent CSS rules. It is recommended to write the @media query style at the end. Meta tag : Set <meta name="viewport" content="width=device-width, initial-scale=1.0"> to ensure that mobile devices can render the page correctly. Syntax error : Make sure the syntax of the @media query is correct, especially the space after the logical operator and do not write the terminator ";" inside the brackets.CSS3’s @media query is an important tool for creating responsive designs, allowing us to apply different style rules based on different media types and media properties. By leveraging @media queries, we can ensure that our website or app provides a great user experience across a variety of devices and screen sizes. I hope this article can help you better understand and use @media queries.
This concludes this article about @media query in CSS3. For more related CSS3 @media query content, please search previous articles on downcodes.com or continue to browse the relevant articles below. I hope you will support downcodes more in the future. com!