Geek asks and answers

What is the best practice with media queries in CSS3?

I am looking for answers to some questions about the CSS3 function - : Media Queries

  • What is the best way (for the browser due to 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
}

  • What is the difference between and ? Is this just a rule addressed to mobile ( ) or desktop ( ) browsers? max-device-width max-widthmax-device-widthmax-width

  • If I write a rule for a media processor for a tablet with a resolution 1280x800where the user can also use portrait / landscape mode, what should it look like? Should I write rules for max-width: 800pxand max-width: 1280pxor is there another way?

  • If I write the rules, I should write something like this:

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

    or instead two:

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


</" > ,

P.S.S. , stackoverflow . , , .

+5
2

  • css ( ).

    • max-width -

    • max-device-width -

3. , , - orientation :

/* 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 */
}

4. 320 480 , :

<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="mobile.css">

//1 , < 6 . , , .

+3

, .

, CSS , . , , .

- -, , , . Personaly - -.

, , This site. , , .

:

  • < 480 ( )
  • < 768px, .

  • 768px, , .

, , :

  • < 320px, .

  • 1024px .

, .

0

More articles:


All Articles