Css: Media Queries, cssmediaqueries

Css: Media Queries, cssmediaqueries

From: http://www.w3.org/TR/css3-mediaqueries/

Https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Https://developer.mozilla.org/en-US/docs/Web/CSS/@media? Redirectlocale = en-US & redirectslug = CSS % 2F % 40 media

Http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml

 

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /><link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /><link rel="stylesheet" type="text/css"   href="android.css" media="only screen and (max-width: 480px)" /><link rel="stylesheet" type="text/css"   href="desktop.css" media="screen and (min-width: 481px)" />

IPhone

/* ----------- iPhone 4 and 4S ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 320px)   and (max-device-width: 480px)  and (-webkit-min-device-pixel-ratio: 2) {}/* Portrait */@media only screen   and (min-device-width: 320px)   and (max-device-width: 480px)  and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait) {}/* Landscape */@media only screen   and (min-device-width: 320px)   and (max-device-width: 480px)  and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape) {}/* ----------- iPhone 5 and 5S ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 320px)   and (max-device-width: 568px)  and (-webkit-min-device-pixel-ratio: 2) {}/* Portrait */@media only screen   and (min-device-width: 320px)   and (max-device-width: 568px)  and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait) {}/* Landscape */@media only screen   and (min-device-width: 320px)   and (max-device-width: 568px)  and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape) {}/* ----------- iPhone 6 ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 375px)   and (max-device-width: 667px)   and (-webkit-min-device-pixel-ratio: 2) { }/* Portrait */@media only screen   and (min-device-width: 375px)   and (max-device-width: 667px)   and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait) { }/* Landscape */@media only screen   and (min-device-width: 375px)   and (max-device-width: 667px)   and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape) { }/* ----------- iPhone 6+ ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 414px)   and (max-device-width: 736px)   and (-webkit-min-device-pixel-ratio: 3) { }/* Portrait */@media only screen   and (min-device-width: 414px)   and (max-device-width: 736px)   and (-webkit-min-device-pixel-ratio: 3)  and (orientation: portrait) { }/* Landscape */@media only screen   and (min-device-width: 414px)   and (max-device-width: 736px)   and (-webkit-min-device-pixel-ratio: 3)  and (orientation: landscape) { }

Galaxy Phones

/* ----------- Galaxy S3 ----------- *//* Portrait and Landscape */@media screen   and (device-width: 320px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 2) {}/* Portrait */@media screen   and (device-width: 320px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 2)   and (orientation: portrait) {}/* Landscape */@media screen   and (device-width: 320px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 2)   and (orientation: landscape) {}/* ----------- Galaxy S4 ----------- *//* Portrait and Landscape */@media screen   and (device-width: 320px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3) {}/* Portrait */@media screen   and (device-width: 320px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3)   and (orientation: portrait) {}/* Landscape */@media screen   and (device-width: 320px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3)   and (orientation: landscape) {}/* ----------- Galaxy S5 ----------- *//* Portrait and Landscape */@media screen   and (device-width: 360px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3) {}/* Portrait */@media screen   and (device-width: 360px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3)   and (orientation: portrait) {}/* Landscape */@media screen   and (device-width: 360px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3)   and (orientation: landscape) {}

HTC Phones

/* ----------- HTC One ----------- *//* Portrait and Landscape */@media screen   and (device-width: 360px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3) {}/* Portrait */@media screen   and (device-width: 360px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3)   and (orientation: portrait) {}/* Landscape */@media screen   and (device-width: 360px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3)   and (orientation: landscape) {}

Nexus Phones

/* ----------- Nexus 4 ----------- *//* Portrait and Landscape */@media screen   and (device-width: 384px)   and (device-height: 592px)   and (-webkit-device-pixel-ratio: 2) {}/* Portrait */@media screen   and (device-width: 384px)   and (device-height: 592px)   and (-webkit-device-pixel-ratio: 2)  and (orientation: portrait) {}/* Landscape */@media screen   and (device-width: 384px)   and (device-height: 592px)   and (-webkit-device-pixel-ratio: 2)  and (orientation: landscape) {}/* ----------- Nexus 5 ----------- *//* Portrait and Landscape */@media screen   and (device-width: 360px)   and (device-height: 592px)   and (-webkit-device-pixel-ratio: 3) {}/* Portrait */@media screen   and (device-width: 360px)   and (device-height: 592px)   and (-webkit-device-pixel-ratio: 3)  and (orientation: portrait) {}/* Landscape */@media screen   and (device-width: 360px)   and (device-height: 592px)   and (-webkit-device-pixel-ratio: 3)  and (orientation: landscape) {}

