Setting view port for responsive site
Place the following meta tag into the tag. Viewport for mobile devices like iPhone and iPad. <!-- view port -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- --> |
CSS Media Queries For Common Devices
/* All Smartphones in portrait and landscape ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in landscape ----------- */
@media only screen
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in portrait ----------- */
@media only screen
and (max-width : 479px) {
/* YOUR STYLE GOES HERE */
}
/***** ANDROID DEVICES *****/
/* Android 240 X 320 ----------- */
@media only screen
and (max-width: 241px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in portrait 380 X 685 ----------- */
@media only screen
and (min-width: 375px)
and (max-width: 385px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in Landscape 685 X 380 ----------- */
@media only screen
and (min-width: 680px)
and (max-width: 690px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Portrait 600 X 1024 ----------- */
@media only screen
and (min-width: 595px)
and (max-width: 610px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Landscape 1024 X 600 ----------- */
@media only screen
and (min-width: 1000px)
and (max-width: 1030px){
/* YOUR STYLE GOES HERE */
}
/***** ALL GENERATION IPADS *****/
/* iPads in portrait and landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* YOUR STYLE GOES HERE */
}
/* iPad in landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* YOUR STYLE GOES HERE */
}
/* iPad in portrait----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
/* YOUR STYLE GOES HERE */
}
/***** Retina IPAD 3 & 4*****/
/* Retina iPad 3 & 4 in portrait and landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 & 4 in landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 & 4 in landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/***** IPAD 1 & 2 (ALSO IPAD MINI)*****/
/* iPad 1 & 2 in portrait and landscape ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}
/* iPad 1 & 2 in landscape ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* YOUR STYLE GOES HERE */
}
/* iPad 1 & 2 in portrait ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* YOUR STYLE GOES HERE */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* YOUR STYLE GOES HERE */
}
/* Only iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* YOUR STYLE GOES HERE */
}
Essential css hacks for IE/Win - Quirks
Default paragraphs in this page have yellow background. In any of the following test cases a blue background is set with a special (hack) rule. When the background is blue, the hack is applied.
Note: "All" == IE5+/Win, Op6+, Moz, Saf
Note: "All" == IE5+/Win, Op6+, Moz, Saf
IE7 only
* + html .element { margin-bottom: 10px; }
IE6- (and IE7+ quirks) only
/*\*/ * html selector { property: value; } /**/
/*\*/ * html selector { property: value; } /**/
IE5.5- only
selector { property: value; p\roperty: normal-value; }
selector { property: value; p\roperty: normal-value; }
IE7 standard only
*:first-child+html selector { property: value; }
*:first-child+html selector { property: value; }
All except IE6- and IE7+ quirks
html>body selector { property: value; }
html>body selector { property: value; }
IE6+ quirks and IE5 (= all IE/Win quirks) only
* html selector { property /**/: value; }
* html selector { property /**/: value; }
All except IE6 standards
selector { property /**/: value; }
selector { property /**/: value; }
All except IE5.0
selector { property/**/: value; }
selector { property/**/: value; }
All except IE5.5
selector { property: /**/value; }
selector { property: /**/value; }
Subscribe to:
Posts
(
Atom
)
No comments :
Post a Comment