欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css:Media Queries_html/css_WEB-ITnose

程序员文章站 2022-06-09 14:05:58
...
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

  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页面的节点中加入标签,代码如下:

  



相关标签: css:Media Queries