CSS3 Media Query

Recently has not net, finally has the network, probably understood the next, the media inquires the thing, the CSS3 part, below is the information which from the net search, together to see.

In fact, I understand the media query is: Our Web page allows users to be in different sizes of mobile devices have a good user experience,

As part of the CSS3 specification, media queries extend the role of media properties that control how your style is applied. For example, over the years people often use a separate style sheet to print Web pages by specifying media= "print". Media queries elevate this concept to a higher level, allowing designers to determine target styles based on a variety of device attributes, such as screen width, orientation, and so on. Figure 1-3 illustrates the actual application of media queries. They show how the same Web page looks on your desktop browser, on your tablet, and on ipod touch.

Figure 1. When viewed on the desktop, the page has a two-column layout.

In the desktop version, the page has a fixed-width, two-column layout. But when you view the same page on your tablet, the sidebar moves below the main content.

<link href= "Css/phone.css" rel= "stylesheet" type= "Text/css" media= "only screens and (min-width:0px) and (max-width:64 9PX) ">

Figure 2. Media Queries dialog box

When viewed in ipod Touch, the menu is rearranged and the image shrinks. Use media queries to provide different styles for each device.

Figure 3. The media query re-sets the page style to accommodate a much smaller screen limit.

A simple example of a media query might resemble the following:

<link href= "Css/phone.css" rel= "stylesheet" type= "Text/css" media= "only screens and (max-width:400px)" >

In this example, a media query is added to the <link> tag. As you'll see later, you can also use media queries in the style sheet. The media property is where the query is actually located. This example is shown below:

Only screen and (max-width:400px)

The meaning of the example should be obvious: apply this style sheet only to the device that owns the screen, and only if the browser window's width does not exceed 400 pixels.

Media queries support Internet Explorer (IE) 9 and later, Firefox 3.5 and later, Safari 3 and later, Opera 7 and later, and most modern smartphones and other screen-based devices.

Table 1. Media features for setting conditions in media queries

Function	Value	Maximum/Minimum value	Describe
Width	Length	Is	Width of the display area
Height	Length	Is	The height of the display area
Device-width	Length	Is	Width of the device
Device-height	Length	Is	Height of the device
Orientation	Portrait or Landscape	Whether	Direction of the device
Aspect-ratio	Aspect ratio (width/height)	Is	The aspect ratio of the device, using two integers separated by a slash (for example, 16/9)
Device-aspect-ratio	Aspect ratio (width/height)	Is	Ratio of device width to device height
Color	Integer	Is	The number of bits per color component (0 if not the color)
Color-index	Integer	Is	The number of items in the Color lookup table for the output device
Monochrome	Integer	Is	The number of bits per pixel in a monochrome town buffer (0 if not monochrome)
Resolution	Resolution	Is	The pixel density of the output device, expressed as an integer followed by the dpi (dots per inch) or dpcm (dots per centimeter)
Scan	Progressive or Interlace	Whether	The scanning process used by the TV device
Grid	0 or 1	Whether	If set to 1, the device is based on a grid, such as a telex type terminal or a phone display device with only one fixed font (all other devices are 0)

The first 5 features in table 1 (width, height, device-width, device-height, and orientation) are most useful. You can add min-and max-as prefixes for most features to represent the minimum and maximum values, such as Min-width and Max-width. The maximum/Minimum list in table 1 is what features can be modified in this way.

width, device-width and viewport

One of the most confusing aspects of media queries may be the difference between width and height and similar values with the prefix device-added. For desktop and tablet computers, the difference between them is easy to understand: width and height refer to the size of the browser viewport, while Device-width and device-height refer to the size of the display. Not everyone will run his or her browser in full screen, so width and height are the metrics you need to use.

Figure 4 shows how ipod touch typically displays the sample page in the previous illustration.

Figure 4. By default, modern mobile devices scale Web pages to fit the estimated viewport.

Even though style sheets attached to a page use media queries to provide different styles based on the values of Min-width and max-width, IPod touch ignores these styles and displays the desktop version because its viewport is considered to be 980 pixels wide.

Even more confusing, the IPhone, IPod touch, and ipad do not take direction when calculating the width, while other devices will.

Fortunately, there is a simple solution to this confusing scenario. Apple has designed a new <meta> tag that has been widely adopted by other mobile device manufacturers and has been incorporated into a specification that may be approved by the World Wide Web Consortium. To provide a fair opportunity for all devices that support media queries, simply add the following line of code to the

This tells the mobile device that the viewport is considered to have the same width as the physical width of the device. It also tells the iphone, IPod touch, and ipad to consider the direction when calculating the width. This way, you can safely use width in media queries because you know it's used the same as you think.

Note: Many mobile devices (most notably iphone 4 and ipad 2) have high-resolution displays that have a much higher pixel density than desktop or flat panel displays. This does not affect how you calculate the pixel size in the CSS. The CSS specification requires that the browser should re-adjust the pixel values if the pixel density of the output device differs greatly from the pixel density of a typical computer display. Some developers now call the pixel metric method CSS pixels .

How to write Media queries

To add a media query to the Medium property, you can set one or more conditions by using the media features in table 1. As with CSS properties, specify the value of the media function after a colon. Each condition is contained in parentheses and is added to the media declaration using the keyword and. For example:

