CODEWITHSUNDEEP
cssmedia-queries
WooCaSh
WooCaSh

Reputation: 5212

What is the best practice with media-queries in CSS3?

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.

Upvotes: 5

Views: 7166

Answers (2)

jjj
jjj

Reputation: 1005

  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">

Upvotes: 5

Luis.Andrade
Luis.Andrade

Reputation: 318

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.

Upvotes: 0

Related Questions