IPads

/* ----------- iPad mini ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (-webkit-min-device-pixel-ratio: 1) {}/* Portrait */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (orientation: portrait)   and (-webkit-min-device-pixel-ratio: 1) {}/* Landscape */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (orientation: landscape)   and (-webkit-min-device-pixel-ratio: 1) {}/* ----------- iPad 1 and 2 ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (-webkit-min-device-pixel-ratio: 1) {}/* Portrait */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (orientation: portrait)   and (-webkit-min-device-pixel-ratio: 1) {}/* Landscape */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (orientation: landscape)   and (-webkit-min-device-pixel-ratio: 1) {}/* ----------- iPad 3 and 4 ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (-webkit-min-device-pixel-ratio: 2) {}/* Portrait */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (orientation: portrait)   and (-webkit-min-device-pixel-ratio: 2) {}/* Landscape */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (orientation: landscape)   and (-webkit-min-device-pixel-ratio: 2) {}

Galaxy Tablets

/* ----------- Galaxy Tab 10.1 ----------- *//* Portrait and Landscape */@media   (min-device-width: 800px)   and (max-device-width: 1280px) {}/* Portrait */@media   (max-device-width: 800px)   and (orientation: portrait) { }/* Landscape */@media   (max-device-width: 1280px)   and (orientation: landscape) { }

Nexus Tablets

/* ----------- Asus Nexus 7 ----------- *//* Portrait and Landscape */@media screen   and (device-width: 601px)   and (device-height: 906px)   and (-webkit-min-device-pixel-ratio: 1.331)   and (-webkit-max-device-pixel-ratio: 1.332) {}/* Portrait */@media screen   and (device-width: 601px)   and (device-height: 906px)   and (-webkit-min-device-pixel-ratio: 1.331)   and (-webkit-max-device-pixel-ratio: 1.332)   and (orientation: portrait) {}/* Landscape */@media screen   and (device-width: 601px)   and (device-height: 906px)   and (-webkit-min-device-pixel-ratio: 1.331)   and (-webkit-max-device-pixel-ratio: 1.332)   and (orientation: landscape) {}

Kindle Fire

/* ----------- Kindle Fire HD 7" ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 800px)   and (max-device-width: 1280px)   and (-webkit-min-device-pixel-ratio: 1.5) {}/* Portrait */@media only screen   and (min-device-width: 800px)   and (max-device-width: 1280px)   and (-webkit-min-device-pixel-ratio: 1.5)   and (orientation: portrait) {}/* Landscape */@media only screen   and (min-device-width: 800px)   and (max-device-width: 1280px)   and (-webkit-min-device-pixel-ratio: 1.5)   and (orientation: landscape) {}/* ----------- Kindle Fire HD 8.9" ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 1200px)   and (max-device-width: 1600px)   and (-webkit-min-device-pixel-ratio: 1.5) {}/* Portrait */@media only screen   and (min-device-width: 1200px)   and (max-device-width: 1600px)   and (-webkit-min-device-pixel-ratio: 1.5)   and (orientation: portrait) {}/* Landscape */@media only screen   and (min-device-width: 1200px)   and (max-device-width: 1600px)   and (-webkit-min-device-pixel-ratio: 1.5)   and (orientation: landscape) {}

Laptops

/* ----------- Non-Retina Screens ----------- */@media screen   and (min-device-width: 1200px)   and (max-device-width: 1600px)   and (-webkit-min-device-pixel-ratio: 1) { }/* ----------- Retina Screens ----------- */@media screen   and (min-device-width: 1200px)   and (max-device-width: 1600px)   and (-webkit-min-device-pixel-ratio: 2)  and (min-resolution: 192dpi) { }

Apple Watch

/* ----------- Apple Watch ----------- */@media  (max-device-width: 42mm)  and (min-device-width: 38mm) { }

Moto 360 Watch

/* ----------- Moto 360 Watch ----------- */@media   (max-device-width: 218px)  and (max-device-height: 281px) { }

　　

 

The browser Cache mechanism is mainly the Cache mechanism defined by the HTTP protocol (such as Expires and Cache-control ). However, there is also a non-HTTP cache mechanism. For example, with the HTML Meta tag, Web developers can add the <meta> tag to the 
<!-- HTTP 1.1 --><meta http-equiv="pragma" content="no-cache"><!-- HTTP 1.0 --><meta http-equiv="cache-control" content="no-cache"><!-- Prevent caching at the proxy server --><meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />