CSS media queries: apply different styles for different devices and screen sizes

CSS media queries are a very useful technique in web design that allow us to apply different styles according to different devices and screen sizes. Through media queries, we can adjust the layout and appearance of the web page based on the type of device used by the user, such as computer, tablet or mobile phone, as well as factors such as screen width and height, to provide a better user experience.

Before using CSS media queries, we need to understand some basic concepts and usage. First of all, we need to make it clear that media queries are a CSS3 function, so the browser is required to support CSS3 to work properly.

Media queries are defined using the @media rule and are usually written at the top of the CSS file so that they are loaded first. The syntax of media query is as follows:

@media mediatype and (condition) {
CSS style
}

Among them, mediatype represents the media type. Common media types are as follows Several types:

• all: suitable for all media devices;
• screen: suitable for computer screens;
• print: suitable for printers and print previews;
• handheld: Suitable for handheld devices such as mobile phones and tablets.

The condition part is the core of the media query, and the conditions are used to filter out the devices or screen sizes that meet the conditions. Conditions can include the following commonly used attributes:

• width: screen width;
• height: screen height;
• device-width: device width;
• device-height: device height;
• orientation: screen orientation;
• aspect-ratio: screen aspect ratio;
• resolution: screen resolution.

Here are some specific code examples showing how to use media queries to adapt to different devices and screen sizes:

1. Apply specific styles for large screen devices:

@media screen and (min-width: 1200px) {
/ Style applied when the screen width is greater than or equal to 1200px/
body {

  font-size: 18px;

}
}

2. Apply specific styles for small screen devices:

@media screen and (max-width: 767px) {
/ Styles applied when the screen width is less than or equal to 767px/
body {

  font-size: 14px;

}
}

3. Apply specific styles for horizontal screen display:

@media screen and (orientation: landscape) {
/ Style applied when displayed in landscape orientation/
body {

  background-color: yellow;

}
}

4. Use media queries in combination with multiple conditions:

@media screen and (min-width: 768px) and (max-width: 1199px) {
/ Styles applied when screen width is between 768px and 1199px/
body {

  font-size: 16px;

}
}

Pass the above As an example, we can see that media queries can apply different styles according to different devices and screen sizes, thereby achieving responsive design of web pages. By flexible use of media queries, we can provide users with different devices with a better user experience, and achieve good interface display effects whether on computers, tablets or mobile phones.

Of course, media queries are only part of responsive design, and other technologies and practices need to be combined to complete a complete responsive web design. In practical applications, we can select appropriate media query conditions based on project needs and user groups, and write corresponding CSS styles to achieve the best responsive design.

The above is the detailed content of CSS media queries: apply different styles for different devices and screen sizes. For more information, please follow other related articles on the PHP Chinese website!