Explore CSS3 Media

CSS3 Media

Media type

The media type is a very useful property in CSS2. Media types allow you to specify different styles for different devices.
A total of 10 media types are listed, such as tables:

value	Device Type
All	All devices
Braille	Braille Tactile feedback device for the blind
Embossed	Braille Typewriter
Handheld	Portable Devices
Print	Print paper or Print preview view
Projection	Various projection devices
Screen	Computer monitor
Speech	Voice or audio synthesizer
TV	TV Type Equipment
Tty	Media using fixed density letter grids, such as telex typewriters and terminals

Where Screen,all,print is the most common three media types.

Reference methods for media types

2. Link Method : The media type is introduced when the <link> tag refers to the style, and different media types are specified through the Media property.

   <link rel= "stylesheet" type= "Text/css" href= "style.css" media= "screen" >

4. XML Method : Similar to link introduction media type, is also specified by the Media property.

   <?xml-stylesheet type= "text/css" media= "screen" href= "Style.css" >

6. @import方法: @import is one of the methods used to reference a style file and can also be used to reference a type. @importThere are two main ways of introducing media types.

   One is in the style file by @import invoking another file;

   @import URL (style.css) screen;

   The other is introduced in the label <style>.

   <style>    @import url (style.css) screen;</style>

8. @media方法: @media is a new feature introduced in CSS3, called Media query. This property can be used in the page to introduce the media type. As with @import similar, there are also two types.

   One is by referencing the media type in the style file @media ;

   @media screen{    Selector {/* style */}}

   The other is introduced in the label <style>.

   <style>    @media screen{        Selector {/* style */}    }</style>

The above four methods can refer to the media type, the first and fourth are recommended.

Media query Features

The media feature is an enhanced version of CSS3 for media types.
The CSS3 lists the features commonly used in 13 types, such as tables:

Properties	value	Min/max	Description
Color	Integer	Yes	Number of bytes per color
Color-index	Integer	Yes	Number of colors in the color table
Device-aspect-ratio	Integer/integer	Yes	Width/height ratio
Device-height	Length	Yes	Output height of the device screen
Device-width	Length	Yes	Output width of the device screen
Grid	Integer	No	Whether a raster-based device
Height	Length	Yes	The height of the rendered page
Monochrome	Integer	Yes	Per-pixel bytes in a monochrome frame buffer
Resolution	Resolution (DPI/DPCM)	Yes	Resolution
Scan	Progressive Interlaced	No	How to scan TV media types
Width	Length	Yes	The width of the rendering interface
Orientation	Portrait/landsscape	No	Horizontal screen or vertical screen

How to use Media query

@media Media type and (media attribute) {/* style */}

When you use media query, you must use the @media start, specify the media type, and then specify the media attributes.

2. Max width max-width

   Max-width is the most commonly used feature in media features, meaning that the style takes effect when the media type is less than or equal to the specified width.

   @media screen and (max-width:480px) {    p{        width:400px;    }}

   This means that when the screen is less than or equal to 480px, the width of p is reset to 400px.

4. Minimum width min-width

   Min-width In contrast to Max-width, where the media type is greater than or equal to the specified width, the style takes effect.

   @media screen and (min-width:900px) {    p{width:900px;}}

   When the minimum width is equal to or greater than 900px, the width of p is reset to 900px

6. Multiple media features are used

   Media query can use the keyword"and" to combine multiple media features.

   @media screen and (min-width:400px) and (max-width:600px) {    p{        background:red;    }}

   When the screen width is 400px~600px, the background color of p turns red.

8. The output width of the device's screen is device width

   You can also set the appropriate style according to the screen size

   <link rel= "stylesheet" media= "screen and (max-device-width:500px)" href= "Style.css"/>

   The style applies to a maximum width of 500px, where the max-device-width refers to the actual resolution, which refers to the visible area resolution.

10. not keyword

    The keyword not is used to exclude a certain type of media, that is, to perform an inverse operation on the subsequent expression.

    @media not print and (max-widht:1200px) {/* style */}

    The style code will be used in addition to the print device and all devices with a screen width of less than 1200px.

12. only Keywords

    Only to specify a specific media type, you can exclude browsers that do not support media query. Only many times it is used to hide style sheets for devices that do not support media query but support media type. Therefore, the device that supports media features calls the style normally, and when only none exists, the device that does not support media features but supports media types will not read the style because it reads only instead of screen, and the browser that does not support media query, whether or not it supports only, Styles are not adopted.

    <link rel= "stylesheet" media= "only screens and (max-device-width:1200px)" href= "Style.css" >

CSS3 Media features finished.