How To Create a Mobile Version of Your Website with CSS3 Media Queries

CSS3 continues to both excite and frustrate web developers and web designers. We are excited about the possibilities that CSS3 brings, and the problems it will solve, but also frustrated by the lack of support in Internet Explorer 8. This article will demonstrate a technique that uses part of CSS3 that is also unsupported by Internet Explorer 8. However, it doesn’t matter as one of the most useful places for this module is somewhere that does have a lot of support small devices such as the iPhone, and Android devices.

In this article I’ll explain how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. We’ll have a look at a very simple example and I’ll also discuss the process of adding a small screen device stylesheet to my own site to show how easily we can add stylesheets for mobile devices to existing websites.

Media Queries

If you have ever created a print stylesheet for a website then you will be familiar with the idea of creating a specific stylesheet to come into play under certain conditions – in the case of a print stylesheet when the page is printed. This functionality was enabled in CSS2 by media types. Media Types let you specify a type of media to target, so you could target print, handheld and so on. Unfortunately these media types never gained a lot of support by devices and, other than the print media type, you will rarely see them in use.

The Media Queries in CSS3 take this idea and extend it. Rather than looking for a type of device they look at the capability of the device, and you can use them to check for all kinds of things.

For example:

width and height (of the browser window)
device width and height
orientation – for example is a phone in landscape or portrait mode?
resolution

If the user has a browser that supports media queries then we can write CSS specifically for certain situations. For example, detecting that the user has a small device like a smart phone of some description and giving them a specific layout. To see an example of this in practice, the UK web conference has just launched their website for the 2011 conference and this uses media queries to great effect.

  • http://wiki.ditleporc.com/index.php?title=User:Brentyanc Carolyn

    Hi there! I just wanted to ask if you ever have any problems
    with hackers? My last blog (wordpress) was hacked and I ended
    up losing a few months of hard work due to no backup. Do you have any methods to prevent hackers?

    Visit my website: Carolyn

    • http://www.gonextsolutions.com admin

      Thanks for your comment over this post. There are lot of process which help you to stop all hacking activity.

      And the main option is to change your web server in to Dedicated hosting and point your blog to Dedicated IP.

      2nd Option is you can use API keys to create security level high. but for this you have to pay for this,

      for more details you can contact us any time. at webmaster@gonextsolutions.com

  • http://wikisushi.pl/index.php?title=U%C5%BCytkownik:LillianaB binoa

    Greetings! Very useful advice in this particular post! It is
    the little changes that will make the most significant changes.
    Thanks a lot for sharing!

  • http://detroit-webdesign.org/michigan-website-designers/detroit-web-design-why-you-need-it.html Shannon

    I’m not sure where you are getting your info, but great topic. I needs to spend some time learning more or understanding more. Thanks for fantastic info I was looking for this information for my mission.