CSS media types

CSS Media Type

Media types allow you to specify how the file will be rendered in different media. The file can be displayed in different ways on the screen, on paper, or in an auditory browser, etc.

Media Type

Some CSS properties are only designed for certain media. For example, the "voice-family" attribute is designed for hearing user agents. Several other properties are available for different media types. For example, the "font-size" attribute can be used for screen and print media, but with different values. Screen and paper documents are different and usually require a larger font. Sans-serif fonts are better for reading on the screen, while serif fonts are easier to read on paper.

@media rules

@media rules allow different styles to be set for different media in the same style sheet.

The example below tells us to display a 14-pixel Verdana font style on the browser screen. But if the page prints, it will be in 10 pixel Times font. Please note that the font-weight is set to bold on screen and on paper:

<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>
<body>
....
</body>
</html>

You can try it yourself and see! If you print this page using Mozilla/Firefox or IE5+ you will see, "Media Types" will be displayed using another font that is smaller than the other text font size.

Other media types

Note: Media type names are not case-sensitive.

Media Type Description

all is used for all media devices.

aural

# Braille is used to give back the device for blind people.

embossed Braille printer for the blind for pagination.

handheld Used for small handheld devices.

PRINT for printers.

projection Used for project presentation, such as slides.

screen Used for computer monitors.

tty used for media that use a fixed-density letter grid, such as teletypewriters and terminals.

TV is used for TV -type devices.

Continuing Learning

new file

<html> <head> <style> @media screen { p.test {font-family:verdana,sans-serif;font-size:14px;} } @media print { p.test {font-family:times,serif;font-size:10px;} } @media screen,print { p.test {font-weight:bold;} } </style> </head> <body> .... </body> </html>

submit Reset Code

Automatic operation

CSS media types

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]