Media queries are Boolean values: they are either true or false. If the entire statement is true, the style sheet is applied. If False, the style sheet is ignored. Therefore, when using the above query, all parts must be true before the style sheet is applied. In other words, it will only work on screens that are 401 to 600 pixels wide.

Some media features, such as color, monochrome, and grid, can be used as conditions without specifying a value. For example, the following statement applies to all color displays:

Specifying alternate features

No or keyword can be used to specify alternate media features. Instead, the alternate functionality can be listed as a comma-separated list, such as:

This applies the style to a screen with a width greater than 769 pixels or to a printing device that uses at least 6 inches of paper.

Specify a negative condition

To specify a negative condition, you can add a keyword not to the media statement, such as:

You cannot use not before a single condition. The keyword must be at the beginning of the declaration, and it will negate the entire declaration. Therefore, the above example applies to all devices except the monochrome screen.

Hide media queries from an earlier browser

The media query specification also provides the keyword only, which is used to hide media queries from earlier browsers. Similar to not, the keyword must be at the beginning of the declaration. For example:

Browsers that do not recognize media queries require a comma-separated list of media types, which should truncate each value before the first non-alphanumeric alphabetic character that is not a hyphen. Therefore, early browsers should interpret the above example as:

Because there is no media type only, the style sheet is ignored. Similarly, an earlier browser should interpret the following statement as media= "screen":

In other words, it should apply a style rule to all screen devices, even if it does not know what the media query means. Unfortunately, IE 6–8 failed to implement the specification correctly. There is no device that applies a style to all screens, and it ignores the entire style sheet.

Despite this behavior, if you want to hide styles from other less commonly used browsers, it is still recommended that you add only in front of media queries.

Working with earlier versions of Internet Explorer

The lack of support for media queries in IE 6 to IE 8 is not a problem. Simply create a set of basic styles for all browsers that do not use media queries, and use media queries to provide an enhanced experience for visitors who use a more advanced browser.

You can also use Internet Explorer conditional annotations to provide a special set of rules to earlier versions of IE, such as:

Using media queries in conjunction with @import and @media

In addition to using media queries in the <link> tags when attaching external style sheets, you can also use them in conjunction with @import and @media. The basic syntax is the same. For example, the following code imports a style sheet and applies the style to a device that has a screen that is not wider than 400 pixels:

Media queries can also be used in style sheets like this:

@media only screen and (max-width:400px) {     #navbar {         float:none;         width:400px;     

Test Media Query

It is important to test the code.

The zip file that accompanies this article contains an example file (mediaqueries.html) that has 3 different designs attached to it. Use the sample file to perform the following tuning tests. The browser window opens completely and you can see the basic site design (see Figure 1). Zoom out of the browser window to notice changes as you enter the size range of the various devices. When you enter a range of dimensions specified in your code, the style changes to a tablet (Figure 2) or phone size (Figure 3). For example, for tablets, the header image becomes smaller, and the separate areas below are presented in different forms. For phone styles, the main central image disappears and is replaced by a menu consisting of larger vertical buttons.

The browser checks the media query every time the window changes, such as when you adjust it, or when you rotate the phone from vertical to landscape.

Media queries in Dreamweaver CS5.5

Dreamweaver CS5.5 has been improved on the media query support that Adobe introduced in the 11.0.3 update for Dreamweaver CS5. The New Media Queries dialog box helps you create and maintain media queries for a page or an entire Web site (see Figure 5).

You can access the Media Queries dialog box from any of the following locations:

• Modify > Media Queries
• Multiscreen preview Panel > Media queries button
• Multiscreen drop-down menu > Media Queries
• The Options menu in the upper right corner of the CSS styles panel
• The context menu in the CSS styles panel

Figure 5. Media Queries dialog box in Dreamweaver CS5.5

Using this new dialog box, you can:

• Create multiple media queries.
• Attaches a media query to the current page, which adds a link to one or more CSS files.
• Create a site-wide media query file, which adds a link to a centralized CSS file that is imported into other device-specific CSS files.

When you use the Site-wide option, you can link to an existing CSS file or create a new file from within the dialog box itself.

The Media Queries dialog box also creates a comment above the query using the text you added as a description.

In addition, you can choose to add the viewport <meta> tag to the document, which forces the device to report its actual size, rather than the nominal viewport. Selecting this option helps prevent accidental scaling due to the size of the error report.

Note: For now, the Media Queries dialog box only reads and writes queries that have at least one min-width and max-width value. In addition, the dialog box edits these unique min-and max-values. You can edit additional query parameters manually, but Min-width and max-width are most commonly used to determine the value of a target device.

Preset values and site definitions

The Media Queries dialog box also provides a preset option at the bottom of the list area. By clicking this default Presets button, Dreamweaver will automatically create:

• 3 Media queries for tablets, phones, and desktops, respectively
• Min-width and max-width that are pre-populated with common starting values.

The Default Presets button provides a quick way to start using media queries.

Another convenient way to manage Site-wide media query files is to use the Site Setup dialog box. There is now a field named Site-wide Media Query file (in Advanced Settings > Local info), which specifies your site-wide media query file. As soon as you open the Media Queries dialog box, the files listed here are displayed as Site-wide options. For new (or even existing) files, all you need to do is Select this option to apply the Site-wide media query file to the current page.

The information on this page is from the INFOQ website/

CSS3 Media Query