Using CSS media queries for responsive web design has become a relatively standard practice in web design today. Since the advent of smart phones and tablets using CSS media queries is necessary for designers to achieve a design that will scale to all devices.

First of all a html5 document needs to be created. On lines 7 to 9 a ‘h1’ selector is styled with a ‘font-size’ property of ‘5em’.

Here is the result in a iphone SE which has a viewport width of ‘320 pixels’.

Using CSS Media Queries. My size adjusts.
The text for this ‘h1’ heading is set at a large ‘5em’ which is ’80 pixels’ (5 x 16px).

The ‘font-size’ value for the ‘h1’ will work on a large desktop but not on a small smart phone. Luckily using CSS media queries allows the large value and another value for small screens.

The basic syntax for the iphoneSE is a media query as follows.

To adjust the ‘h1’ property for screens that are not larger than 320 pixels in width the css rule must be placed inside the opening and closing bracket of the media query.

Using CSS Media Queries.
The ‘h1’ font-size is set to ‘2em’ which is ’32 pixels’ (2 x 16px).

If the html document is loaded into a larger screen the ‘h1’ will take the value from the first css rule on line 7 and ignore the media query on line 10 as the screen width is larger than the maximum of ‘320px’ set in the media query. To prove it here is the same html5 document in a ipad mini4 which has a screen width of 768 pixels.

Using CSS Media Queries.
The ‘h1’ font-size is again ‘5em’.

We can use another media query to adjust the font-size of the ‘h1’ heading in a ipad mini4. This time we need the following media query.

Lets put that into the html5 document on line 15. We will adjust the ‘font-size’ to be ‘3.5em’.

Using CSS Media Queries.
The ‘h1’ heading ‘font-size’ now has a value of ‘3.5em’ which is ’56px’ (3.5 x 16px).

In order for the media query for the smartphones to work the media query for the tablet will need a minimum value of ‘321px’. The syntax for this media query will look like this:

So lets take a look at how this all works:

  1. In screens that have a width greater than 768 pixels the ‘h1 font-size‘ will be ‘5em’ (80px).
  2. In screens that have a width of between 768 pixels and 320 pixels the ‘h1 font-size‘ will be ‘3.5em’ (56px).
  3. In screens that have a width no greater than 320 pixels in width the ‘h1 font-size‘ will be ‘2em’ (32px).

CSS3 logo. Using CSS Media Queries

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

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