Question

is there some new standard for using media queries. Or perhaps I should say, some new considerations that should be made.

The CSS tricks article doesn’t seem to work very well, as the the ‘smart phone landscape’ seems to highjack everything.

code i’ve used taken direct (with the exception of printing what the screens supposedly are:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.size:after{ content: "smartphone portrait and landscape";}
body{background-color:#111; color:#fff;}
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
.size:after{ content: "smartphone landscape";}
body{background-color:#222; color:#fff;}
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
.size:after{ content: "smartphones portrait";}
body{background-color:#333; color:#fff;}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
.size:after{ content: "ipad protrait and landscape";}
body{background-color:#444; color:#fff;}
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
.size:after{ content: "ipad landscape";}
body{background-color:#555; color:#fff;}
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
.size:after{ content: "iPads portrait";}
body{background-color:#666; color:#000;}
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
.size:after{ content: "desktops and laptops";}
body{background-color:#777; color:#000;}
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
.size:after{ content: "largscreens";}
body{background-color:#888; color:#000;}
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
.size:after{ content: "iPhone 4";}
body{background-color:#999; color:#000;}
}

test : www2.iscotest.com/screen.php

Is there just a working standard set for widescreen, desktop (1024), ipad landscape, ipad portrait, mobile portrait and mobile landscape.

thanks!

Answer 1

Just use min-width and max-width