Responsive Design media query doubt

HTML & CSS
1

i am confused between these media queries…please help :frowning:

if these two media queries are applied in a css:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

@media only screen
and (min-width : 321px) {
/* Styles */
}

and the device is having width 340px then will both of these will work for that device??

2

Hi there,

The answer is yes, both styles will apply, as both conditions are met.

If you do:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  h1 {color: blue};
}

@media only screen and (min-width : 321px) {
  h2 {color: red};
}

and look at the page on, for example, an iPhone 3, then your <h1> tags will be blue and your <h2> tags will be red.

If you do:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  h1 {color: blue};
}

@media only screen and (min-width : 321px) {
  h1 {color: red};
}

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.

3

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.

4

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 :slight_smile:

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:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    <title>Responsive demo width</title>
    <style>
      @media screen and (max-width : 320px) {
        h1 {color: blue};
      }

      @media screen and (min-width : 321px) {
        h1 {color: red};
      }
    </style>
  </head>

  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

In this example, it doesn’t matter how you hold your phone, the device width is constant (320px) and the second rule will never be applied:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    <title>Responsive demo device-width</title>
    <style>
      @media screen and (max-device-width : 320px) {
        h1 {color: blue};
      }

      @media screen and (min-device-width : 321px) {
        h1 {color: red};
      }
    </style>
  </head>

  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
6

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) which goes into more detail.

7

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 :slight_smile: thankyou [QUOTE=James_Hibbard;5282227][/QUOTE]

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 :slight_smile:

9

i am glad that you liked it :slight_smile: 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: