Detailed explanation of how to use css media

In website development, the importance of CSS is self-evident. We can use CSS to set various appearance attributes such as style, layout, fonts, etc. for the website to make the website more attractive and readable. However, different devices (such as desktop computers, tablets, mobile phones, etc.) have different screen sizes and resolutions. Without CSS style settings for different devices, the website display effect may be quite unsatisfactory.

One way to solve this problem is the CSS Media Query function, which can write different CSS styles for different devices. This article will provide an in-depth introduction to the basic concepts, syntax, and application cases of CSS Media Query, allowing you to get started with this practical technology.

What is CSS Media Query

CSS Media Query is a conditional statement embedded in a style sheet that is used to specify different CSS styles to be applied to different screen sizes and device types. Through CSS Media Query, we can implement responsive website design (Responsive Web Design), so that the website can provide the best user experience on different devices.

The CSS Media Query part is composed of media types and media properties. The format is as follows:

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

where mediatype specifies the media type to which CSS styles are to be applied, such as screen, print, handheld, etc., and media feature specifies the media properties to which CSS styles should be applied, such as device width, device height, direction, etc.

Media Type

Media type refers to the type of device used to render the document. Common media types include:

• all: Works on all devices.
• print: Suitable for output devices such as printers and print previews.
• screen: Suitable for computer screens, tablets, smartphones and other screen devices.
• handheld: suitable for handheld devices with small screens (such as smartphones).
• speech: Suitable for sound devices such as screen readers.

Media properties

Media properties include but are not limited to the following:

• width: viewport width, unit px.
• Height: Viewport height, unit px.
• device-width: device width.
• device-height: device height.
• orientation: device orientation, landscape (horizontal) or portrait (vertical).
• aspect-ratio: The ratio of viewport width to height.
• color: Device color bit depth.
• resolution: device resolution, unit dpi.

Through the above two combinations, we can define different CSS styles for different device types and screen attributes.

CSS Media Query usage examples

The following are some specific CSS Media Query usage examples, involving customized styles for different devices and screen characteristics.

1. Set different styles for different device types

/* 设备为电脑屏幕 */
@media screen and (min-width: 768px) {
   body {
      background-color: #333333;
   }
}

/* 设备为智能手机屏幕 */
@media handheld and (max-width: 599px) {
   body {
      background-color: #ffffff;
   }
}

The above two pieces of CSS code apply different background colors to computer screens and smartphone screens respectively.

2. Set different styles according to the device direction

/* 设备为横向 */
@media screen and (orientation: landscape) {
   body {
      background-color: #f3f3f3;
   }
}

/* 设备为竖向 */
@media screen and (orientation: portrait) {
   body {
      background-color: #ffffff;
   }
}

The above two pieces of CSS code set different background colors according to the device direction (horizontal or vertical).

3. Set different styles based on the viewport width

/* 视口宽度大于等于 960px */
@media screen and (min-width: 960px) {
   body {
      font-size: 16px;
   }
}

/* 视口宽度小于 960px */
@media screen and (max-width: 959px) {
   body {
      font-size: 14px;
   }
}

The above two pieces of CSS code apply different font sizes based on the viewport width.

4. Combine multiple conditions

Of course in actual use, multiple conditions need to be combined according to specific circumstances. For example, we want to set a logo image suitable for smartphones, but it will only take effect when the device's viewport width is less than or equal to 800px. At this time, you can use the following code:

@media handheld and (max-device-width: 800px), 
(-webkit-min-device-pixel-ratio: 1.5) {
   #logo {
      content:url('logo-for-smartphone.png');
   }
}

In this CSS code, we used handheld and (max-device-width: 800px) and (-webkit- min-device-pixel-ratio: 1.5)Two conditions. The former specifies that the device is a handheld device and the device viewport width is less than 800px. The latter is compatible with the WebKit rendering engine and specifies a device pixel ratio greater than 1.5.

Summary

The CSS Media Query function is an important part of responsive website design and can help us write different CSS styles for different device types and screen characteristics. Through the introduction of this article, you should have understood the basic concepts, syntax and application methods of CSS Media Query, and can use them to provide more refined and personalized styles for your website design.

The above is the detailed content of Detailed explanation of how to use css media. For more information, please follow other related articles on the PHP Chinese website!