About CSS3 media queries and responsive layouts

Responsive design

The responsive design can vary depending on the screen size displayed, and each screen it renders looks different. Responsive design provides the best results for the UI, following the available screen properties.

For example, if the site layout has a side bar that occupies 25% of the screen width, the sidebar is rendered differently on screens of different sizes. The sidebar is widescreen on a larger desktop monitor and is extremely narrow on smaller smartphone screens. On the highest or smallest screen, the sidebar is probably no longer a usable UI component.

With media queries, you can write CSS that automatically changes your design to provide the best UI experience for different screen sizes.

Media Enquiry

Starting with CSS version 2, media support can be obtained through the media type in CSS. If you've ever used a plot style sheet, you've probably already used a media type. Listing 1 shows an example.

Listing 1. Working with Media types

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

<link rel= "stylesheet" type= "Text/css" href= "Print.css" media= "print"/>

In Listing 1, the media property defines the style sheet that should be used to specify each media type:

• screen is suitable for computer color screens.
• Print applies to what you see in Print Preview mode or what your printer prints.

As part of the CSS V3 specification, you can extend the media type function and allow more precise display rules to be used in the style sheet. Media Queries are an expression that evaluates to True or False. If true, the style sheet continues to be used. If False, the style sheet cannot be used. This simple logic becomes more powerful through expressions, giving you more flexibility to use custom display rules for specific design scenarios.

A media query contains a media type followed by one or more expressions that check for specific conditions, such as the smallest screen width. The media query in the style sheet appears as shown in the example in Listing 2.

Listing 2. Media query Rules

@media all and (min-width:800px) {...}

According to the markup in Listing 2, all screens with a minimum horizontal screen width of 800 pixels (screen and print, etc.) should use the following CSS rules. The rule in the example where the ellipsis is located. For this media query:

• @media All is the media type, that is, apply this CSS to all media types.
• (min-width:800px) is an expression that contains media queries that, if the minimum width of the browser is 800 pixels, tells the browser to use only the following CSS.

Note that in Listing 2, you can omit the keyword all and and. When you apply a media query to all media types, all is omitted. The following and is optional. Rewrite the media query using the shorthand syntax, as shown in Listing 3.

Listing 3. Shorthand syntax

@media (min-width:800px) {...}

Media queries can also contain complex expressions. For example, if you want to create a style that is applied only when the minimum width is 800 pixels and the maximum width is 1200 pixels, you need to follow the rules in Listing 4.

Listing 4. Complex expressions

@media (min-width:800px) and (max-width:1200px) {...}

In your expression, you can use any number of and conditions to your liking. If you want to add additional criteria to check the specific screen orientation, simply include another and keyword followed by the Orientation media query, as shown in Listing 5.

Listing 5. and conditions

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) {...}

The media query in Listing 5 is activated only when the width is 800 to 1200 pixels and the orientation is portrait oriented. (Typically, the direction is meaningful only for smartphones and tablets that can easily convert the aspect mode.) If one of the conditions is False, the media query rule cannot be applied.

The antonym of the and keyword is the OR keyword. As with and, these conditions combine to form complex expressions. If one of these conditions is true, then the entire expression or two conditions that are detached are true, as shown in Listing 6.

Listing 6. or Key Words

@media (min-width:800px) or (orientation:portrait) {...}

If the width is at least 800 pixels or the orientation is vertical, the rule is applied.

Another media query keyword saved in the thesaurus is not. At the beginning of the media query, not ignores the result. In other words, if the query is true without the NOT keyword, it will now be false. Listing 7 shows an example.

listing 7. Using not

@media (not min-width:800px) {...}

In the English sense only, the code in Listing 7 shows: When the minimum width is not 800 pixels, the following CSS rules are applied. These examples simply use pixels as the unit of measure in a media query, but the units of measurement are not limited to pixels. You can use any valid CSS unit of measurement, such as cm (cm), inches (in), millimeters (mm), and so on.

Useful Media Features

There are many features of the media, such as width, color, and grid, which you can use in media queries. The description of each possible media feature is not covered in this article. Documents about media queries the world Wide Web Consortium ' s (website) provides a complete list of this. (See resources ).

To design a responsive site, you only need to know some of the media features: orientation, width, and height. As a simple media feature, the value of the direction can be portrait or landscape. These values apply to users who hold a phone or tablet, allowing you to optimize content based on two shape factors. When the height is greater than the length, the screen is considered portrait mode, and when the width is greater than the height, the screen is considered landscape mode. Listing 8 shows an example of querying using orientation media mode.

Listing 8. Orientation Media Enquiry

