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

Question

I'm looking answers for some questions about CSS3 feature - `Media Queries`: Which way is better (for browser due to the performance) for declaring css rules for different resolutions? ``` //this in head: //or this in css file: @media only screen and (max-width: 1024px){ //styles here } ``` 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? 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? If I write rules I should write something like this: ```

Accepted Answer

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

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

Solution

Problem

Related problems