Media query (medium queries) and media type (media types)

Web page Production WEBJX article introduction: media type and media query.

Media type is a very useful property in CSS 2, and media type allows us to specify a specific style for different devices to enable a richer interface. Media query is an enhancement to media type and is one of the key elements of CSS 3. With the development of mobile Internet, media query began to receive attention.

Media Type

Let's take a look at media type, which is a bit more familiar to you, and the media type we usually use will be all and screen, then print, and some sites will provide a more user-friendly interface for the print format of the page, specifically through the print type.
In fact, there are many types of media type:

type	explain
All	All devices
Braille	Braille
Embossed	Braille Printing
Handheld	Handheld devices
Print	Document printing or Print preview mode
Projection	Project demonstrations, such as slides
Screen	Color Computer screen
Speech	Speech
Tty	A grid of media, such as a typewriter, that has a fixed letter spacing.
Tv	TV

Several ways to use media type

There are several ways to declare media type:

Method One

<link
			href= "style.css"
			media= "screen print" ...

Method Two

<?xml-stylesheet
			media= "screen"
			href= "Style.css" ...

Method Three

@import url ("style.css") screen;

Method Four

1 2 3

<style media= "screen" > @import URL ("Style.css"); </style>

Method Five

1 2 3

@media screen{ selector{rules} }

Of course, these methods have their pros and cons, and we often use the first and last methods.

Browser support for Media type

• IE5.5/6/7 does not support the use of media types in @import
• Safari/firefox only supports three types of all,screen,print (including iphone)
• Opera fully supports
• Opera Mini supports handheld, without specifying the use of screen
• IE support handheld in Windows mobile system, other support unknown ...

Media Query

As mentioned earlier, media query is an enhancement of the CSS 3 for media type, and in fact we can think of media query as a media type+css property judge.

Note that some of the keywords mentioned below, some of which are available in media type, will work better in media query, so I'm introducing them in the right place.

CSS property judgments can be just the name of a CSS property or attribute + value:

<link
			rel= "stylesheet"
			media= "screen and (animation)" herf= "..."

If your device supports CSS animations, you can execute this external style sheet file.

1 2 3

@media screen and (max-width:240px) { body{font-size:medium} }

If the maximum width of a device's browser is 240px, the page will use a medium font.

PS: The attribute and value are connected by a colon , not an equal sign, which is consistent with the normal CSS.

Media query Statement structure

We can refer to the above statement as a media query statement, so that we can understand some more. As can be seen from the above example, media query statements are generally composed of type+ one to multiple CSS attribute judgments, while multiple CSS attribute judgments can be connected by keyword and:

1 2 3

@media screen and (min-width:1024px) and (max-width:1280px) { body{font-size:medium} }

Where media type can be omitted, and the property value can be null:

@media (color:4) {}

@media (color) {}

Note, of course, that there is a difference between a property value and a condition that does not have a property value, so the above two rules are not equivalent.

CSS rules for multiple media types can be separated by commas:

1 2 3

@media handheld and (min-width:360px), screen and (min-width:480px) { body{font-size:large;} }

1 2 3

@media screen and (min-width:800px), print and (min-width:7in) { Body{font-size:small} }

Properties supported by Media query

In fact, the properties that media query supports are not quite the same as the CSS properties we commonly use, and they are specially defined entries:

Property	value	Min/max	Description
Color	Integer	Yes	The number of bytes per color
Color-index	Integer	Yes	The number of colors in the color table
Device-aspect-ratio	Integer/integer	Yes	Width and height ratio
Device-height	Length	Yes	Output height of the device screen
Device-width	Length	Yes	Output width of device screen
Grid	Integer	No	Is it a grille based device
Height	Length	Yes	The height of the render interface
Monochrome	Integer	Yes	byte per pixel in monochrome frame buffers
Resolution	Resolution ("DPI/DPCM")	Yes	Resolution
Scan	Progressive interlaced	No	How TV media types are scanned
Width	Length	Yes	Width of the Render interface
Orientation	Portrait/landscape	No	Horizontal screen or vertical screen

As we can see from these attributes, media query is designed to better fit a variety of devices.

Browser extensions

Webkit

WebKit is one of the first browser kernels to implement media query support, and it also has some specific extended attributes that you can use, most commonly:

transform-2d	Used only to support browsers that implement 2D transformations using-webkit-transform
Transform-3d	Used only to support browsers that implement 3D transformations using-webkit-transform
Transition	Used only to support browsers that implement rollover effects using-webkit-transition
Animation	Only browsers that support animation using-webkit-animation

For more information please see here:http://webkit.org/specs/MediaQueriesExtensions.html

Firefox

Firefox also offers some of its own extensions, but since the Firefox browser's mobile version is still weak, it's rarely used, and interested students can go to https://developer.mozilla.org/En/CSS/Media_queries .

Max and Min

