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

Source: Internet
Author: User
Tags min new features

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


@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.


@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) {

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

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

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 {
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;

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.