Tag Archives: computer

Blog Shifted

13 Sep

Dear Friends,

I got lot of support from you and I am very happy to let you know that Finally I have migrated from WordPress Hosting to own hosted Blog.

Yes, I believe WordPress is the best blogging platform available in market. So I have used wordpress again for my blog.

Here is a link for my New Blog :- http://mukundtechie.com

I request all my followers to visit my site and suggest me, What can be done to make it more interactive and pleasing to see posts.

All your feedback and suggestions are welcomed.

Thanks,

Mukund Chaudhary

New Blog : http://mukundtechie.com

 

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