CSS3 has enhanced media types more user-friendly support for mobile devices

Article Introduction: one of the most important new features of the CSS2.1 specification is the introduction of media types, which is the 10 values of media types, not often used.

One of the most important new features of the CSS2.1 specification is the introduction of media types, which is the 10 values of media types, not often used. When there is no media label, the default is Media= "all":

all– for all device types
aural– for voice and music synthesizers
braille– for tactile feedback devices
embossed– for convex character (braille) printing equipment
handheld– for small or portable devices
print– for printers
projection– for projecting images, such as slides
screen– for computer monitors
tty– is used for devices that use fixed-pitch character formatting. such as telex typewriters and terminals
tv– used in TV-type equipment

Example:

@media Print {
Body {font-size:10pt}
}
@media Screen {
Body {font-size:13px}
}
@media screen, print {
Body {line-height:1.2}
}

With the development of mobile terminals, screen importance gradually emerged. To better support mobile terminal devices, CSS3 has enhanced media types, introduced media Queries, and its role is to allow use.

CSS expressions are used to determine the media's situation, such as querying the device's screen size color and other information, so that the Web page to better adapt to different screens.

Example:

@media screen and (DEVICE-ASPECT-RATIO:16/9) {...}
@media screen and (DEVICE-ASPECT-RATIO:32/18) {...}
@media screen and (device-aspect-ratio:1280/720) {...}
@media screen and (device-aspect-ratio:2560/1440) {...}
@media all and (color) {...}
@media all and (Min-color:1) {...}

@media screen and (min-width:1280px) {
Body{...}
}

@media screen and (min-width:800px) and (max-width:1280px) {
Body{...}
}

@media screen and (max-width:800px) {
Body{...}
}

Application Case:

Solve the icon in different resolution screen display effect problem. There are many solutions, the principle is based on the resolution of different sizes using different images.

Here you can easily implement different screen compatibility with media queries:

/* Normal Screen * *
. Icon {
width:16px;
height:16px;
Background:url (images/icon.png) no-repeat;
}
/* Retina screen with large image to reduce the fit
Background-size to be written behind Background-image, or some browsers will fail
*/
@media only screen and (-webkit-min-device-pixel-ratio:2) {
. Icon {
Background:url ("Images/icon2.png") no-repeat;
-WEBKIT-BACKGROUND-SIZE:16PX 16px;
BACKGROUND-SIZE:16PX 16px;
}
}