and look at the page on the same device, then your <h1> tags will be red, as the second rule overwrites the first.

As you probably know, width is the width of the browser viewport, whereas device-width is the width of the device's screen. However, please also bear in mind that width is measured in CSS pixels, whereas device-width is measured in device pixels. This values does not change on a device and thus cannot be used to switch style sheets or CSS directives as the screen is rotated or resized.

moneysharma
—
2013-01-05T21:30:58Z —
#3

Pullo said:

This values does not change on a device and thus cannot be used to switch style sheets or CSS directives as the screen is rotated or resized.

i didn't understand which value does not change on rotating phone? if a phone is rotated then new style are applied(i.e. media query for different width) and also on rotating width and device width both changes.

and look at the page on the same device, then your <h1> tags will be red, as the second rule overwrites the first.

Q1. if suppose this is to be used in css, then why to add additional min-width:321px media query when one can specify color in the (min-device-width : 320px) and (max-device-width : 480px) media query?

Q2. why to use both these media types at the same time? suppose we are designing for iphone. why to use min-device width when win-width will work perfectly fine?

Thanks pullo for helping in solving my queries

Pullo
—
2013-01-05T21:57:43Z —
#5

To answer your first question:

The device-width doesn't change.This value refers to the width of the device itself, in other words, the screen resolution of the device.For an iPhone3 this is 320px.

You can try it out.This example is for an iPhone3 (or any other device with a 320px device width), but you can tailor it to suit.

Here, the colour of the heading will change as you rotate the device from landscape to portrait:

Q1. if suppose this is to be used in css, then why to add additional min-width:321px media query when one can specify color in the (min-device-width : 320px) and (max-device-width : 480px) media query?

Q2. why to use both these media types at the same time? suppose we are designing for iphone. why to use min-device width when win-width will work perfectly fine?

Thanks pullo for helping in solving my queries

Hopefully my above answer addresses this. You are going to be a lot more flexible using min-width and max-width, as it will adapt to screen size on the fly.You might consider using device-width if you are just trying to target small devices.

There's a really [good video by PPK (and also an [URL="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html"]article](http://www.youtube.com/watch?v=4wscVOXjIzQ)) which goes into more detail.

moneysharma
—
2013-01-05T22:15:25Z —
#7

Pullo said:

Hopefully my above answer addresses this. You are going to be a lot more flexible using min-width and max-width, as it will adapt to screen size on the fly.You might consider using device-width if you are just trying to target small devices.

There's a really [good video by PPK (and also an [URL="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html"]article](http://www.youtube.com/watch?v=4wscVOXjIzQ)) which goes into more detail.

i was having a misconception that on changing from portrait to landscape mode device width changes. It seems to be changing but it does not actually.

Thanks for everthing sir. i created a responsive website for practice http://moneyzzsharma.comze.com/. Now heading for deep knowledge of more responsive designing thankyou

Pullo;5282227 said:

Pullo
—
2013-01-05T22:19:18Z —
#8

No problem. Glad to help. It can be an awfully confusing subject.Also, I like your site! Mobile is the future and it's good to see more people recognizing this

moneysharma
—
2013-01-05T22:25:32Z —
#9

Pullo said:

No problem. Glad to help. It can be an awfully confusing subject.Also, I like your site! Mobile is the future and it's good to see more people recognizing this

i am glad that you liked it i saw your profile and in skills i am just lacking behind in ruby and rails(currently working on it too) + experience. happy to see this :cap: