Tag Archives: benifts

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.

responsive_web_design-570x345

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.

References:- https://developer.mozilla.org

Advertisements