/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
} -------------------------------- Other Media Queries /* if height is between 960 and 1024 */ @media screen and (max-width: 1280px) and (max-height:1024px){ #change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px; background-color:yellow; height:100px; width:350px; text-indent:100px;} } /* if height is between 720 and 960 */ @media screen and (max-width: 1280px) and (max-height:960px){ #change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px; background-color:green; height:100px; width:350px; text-indent:100px; color:yellow;} } / if height is between 0 and 720 */ @media screen and (max-width: 1280px) and (max-height:720px){ #change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px; background-color:pink; height:100px; width:350px; text-indent:100px; color:black;} } @media screen and (max-width: 800px) and (max-height:600px){ #change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px; background-color:blue; height:100px; width:350px; text-indent:100px; color:white;} }
--------------------------------
Of course, you might not want all your responsive design styles inside one huge stylesheet. If that’s the case, you can serve alternative stylesheets using the same queries as attributes on your link elements.
<head>
<link rel="stylesheet" href="smartphone.css"
media="only screen and (min-device-width : 320px)
and (max-device-width : 480px)">
<link rel="stylesheet" href="smartphone-landscape.css"
media="only screen and (min-width : 321px)">
<link rel="stylesheet" href="smartphone-portrait.css"
media="only screen and (max-width : 320px)">
<link rel="stylesheet" href="ipad.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)">
<link rel="stylesheet" href="ipad-landscape.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)">
<link rel="stylesheet" href="ipad-portrait.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)">
<link rel="stylesheet" href="widescreen.css"
media="only screen and (min-width : 1824px)">
<link rel="stylesheet" href="iphone4.css"
media="only screen
and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)">
</head>
from: http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/-0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0-
@media (min-width:768px) and (max-width:979px){} @media (max-width:767px){} @media (max-width:480px){} @media (min-width:1200px){}@media (max-width:979px){} @media (min-width:980px){} -0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0--0-
No comments:
Post a Comment