SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Responsive Design media query doubt

    i am confused between these media queries..please help

    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,873
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

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

    If you do:

    Code CSS:
    @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:

    Code CSS:
    @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. #3
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    If you do:

    Code CSS:
    @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.
    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

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,873
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    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:

    HTML Code:
    <!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:

    HTML Code:
    <!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. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,873
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by moneysharma View Post
    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 article) which goes into more detail.

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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 article) 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

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,873
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    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

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •