8 August, 2022

Beyond What You Have Known About CSS3 – “Media Queries”

“CSS3” The word that has started changing the way the web had been styled. But how many of us has known the real power of CSS3? It’s something more than border-radius, box-shadows and transforms. I came across some useful information about CSS3 from Shwetank Dixit, Web Evangelist at Opera.
Media Queries:
As you know well, CSS2 allows us to specify different style sheets in accordance with the users media type such as screen or print. Now, its possible to write different style sheets depending on browser window size with the help of Media queries. But how? Let me explain.
The following styles will be applied, if the available size is larger than 1000px
@media screen and (min-width: 1000px) {
  #wrapper {
    width: 980px;
    margin: 0 auto;
    …
    …
  }
}
What will be size of the style sheet, if you write styles for five different screens? All set of styles will be loaded for every device width. This may lead to more loading time. This issue can be solved by writing styles in different files and use “media” property in “link” tag in HTML like:
<link rel=”stylesheet” media=”screen and (min-width: 1000px)” href=”default.css” />
Max Width:
The following CSS will apply if the viewing area is less than 350px.
@media screen and (max-width: 350px) {
  #wrapper {
    width: 350px;
    margin: 0 auto;
  }
}
Multiple Media Queries
Its possible to combine multiple media queries at the same time. The following code will apply if the viewing area is between 800px and 1024px.
@media screen and (min-width: 800px) and (max-width: 1024px) {
  #wrapper {
    width: 790px;
    margin: 0 auto;
  }
}
The above given media queries gives three options as follows:
a. You can write specific set of styles for devices like CRT Monitor to basic LCD Monitor
b. Prepare seperate style sheet for mobile devices by another media query.
c. And one more for larger size devices by another media query.
Device Width
How to write Media Query for iPhone will be your next question. Isn’t it? The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.
@media screen and (max-device-width: 480px) {
  #wrapper {
    width: 480px;
    margin: 0 auto;
  }
}
For iPad
You can also use media query to detect orientation (portrait or landscape) on the iPad.
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>
Media Queries for Internet Explorer
Unfortunately, media query is not supported in Internet Explorer 8 or older. You can use Javascript to hack around. Below are some solutions:
The Man in Blue – using Javascript (this article was written 6 years ago)
 
Sample Sites
You need to view the following sites with a browser that supports media queries such as Firefox, Chrome, and Safari. Go to each site and see how the layout responds base on the size of your browser winow.

Hicksdesign

  • Large size: 3 columns sidebar
  • Smaller: 2 columns sidebar (the middle column drops to the left column)
  • Even smaller: 1 column sidebar (the right column shift up below the logo)
  • Smallest: no sidebar (logo & right column shift up and the other sidebar columns move below)

screen capture

Colly

The layout switches between one column, 2 columns, and 4 columns depending on the viewing area of your browser.

screen capture

A List Apart

  • Large size: navigation at the top, 1 row of pictures
  • Medium size: navigation on the left side, 3 columns of pictures
  • Small size: navigation at the top, no background image on logo, 3 columns of pictures

screen capture

Tee Gallery

This one is very similar to previous example Colly, but the difference is the images of TeeGallery resize as the layout stretchs. The trick here uses relative percentage value instead of fixed pixel (ie. width=100%).

screen capture

Conclusion:

I believe that you have got clever idea about Media Queries in CSS3. It’s not just the time to start using it in your project. But also share your views and knowledge on Media Queries in the discussion board below. Won’t you?
The next coming articles in this series are: 

Checkout : How to Custom Style a Select Box with Form Value Support?

Share

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *