Responsive Design

27 Jun

Hi All, You might have came across lots of responsive website and thought to make even your website responsive.
There are lots of benifts of having a responsive site but thats not our topic for today. We will discuss it later.
Lets start with core of any Responsive Web Design framework,i.e the media query.


What is a Media Query?

>>A media query is a CSS declaration that is used as a parameter for when to call other style declarations based on the dimensions of the current viewing device.

Ways of calling a Media Query:-

Like CSS we can call a media query in two ways. External and Internal call. Lets see an example of both.

External Call:-
<link rel=”stylesheet” media=”screen and (min-width:320px) and (max-width:480px)” href=”css/mobile.css” />

Internal Call or CSS direct call:-

@media screen{

body{background: #ff0000;}


Both examples of two different ways to make CSS declarations that only are to be called when the viewing device is between 320px and 480px.

Width Parameter:-

If you’ve been following along you’ll realize that @media screen is what starts our query, and the min and max width attributes set the parameters. So with this in mind, you know how to call different style declarations for different viewing widths.Sometime a UI developer uses both device with and width.

Lets see the difference:-

The difference between these two here is that device width is going by the set width of your device, with any zoom type changes being ignored.

You can check example here to understand. Click Here

So far we have discussed about the syntax now its time to move to conditional things, the logical one:-

Logical Operator:-

Complex media queries using logical operators, including not, and, and only. The AND operator is used to combine multiple media query into a single one.

@media (min-width: 700px) and (orientation: landscape) { … }

The above media query will display only if minimum width is 700px and orientation is landscape.

We can also use comma separated logical operator like in below example:-

@media (min-width: 700px), handheld and (orientation: landscape) { … }

I hope this tutorial make sense and follow me on this blog regularly to get some more like this.


One Response to “Responsive Design”

  1. Mukesh Kumar Roy at 7:15 am #

    Wow this is very good tutorial, i really surprised, it’s a very easy to implement according to orientation:- landscape, portrait and screen dimentions…

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.