Posts in current category

CSS media type

May 03, 2021 23:00 CSS

Table of contents

CSS media type

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

The type of media

Some CSS properties are only designed to target certain media. F or example, voice-family is designed for auditory user terminals. /b10>Some other properties can be used for different media types. F or example, font-size can be used for screen and print media, but with different values. Different from files on screen and paper, it usually requires a larger font, sans - serif font is more suitable for reading on the screen, and serif font is easier to read on paper.

@media rules

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

The following example tells us that a 14-pixel Verdana font style is displayed on the browser screen. B ut if the page is printed, it will be a 10-pixel Times font. Note that font-weight set to bold on the screen and on paper:


@media screen

{ p.test {font-family:verdana,sans-serif; f ont-size:14px; } }

@media print

{ p.test {font-family:times,serif; f ont-size:10px; } }

@media screen,print

{ p.test {font-weight:bold; }}


You can try it yourself! If you're printing this page using Mozilla /Firefox or IE5 plus, you'll see Media Types will appear in a font smaller than other text font sizes.

Tip: For @media of these rules, refer to the CSS @media Inquiry section of the CSS Reference Manual.

Other media types

Note: Media type names are not case sensitive.

The type of media Describe
all For all media devices.
aural For speech and audio synthesizers.
braille Haptic feedback device for blind people using dot-word method.
embossed A dot-word printer for the blind for pedding.
handheld For small handheld devices.
print For printers.
projection For scenario presentations, such as slides.
screen For computer monitors.
Tty Media used to use fixed-density letter rasters, such as electric typewriters and terminals.
tv A device for a TV type.

Extended reading

CSS3 tutorial: CSS3 multimedia query