@media (orientation:portrait) {...}

The height and width behaviors are very similar, and both min-and max-are supported. Listing 9 shows a valid media query.

Listing 9. Height and Width Media queries

@media (min-width:800px) and (min-height:400px) {...}

If you do not have a min-or max-prefix, you can also use the width and height media features, as shown in Listing 10.

listing 10. Without min- and the max- prefix

@media (width:800px) and (height:400px) {...}

When the screen is exactly 800 pixels wide and 400 pixels high, you can use the media query in Listing 10. In reality, media queries like this may be too specific to be useful. Detecting precise dimensions is a scenario that most site visitors are not likely to encounter. Typically, a responsive design uses scopes to perform screen detection.

As a follow-up to the media query size range, the next section discusses some common media queries that you might find useful when designing a responsive web site.

Common Media Queries

Most of the following media queries are based on these types of devices, as Apple has launched its first user smartphone and tablet product to the market.

If your target is a landscape-mode smartphone, use: @media (min-width:321px) {...}

If the target is a portrait-mode smartphone, use: @media (max-width:320px) {...}

If the target is a landscape-mode Apple iPad, use: @media (Orientation:landscape) {...}

If the target is portrait mode IPad, use: @media (orientation:portrait) {...}

You may have noticed that the iPad is using the Orientation Media feature, and width is used on the Apple iPhone. Mainly because the IPhone does not support orientation media features. You must use width to simulate these directional breakpoints. See Resources For more information on common media features.

Media queries in the SASS

The built-in support in Ruby on Rails helps propel the prevalence of syntactically Awesome Style Sheets (SASS), enabling it to rapidly strengthen in the Web development community. A detailed discussion of SASS is beyond the scope of this article, but I'll briefly cover the basics of using media queries in SASS-based style sheets. See ResourcesFor more information about SASS.

Media queries in SASS behavior are exactly the same as in normal CSS, with one exception: they can be nested within other CSS rules. When one media query is nested within another CSS rule, the rule is placed at the top level of the style sheet, as shown in Listing 11.

Listing 11. Nested Media queries

#header {

width:400px;

@media (min-width:800px) {

width:100%;

}

}

The example in Listing 11 is compiled into the code in Listing 12.

Listing 12. Compile results

#header {

width:400px;

}

@media (min-width:800px) {

#header {

width:100%;

}

}

Organize your media queries

Now that we've learned how to write media queries, it's time to consider deploying media queries into your CSS code in a logical, organized way. Determining how media queries are organized is largely a personal preference. This section explores the pros and cons of the two main approaches.

The first method is to specify a completely different style sheet for different screen sizes. The advantage is that rules can be saved in a separate style sheet, which makes the display logic clearly divided and easier for the team to maintain. Another advantage is that merging between source-code branches becomes easier. But the advantages are also shortcomings. If you want to create a separate style sheet for each media query, you cannot place all the style sheets of one element in the same folder. When you change an element in a CSS, you need to create multiple locations for viewing, which makes maintenance of the Web site CSS more difficult.

The second method is to use a media query in an existing style sheet that is next to the location where the rest of the element's style sheet is defined. The advantage of this approach is that all element styles can be saved in the same location. This can create more source code consolidation work when working in team mode, but this is a common part of all team-based software development that can be managed.

There is no so-called right or wrong method. You just have to choose the best method for your project and team.

Browser support

So far, you may have believed that CSS media queries are a powerful tool and want to know which browsers support CSS media queries. Here are some good news and bad news.

• The good news is that most modern browsers, including browsers on smartphones, support CSS media queries.
• The bad news: Recently, the windows®internet Explorer®8 browser from Redmond does not support media queries.

For most professional WEB developers, this means you need to provide a solution to support media queries in Internet Explorer.

The following solutions are a JavaScript polyfill named Respond.js.

Polyfill with Respond.js

Respond.js is a minimal Web browser-enhanced JavaScript library that enables browsers that would otherwise not support CSS media queries to support them. The script loops through all the CSS references on the page and parses the CSS rules using media queries. The script then monitors the browser width changes, adding or removing styles that match the media query in the CSS. The end result is the ability to run media queries on browsers that are not originally supported.

Since this is a JavaScript-based solution, browsers need to support JavaScript in order to run scripts. The script only supports the minimum and maximum width media queries required to create a responsive design. This is not a substitute for all possible CSS media queries. In the Resources section, you can read more about the features and limitations of this script.

Respond.js is one of many available open source media queries Polyfills you can choose from. If you think Respond.js can't meet your needs, after a little research, you'll find several alternatives.

About CSS3 media queries and responsive layouts