5

I'm looking answers for some questions about CSS3 feature - Media Queries:

  1. Which way is better (for browser due to the performance) for declaring css rules for different resolutions?

    //this in head:
    <link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" />
    
    //or this in css file:
    @media only screen and (max-width: 1024px){
        //styles here
    }
    
  2. What is difference between max-device-width and max-width? Is it only rule addressed for mobile(max-device-width) or desktop(max-width) browsers?

  3. If I write media query rule for tablet with resolution 1280x800 where user can also use portrait/landscape mode, how should it look? I should write rules for max-width: 800px and max-width: 1280px or there is another way?

  4. If I write rules I should write something like this:

    <link ... media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)... />
    

    or instead this two:

    <link ... media="only screen and (max-device-width: 480px) ... />
    <link ... media="only screen and (max-device-width: 1024px) ... />
    



P.S. Please excuse any spelling or grammatical mistakes, English isn't my first language

P.S.S. Before I posted this question I spend a while to search on stackoverflow and didn't find information about this question. If I was wrong and there is similar question I will delete my post.

2
  • Try to split this into 4 questions, individually they can be answered much better. Feb 22, 2013 at 13:30
  • There is some documentation on Mozilla
    – Cerveser
    Feb 13, 2015 at 20:58

2 Answers 2

5
  1. Rules in css file to reduce number of requests (better for performance).

  • max-width is the width of the target display area

  • max-device-width is the width of the device's entire rendering area

The another way I know to target portrait or landscape is to add orientation like this:

/* portrait */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) {
    /* styles here */
}

/* landscape */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) {
    /* styles here */
}

To define a stylesheet for mobile devices with a width between 320 and 480 pixels you have to write:

<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="mobile.css">
2
  • Also which resolutions are most popular. I mean for tablets, phones, desktops. Is any trends in this situation?
    – WooCaSh
    Feb 20, 2013 at 14:19
  • Ask to StatCounter gs.statcounter.com/… (loading can be slow)
    – jjj
    Feb 20, 2013 at 14:55
0

I'am searching for good information about best practices in responsive design and I'll give you an advice.

In This question the developer get into a problem when he use CSS portrait condition and make the keyboard appears when he choose a input text of the document. I'm not sure why but it breaks the portrait condition.

In This website you can find information about better practices when you are creating media query's which I think are the best. Personaly I'll use the Exclusive type of media query in my website.

But by the other hand you could follow This site recomendations. I think that they are right but I prefer to create and use popular device dimentions media query's by myself.

Here is the list:

  • < 480px (which applies to older, smaller smartphone screen sizes)
  • < 768px, which is ideal for larger smartphones and smaller tablets
  • 768px, which applies for everything bigger such as large tablet screens and desktops screens.

Also, these can be used too if you've got the energy and time:

  • <320px, which is great for older small, low res phones
  • 1024px stylesheet for wide screens on desktops.

I hope it help you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.