Careful students may have noticed the previous use of these two keywords, they are to support their attributes to use, their meaning and our commonly used max-width and minwidth similar.

The support for Max and min for each attribute is given in the previous list of attributes, which is a detailed list:

Height	Min-height	Max-height
Device-width	Min-device-width	Max-device-width
Device-height	Min-device-height	Max-device-height
Aspect-ratio	Min-aspect-ratio	Max-aspect-ratio
Device-aspect-ratio	Min-device-aspect-ratio	Max-device-aspect-ratio
Color	Min-color	Max-color
Color-index	Min-color-index	Max-color-index
Monochrome	Min-monochrome	Max-monochrome
Resolution	Min-resolution	Max-resolution

Not/only

The media type also supports the not and only keyword, which can be used to make it easier to locate a media device:

Not: Exclude certain types of media

@media not print and (color) {
}

Only: Specifies a specific type of media that can be used to exclude browsers that do not support media queries:

@media only screen and (color) {
}

Browser support for media query:

• IE 9 below does not support
• Firefox 3.5+ (Gecko 1.9.1+) support
• Opera 9.5+ fully supports
• Opera Mini 5 Supports
• WebKit supports most of the properties (the kernel version of Safari 3.0 is the kernel version of Safari in 522,iphone 1, which is 524,webkit probably started to support media query from this time, but not for some properties like projection support)
• The previous version of the iphone OS 3.2 does not support the orientation attribute, and the ipad and iphone 4 support this attribute.
• iphone Safari does not support orientation (iphone 4 support)

Example:

Now let's take a look at some typical examples:

Detecting iphone Safari:

<link media= "Only screens and
			(max-device-width:480px)"
			href= "Style.css" >

This is the Apple Web site recommended a way to locate the iphone Safari browser, in the iphone generation and the 2 generation era, this rule can correctly determine the iphone browser, but later appeared in Android's big-screen phone, such as Nexus One and HTC Desire, this rule can also fit these 480px-wide machines.

Google's iphone horizontal screen style:

Google has previously provided a horizontal screen for the iphone in the following ways (since the first 3-generation iphone does not support the orientation attribute):

1 2 3 4 5 6

@media screen and (max-height:300px) { #linksDiv { margin-top:10px } ... }

Multi-resolution problem with Android Phone:

The openness of Android has led to the diversity of its terminals, so the difference in screen resolution for all kinds of Android phones is adding to the complexity of page refactoring for Android phones, so we can use media query to provide a specific style for each resolution:

1 2 3 4 5 6 7 8 9 17

/* For the selector{px width screen */@media only screen and (max-device-width:240px) { } } /* for 360px width screen */@media only screens and (min-device-width:241px) and (max-device-width:360px) { selector{ } }/* for the min-device-width:361px px Width screen */@media only screen () and (MA x-device-width:480px) { selector{ } }

Device-aspect-ratio

Device-aspect-ratio can be used to fit a specific screen aspect ratio device, which is also a useful attribute, for example, our page wants to define a style for the normal screen with aspect ratio 4:3, and then define another style for the 16:9 and 16:10 widescreen, such as adaptive width and fixed width:

1 2 3 4 5 6 7 8 9 Ten 11

/* for 4:3 screen /@media only screens and (DEVICE-ASPECT-RATIO:4/3) { selector{ }}/ * For 16:9 and 16:10 screens */@media only screens and (DEVICE-ASPECT-RATIO:16/9) and (DEVICE-ASPECT-RATIO:16/10) { selector{ } }

Of course, you can also use this property for mobile phones, such as for 480px*800px Nexus One and desire, and so on, you can use the following style to match:

1 2 3 4 5

/* For 480px*800px width screen * /@media only screen (DEVICE-ASPECT-RATIO:5/3) { selector{ } }

O ' Reilly's way of distinguishing between the iphone and the ipad

O ' Reilly has created different versions of the ipad and iphone devices for his website, providing an interface that best suits the reading of related devices by using media query:

1 2 3 4

<link rel= "stylesheet" media= "All and (max-device-width:480px)" href= "Iphone.css" > < Link rel= "stylesheet" media= "All" and ( min-device-width:481px) and (max-device-width:1024px) and ( orientation:portrait) " href=" Ipad-portrait.css "> <link rel=" stylesheet "media=" all and (min-device-width:481px) and (max-device-width:1024px) and (Orientation:landscape) " href=" Ipad-landscape.css "> <link rel=" stylesheet "media=" All and (min-device-width:1025px) " href= "Ipad-landscape.css" >

Detailed description can be viewed here:http://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html

Summary

Media query for CSS 3 is a powerful and useful tool, it provides a quick way for us to implement a rich interface in different devices and environments, and although there are still some differences in the support of various browsers, we are improving, IE 9 has already started to support media query. But media query's biggest stage at the moment is in high-end handheld devices, and it's believed that with the rapid development of mobile Internet, media query will play its part.