Learn more about CSS3 media

高洛峰
Release: 2017-03-28 17:36:35
Original
1543 people have browsed it

css3 Media

Media Type Media Type

Media type is a very useful attribute in CSS2. Media types allow you to specify different styles for different devices.
W3C lists ten media types in total, as shown in the table:

Value Device Type
all All devices
Braille Braille tactile feedback device for the blind
Embossed Braille typewriter
Handheld Portable device
Print Printing paper Or print preview view
Projection Various projection equipment
Screen Computer monitor
Speech Voice or Audio Synthesizer
TV Television Type Device
Tty Media that use a fixed density letter grid, such as teletypewriters and terminals

Where screen, all, print are the three most common media types.

Media type reference method

  1. link method: Introduce the media type when the tag references the style, and specify it through the media attribute Different media types.

    <link rel="stylesheet" type="text/css" href="style.css" media="screen">
    Copy after login
  2. xml method: Similar to the media type introduced by link, it is also specified through the media attribute.

    <?xml-stylesheet type="text/css" media="screen" href="style.css">
    Copy after login
  3. @import method: @import is one of the methods used to reference style files, and can also be used to reference types. @importThere are two main ways to introduce media types.

    One is to call another file through @import in the style file;

    @import url(style.css) screen;
    Copy after login

    The other is to introduce it in the tag