SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    media queries question....

    do those lovely CSS3 media queries detect BROWSER win dimensions or SCREEN dimensions?
    (which is a huge difference, of course...)

    thank you..

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    It's kind of a hairier issue than that. I'm still not clear on it all, but each device has a set pixel width that you design for, even if that's not the actual pixel dimension of the screen. For example, the iPhone in portrait mode pretends that it is 320px wide, when in fact is has many more pixels than that (well, the latest ones do ... but to keep things consistent across all models, they all respond to the same media query of screen only and (max-width: 320px) ... which is kind of handy).

    There is a somewhat confusing difference, though, between device viewport and the default layout viewport, which is much wider than the actual device viewport. So you need a meta tag to make the two equal:

    Code:
    <meta name="viewport" width="device-width">
    ... I keep thinking I understand the basics of all this, but each next time I deal with it I'm confused again, so let someone else explain it:

    http://www.quirksmode.org/blog/archi...el_is_not.html

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    One thing I know absolutely for sure because of it's display in my Asus Nexus 7: this code ...

    @media only screen and (max-width: 767px)

    ... will show single-column in my Zurb Foundation app when the device is vertical, and two columns when sideways, when leaving the media queries as-is. This means it will show two columns on an iPad mini and iPad because they are both more than 768px screen width.
    Steve Husting

  4. #4
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    There is a somewhat confusing difference, though, between device viewport and the default layout viewport, which is much wider than the actual device viewport....
    hmmm... this is a bit confusing.. by "default layout viewport" you mean what, exactly? a browser?

    I'm basically starting out with responsive design.. first, am mostly trying to find a good set of media queries...
    what about this one?

    at home I can only test in my MacBook Pro and iPhone3... the media query from this set that the iPhone responds to is this one:

    Code:
    @media only screen 
         and (min-device-width : 320px) 
        and (max-device-width : 480px) {
               ................
    }
    I just realized this pg is kinda old... ;-) so would this media query work for that new Samsung phone? the screens on those are huge..

    also, are there any reliable testers online? the few I have looked at don't work at all.. for example this one and this one;
    mine, a very rudimentary layout for now since I'm just getting started, doesn't look at all like it looks in my iPhone in either one of these testers...
    (and since -- apart from my laptop -- I can only test in iPhone, have media query for smartphone only..)
    in iPhone it looks exactly how I want it to.. in both portrait and landscape..

    thank you...

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maya90 View Post
    this is a bit confusing.. by "default layout viewport" you mean what, exactly? a browser?
    As I said, it's a tricky concept, which benefits from graphics to help explain, so read that link I posted, as it gooes into a lot of detail. (Maybe grab a cup of tea while you read through it. It's worth it.)

    The problem with max-width 480px is that some devices are larger than that, so you need to account for some other situations. If you scale down your browser, for a while (before it hits 480px, the two sections site atop each other at width 50%. You need to deal with that situation too. Just use min-width/max-width, rather than min-device-width/max-device-width too, as recommended in the link I gave.

    Code:
    @media only screen 
    and (min-width : 320px) 
    and (max-width : 480px) {
    }
    Otherwise, what you've done is OK.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    In terms of testing, there are various tools. For iPhone/iPad, apart from the device itself there is the emulators provided with Apple's free developer tools:

    https://developer.apple.com/devcenter/ios/index.action

    Short of that, there are tools like Sauce Labs: https://saucelabs.com/

    And, of course, there's your local phone shop, where you can go and surreptitiously test devices.

  7. #7
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you for your responses... still trying to figure out what the best media queries are.. obviously this varies from layout to layout...

    this site is often touted as one of the best responsive design examples..

    one of their media queries is

    Code:
    
    @media screen and (min-width: 620px) { 
           #contain {margin: 0 auto 10px; width: 93.75%;	  /* 960/1024 */
    }
    

    to set the width of their main wrapper container.....

    that width (620px) does not appear here at all...
    so for what device is this the cut-off? (and what does /* 960/1024 */ refer to, if the media query is 620px??)

    yes I read this page, I had seen it before...
    I'm afraid I still don't get what the "default layout viewport" is... I don't really understand the explanation on this page...

    Now what is the layout viewport? It's the area (in CSS pixels) that the browser uses to calculate the dimensions of elements with percentual width, such as div.sidebar {width: 20%}. It's usually quite a bit larger than the device screen: 980px on the iPhone, 850px on Opera, 800 on Android, etc.
    and they show a diagram of this "default layout viewport" that is much wider than the device.. I don't get this.. and is this something that applies at all to desktop and laptop machines? and if not, why is this an issue only on mobile devices?


    here the explanation of the difference is:

    Sometimes you’ll see developers making calls to device-width or width. 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.
    yeah? and the "width" alone? he only explains what one of them is (the easiest one to understand) he doesn't explain what just "width" is for....;-)

    so: i'm still confused about whether to use device-width or just 'width'..





    one more thing: there's an very poignant comment here:

    ...I cannot help but observe that pages coded in HTML 1 or 2 without CSS exhibit all the attributes of RWD with no designer effort required. The browser will do a fine job on its own if not forced by an appearance-driven designer.

    Once the designer attempts to impose his own preferences on the user, then unnatural acts like RWD are required to maintain usability. Simpler is faster and better.
    (obviously wouldn't be the case if you have floats....;-) but is probably very true for simple layouts
    (although I can't help commenting that with tables you can do "floats" without css... (i.e., elems that are side-by-side, no need for css...;-) ironic to say the least... :~))


    thank you...

  8. #8
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    the iOS simulator is great!!! :-)

    has iPhone & iPad... and you can flip them... it's awesome...

    thank you....

  9. #9
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    PS: so I added more media queries....

    am I doing the right thing so far? ;-)

    thank you.....

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maya90 View Post
    that width (620px) does not appear here at all...
    so for what device is this the cut-off?
    The trick with media rules is to forget about devices and focus on your design. There are far too many devices to cater for, but you can look at your own layout and work out where you need to set breakpoints. That is, at what width does it become impractical for two elements to sit side by side? The site above has obviously decided that at a width of 620px it's best to adjust the layout, so that's what they've done. It's different for each site.

    Looking at your page right now, if you slowly reduce the width of the browser, you'll see the boxes suddenly sit on top of each other, which is fine, but at a smaller width the boxes suddenly fill only half the width of the screen. So you need to test this yourself and make sure you've accounted for the design at each width range.

    As I said, forget about devices, and focus on what your design needs.

  11. #11
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you so much, Ralph..

    could you pls look again?

    I just dragged bottom right corner of browser window (both FF & Chrome); I don't see what you see..

    the boxes resize and get stacked as soon as it reaches the "threshold"....

    thank you.....

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    From about 740px and down to around 470px this is the view (except that about half way the background goes white):

    maya.jpg

  13. #13
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh brother.. I cannot reproduce this at all... just tried again, on Chrome & FF...

    just goes to show how tricky this is..

    in mine, as soon as the header changes from min width:620px; to

    min width:768px;
    min width:620px;


    the boxes chg to width 100% and get stacked....


    ok, thank you Ralph....

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    I wonder how you are testing this. In all my browsers, as you gradually narrow them down (by pulling the bottom left corner) you see the layout gradually change, including what I posted. It's a very handy way to test the page.

  15. #15
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    yes that's what I'm doing (only am on a mac, so can only resize browser window from lower right corner...;-) but that's the same thing I'm doing...

    right now took out the "max" part of the media queries.. (since you mention at beginning of this thread that that could be a problem...) and oh brother.. now find have to specify everything in all media queries.... if something has to appear only under one media query hiding it on default is not enough.. I have to hide all the others (using their id's) under all other media queries...

    (perfect example in my page is h1 & h2.... saying h1 {display:none} in default CSS is not enough; afterwards in all media queries I have to hide all the others, using their id's... (or am I missing something?)

    orig is still here; new one, where I took out "max" from media queries is this one.....

    thank you..

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    I'm mobile atm, so can't check the new version. I don't like the idea of display none for elements, but anyhow, you would have to set something different in each query, yes.

    A better approach to all this might be to go the 'mobile first' route, where your default styles stack the divs vertically, and then just float them on bigger screens.

  17. #17
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you very much for your help, Ralph.. I appreciate it even more given you're now the temp admin for this forum... :-)

    I think I need to buy a book.. any of these jump out at you? I know there are a lot of good tutorials online for everything, but when I need to seriously learn something I like to get a book (as long as it's good.. I've bought bad books too...;-) it's how I learned ajax and jquery, just went thru the whole book (or almost the whole book...;-)

    I will attempt to start over now, and do what you suggested (make the stuff for the smallest screens the default and go from there....)

    thank you again...

  18. #18
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh -- and I have two more quick questions:

    1) what exactly is this for?

    Code:
    @media screen and (max-device-width: 810px) { * { -webkit-text-size-adjust: 100%; } }

    2) what is this tag for?


    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    I found both of these at bostonglobe.com, but I see them everywhere....

    thank you...

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maya90 View Post
    any of these jump out at you?
    Probably any one of them would be fine, but the only one I've read is Marcotte's short book on the subject. In a way, it's not really a big subject, but just a small aspect of CSS, so Marcotte's short book may be all that's needed.

    Quote Originally Posted by maya90 View Post
    Code:
    @media screen and (max-device-width: 810px) {
    	* { -webkit-text-size-adjust: 100%; }
    }
    Devices like iPhone sometimes decide to resize parts of your text for 'optimal viewing' or something, but usually it just makes an annoying mess of your text and layout, so this rule stops it happening. Mind you, I prefer to write it as:

    Code:
    body { -webkit-text-size-adjust: 100%; }

    2) what is this tag for?
    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    It's some kind of message to IE to behave in a certain way—I don't really understand it—but I've seen it cause problems around here. The only message I like to send to IE is ** **** ******** <profanity deleted>.

    I wouldn't bother with it, personally, but it's up to you. I'm sure its purpose must be explained somewhere, but I'm not that interested.

  20. #20
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    so how is this, Ralph? :-)
    (main breaking point is from portrait to landscape on tablets... maybe not too good usability-wise, but I did it just as an exercise...)

    I think I'm getting the knack of this.... ;-) I just have one question... is there a way, where the boxes are side-by-side and floated, to distribute them evenly across the width of their container?

    this is a very useful page.. but am a bit confused about what he says about the margins.. I set the margins for the boxes in %ges here, but they're still not evenly distributed... is there a way to do this (with just CSS, no JS? ;-)

    thank you...

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maya90 View Post
    so how is this
    Much nicer. It accounts for every screen size, which is great.

    main breaking point is from portrait to landscape on tablets...
    That seems fine to me. Gives people choices.

    maybe not too good usability-wise, but I did it just as an exercise...)

    is there a way, where the boxes are side-by-side and floated, to distribute them evenly across the width of their container?
    Yes, several ways. If you just have two, I would tend to float them left and right. These days, the easiest way (especially with more than two boxes) is to give them display: table-cell and their container display: table.

    am a bit confused about what he says about the margins.. I set the margins for the boxes in %ges here
    The only left/right % margin that has any "evenness" to it is "auto". Other margins, like 1%, will just put a 1% margin around the element, but not actually do any other kind of distribution. You'd have to have all left-right measurements—including margins—set in %, and have them all equal up to 100%. But that can be dicey, as the browser may not calculate the screen px as you hope, and one element might end up dropping. That's why I prefer floating left and right for two boxes, and just having a gap between them.

  22. #22
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    ok, doing a lot of progress here now, I think..... :-)
    (even added a responsive image...)

    I really have learned a lot.... like the key to getting elements distributed evenly across a container of course is using percentages, i.e., the Marcotte formula, for the margins too, not just for the widths of the elements.. you calculate the margins the same way you calculate the widths of the elements... and if you want the top & bottom mgs to be the same as the gutter spaces on the sides, you have to use %ges for top & bottom mgns too... (and, just like with conventional layouts, I try to avoid padding as much as I can (esp left and right padding), and well, there are issues with padding in these calculations too, of course....;-)

    here are two more examples...

    one sidebar
    two sidebars

    I find this entire approach a bit daunting (it's technically not too hard, but it's much more code-intensive.. I mean talk about hand-coding.. also the calculations.. I have always done calculations in an Excel spreadsheet when doing conventional layouts (to make sure all my widths add up to the width of a container, etc), so having to do calculations is nothing new to me.. and I now have formulas in Excel for doing doing these rd calculations.. I also add up all the percentages (results of the formula) to make sure they all add up to 100%, etc, I have always liked playing with Excel formulas, so np...

    but I can see how this responsive design approach can easily increase the time it takes to get projects done, etc (and the complexity of the work...)

    and these simple layouts I'm doing here are nothing.. am trying to imagine a real-life situation with a complex layout.... yikes... (but OTOH layouts will needs have to be simpler and less complex for responsive design, IMHO.. for budgetary reasons if nothing else... here's some of the CSS for the page w/two sidebars:


    Code:
    	
    	#main  { width:52.51623377%; margin:0.811688312% 0.811688312% 0 0.811688312%;  float:left; } 
    	#left  { width:21.1038961%;  margin:0.811688312% 0.811688312% 0 0; float:left;  } 
    	#right { width:23.13311688%; margin:0.811688312% 0.811688312% 0.811688312% 0; float:right; } 
    	
    	#main p  { margin:1.545595054%; } 
    	#left p  { margin:3.846153846%; } 
    	#right p { margin:3.50877193%; }
    oh brother.... (maybe in the future IDEs will come with built-in widgets to do these calculations? if I had time I would write my own little JS program.. (something like that probably exists, right? )

    and I need to learn how to do responsive menus too... best approach is simply JS DOM-scripting, I suppose? would like to find a method w/o a plugin.. at least at first...

    again, thank you very much for your help...

  23. #23
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh, I forgot: using margin auto for left & right margins for the divs didn't work at all.. it was like doing margin:0;
    maybe margin:auto doesn't work with floated elements (or maybe it only works if it's just one element in containing element? I don't know..)

    thank you....

  24. #24
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    PS: bg-imgs (esp no-repeat) can go right out the window for responsive design... no way those resize on window resize like imgs in img-tags do... too bad...

  25. #25
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maya90 View Post
    maybe in the future IDEs will come with built-in widgets to do these calculations?
    I'm not convinced it's a very good idea to have all those numbers afte the decimal points. Some browsers will find those very hard to calculate (some older ones ignore all but the first 1 or 2, I believe). Why not just have whole numbers?

    and I need to learn how to do responsive menus too... best approach is simply JS DOM-scripting, I suppose? would like to find a method w/o a plugin.. at least at first...
    There are lots of approaches to this emerging. Some hide the main menu at small widths and just provide a single menu link. That link either goes to a separate page with the menu on it, or the Menu link is a drop list that appears when the link is activated.



    [QUOTE=maya90;5384591]oh, I forgot: using margin auto for left & right margins for the divs didn't work at all.[quote]

    margin : auto is really for centering an element in its own space ... so it's no use when you want it to sit beside another element.


    Quote Originally Posted by maya90 View Post
    PS: bg-imgs (esp no-repeat) can go right out the window for responsive design... no way those resize on window resize like imgs in img-tags do... too bad...
    You can do that with CSS3, which works in modern browsers. There is a whole new bunch of options, like background-size: cover. That makes the background image just fill the background of the element. Read more here: http://www.css3.info/preview/background-size/


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
  •