Article directory
CSS media types
CSS media type refers to the device type or media type that specifies the application of CSS styles. It allows us to set different style sheets for different device types or media types to better adapt to different devices or media.
In CSS, media types can be implemented through @media rules. The specific syntax format is as follows:
@media 媒体类型 {
/* 样式定义 */
}
For example, we can define a stylesheet for the print media type:
@media print {
h1 {
font-size: 28px;
color: #000;
text-align: center;
}
}
In the above code, we specify an h1 title style for the print media type, and the title will be centered when printing.
CSS media types can be divided into the following categories:
- all media type: for all media devices. If no media type is specified, the all media type is the default.
- print media type: for the document displayed on the printer or in print preview.
- screen media type: A device type used for computer screens or other devices that use screen display devices.
- speech media type: used for speech synthesis devices such as screen readers.
In addition to the four media types mentioned above, CSS also defines many other media characteristics, such as width (width), height (height), color (color), etc. We can provide different settings for different devices and media based on these characteristics. CSS styles. For example, we can use media queries to set CSS styles for the device based on its width, height, orientation, and other parameters.
@media rules
@media rules in CSS are part of media queries and are used to apply different styles for different media types/devices.
Its basic syntax is as follows:
@media media_type {
/* CSS for the specified media type */
}
For example, if we wanted to style it differently for devices with a width of 768px or smaller, we could write:
@media only screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
In this example, when the width of the browser window is 768px or smaller, the background color changes from the default color to light blue.
In addition to screen, there can be other media types, such as handheld (for handheld devices such as mobile phones or tablets) and print (for printing content). For example:
@media handheld {
/* CSS for mobile or handheld devices */
}
@media print {
/* CSS for printed pages */
}
In addition, @media rules can be used with other CSS rules to achieve more complex effects. For example, you can use @media rules to control styles under views of different sizes, or nest them with other CSS rules to achieve more detailed layout and style design.
Example - Changing styles based on device screen size
Here is an HTML example that uses CSS media types to change styles based on the device screen size:
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认样式 */
body {
background-color: lightblue;
}
/* 当屏幕宽度小于600px时应用此样式 */
@media screen and (max-width: 600px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>这是一个使用CSS媒体类型的示例</h1>
<p>当屏幕宽度小于600px时，背景颜色将变为浅绿色。</p>
</body>
</html>
In this example, the default style sets the background color to light blue. However, when the screen width is less than 600px, the @media rule will apply a new style, changing the background color to light green. This is achieved via the @media screen and (max-width: 600px) query, which specifies the conditions for the style to be applied, i.e. the device is screen type and the screen width is less than 600px.
Other media types
The following diagram illustrates other CSS media types:
| media type | describe |
|---|---|
| all | for all media devices |
| aural | for speech and audio synthesizers |
| braille | Braille tactile feedback device for blind people |
| embossed | Braille printer for the blind for pagination |
| handheld | For small handheld devices (black and white displays, monochrome displays) |
| For use with printers (opaque media) | |
| projection | For project presentation, such as slides (opaque media) |
| screen | For computer monitors (color monitors) |
| tty | For use with media using a fixed density alphabetic grid, such as teletypewriters and terminals (readable/writable) |
| tv | For television type equipment (color) |