你的位置:首页 > 网页设计

[网页设计]css:Media Queries


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%40media

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)" />

  iPhones

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

  

 

浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires; Cache-control等)。但是也有非HTTP协议定义的缓存机制,如使用HTML Meta 标签,Web开发者可以在HTML页面的<head>节点中加入<meta>标签,代码如下:
<!-- 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" />