Adaptive Design With CSS3 Media Queries

By: Daniel Imbellino
Updated: Feb 28, 2013

Getting Started With Media Queries - The Basics

Media Queries make it possible to create webpages and content that have the ability to adapt to their environment, depending on the properties of the device that content is being rendered on. Media Queries actually act as a set of "conditional statements", in that they have the ability to render the same or alternate content in various ways depending on a set of rules (queries) defined within our CSS declarations.

Creating web pages these days is no simple task when it comes to the vast differences in LCD sreen sizes and resolutions. In the older days of computing most screen sizes had a 4:3 Aspect ratio, many were still using the older CRT monitors, and there was no such thing as mobile devices, other than a static cell phone that could do nothing other than send a simple text message or make a phone call. Today we have mobile devices such as smart phones, tablet PC's, and variety of high resolution LCD screens that encompass a large swath of various sizes. In order to create a web page that can function effectively across the internet on multiple devices, you need to know what Media Queries are and how to use them, if not, then your web pages will not render properly on many devices and you will lose traffic to your website for sure.

Many companies are turning to mobile versions of their websites in order to provide mobile users with a way to connect. However, not all websites should have a mobile version. Our website PCTECHAUTHORITY, does function on smart phones or any device under 450px in width. If you are building a social networking site, then sure, a mobile version makes sense. But if you are designing an informational site such as ours, then people should realize they will need a larger screen in order to view the information effectively. You may have seen the newer .mobile URL's popping up on the internet over the last few years. They may look like this "mobile.example.com". This is a mobile version of a website (sub domain). Mobile version websites are usually a scaled down site that has smaller text, less or smaller images, and more refined content than a full version site. The use of media queries actually does away with the ".mobile" sub domains, as their is no need to point to a separate directory to point to alternate files to render your code. With Media Queries you can taylor one web page with alternate sets of CSS code to be executed depending on the screen resolution browser type, apsect ratio, or other attributes of different LCD screens, devices, browser width or height, etc.

For instance, you can have the same page present its menu bar and banner at 950px on a screen that has a resolution of 1366x768, and another set of CSS code on the same page that renders the same elements (banners, etc) at 1200px at say 1900x1024 resolution. Just because you create a web page on your laptop and everything looks viewable and fine, doesnt mean its going to work on other screens and resolutions. If you don't know Media Queries, then you need to learn it, or you wont be creating much of anything for the web! It just makes sense to design sites so that all users, regardless of the device they are using to connect, can view your site effectively online. Here we're going to show you how to implement Media Queries using a number of didderent approaches within your design process. If you measure by resolution, you are effectively measuring the height and width of the browser window itself. If you measure by "device-width" or "device-height", you are effectively measuring the actual screen size itself up to the point of the screen bezel.

Media Queries do have excellent support for all major browsers including Internet Explorer 9 and up, as well as most mobile devices. Previous versions of IE do not support media queries! This is not a problem as most users don't use IE anyway, and even if they do, they are quickly prompted to update and install IE9 plus.

NOTE: Media Queries only allow you to render the same content using different properties, attributes, and attribute values in your CSS, but they "Don't" allow you to hide elements or use alternative elements in each Media Query set.There is a simple work around for this, thanks to the display properties of CSS. Simply removing CSS code from a Media Query does not remove the element from the page. We will show you how to remove elements based on each set of Media Queries you incorporate in your webpage's. For example, what if you had a flash video game that you wanted to render in different sizes depending on the size of the screen? CSS display properties along with Media Queries solve this problem, and with no scripts! First you need to learn Media Queries, so this content has been moved to the end of this tutorial.

Here is the syntax for creating Media Queries:
@media screen and (attribute & attribute value) {
{your css code}
}
Ex: @media screen and (min-width: 768px) {
#header {width: 750px; height: 165px; position: absolute; left: 210px; top: 15px; }
}
@media screen and (max-width: 750px) {
#header {width: 500px; height: 110px; position: absolute; left: 110px; top: 15px; }
}

What we just did is create two sets of CSS elements and attribute values that are tailored to specific browser window sizes as specified in the "attribute & attribute value" settings of our "@media" Query.
You can place as many sets of Media Queries as you want as long as you remember to open and close each section with a curly bracket as shown above. The curly brackets will encapsulate content within each Media Query.

Using the code we just created, you can see how the same element in each Media Query will render in different pixel sizes depending on the size of the browser. This function measures the entire viewing area of the browser window, including the scroll bar.

What our code is saying is, if the size of the browser screen is a minimum of 768px, then display the #header element at 750px by 165px,
else if our screen size 650px of width or less, then render the #header element at 500px by 110px.
The #header element could be our container in our HTML file for our websites banner.
Ex: <div id="header"> <img src="sitebanner.png" /> <div/>

Continue to Part 2 of Working With CSS Media Queries..