特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
Responsive设计在现代Web设计中可谓是越来越流行,但很同学们并未理解其真正的设计概念,往往把Responsive视为一种自适应布局。当然有很多同学也在尝试动写Responsive的案例,但如何取其断点左右纠结,如何设置哪几个断点?又从何入手?
Responsive中的断点都依赖于CSS3的Media Queries来决断。曾在CSS3 Media Queries模板、使用em单位创建CSS3的Media Queries和iPads和iPones的Media Queries有过这方面的介绍。今天特意根据一些Responsive框架整理了一些常见的Media Queries片段,以供大家参考:
CSS3 Media Queries片段
在这里主要分成三类:移动端、PC端以及一些常见的响应式框架的Media Queries片段。
移动端Media Queries片段
iPhone5
@media screen and (device-aspect-ratio: 40/71) {} 或者: @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){}
iPhone 5 In Portrait & Landscape
@media only screen and (min-device-width : 320px) and (max-device-width : 568px){ // CSS Style }
iPhone 5 In Landscape
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape){ // CSS Style }
iPhone 5 In Portrait
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait){ // CSS Style }
iPone4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {}
iPhone 3G
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1){}
iPhone
/*Landscape*/ @media screen and (max-device-width: 480px) {} /*Portrait*/ @media screen and (max-device-width: 320px) {}
Blackberry Torch
@media screen and (max-device-width: 480px) {}
Samsung S3
@media only screen and (-webkit-device-pixel-ratio: 2) {}
Google Nexus 7
@media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {}
Samsung Galaxy S3
@media only screen and (-webkit-device-pixel-ratio: 2) {}
Samsung Galaxy S2
@media screen and (device-width: 320px) and (device-height: 533px) and (-webkit-device-pixel-ratio: 1.5) {}
Galaxy Tab 10.1
/*Landscape*/ @media (max-device-width: 1280px) and (orientation: landscape) {} /*Portrait*/ @media (max-device-width: 800px) and (orientation: portrait) {}
iPad In Portrait & Landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){ // CSS Styles }
iPad In Landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){ // CSS Styles }
iPad In Portrait
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){ // CSS Styles }
Retina iPad I
如需转载,烦请注明出处:https://www.w3cplus.com/css3/media-query-snippets.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!