iPads和iPones的Media Queries
来源:互联网 发布:装小蜜 知乎 编辑:程序博客网 时间:2024/05/01 22:20
CSS3 Media Queries是一个强大的媒体查询功能,他的出现使用我们的站点可以随着不同的设备展现出不同的样多风格。紧随着Responsive设计的出现,Media Queries的功能是越来越得到前端人员的亲眯。
我也不另外,跟着这股时尚流行风,从接触到学习,紧接的到应用,对这个属性有了基本上的了解和实战经验。为了大家方便使用Media Queries,W3cplus通过互联网的搜集整理了一份CSS3 Media Queries模板。随着移动端上的应用越来越多,特别是苹果公司的系列产品型号的增加,给前端人员对Media Queries的运用带些许的麻烦。为了解决这个麻烦,在互联网上搜集了相关的资料,专门针对苹果的iPads和iPhones的Media Queries模板,希望这些模板能帮助大家减少在网上查找的时间。
iPad Media Queries
1、iPad Media Queries (所有版本,包括iPad mini)
iPads从第一代到至今,总共有五代,也就是iPad1~iPad5,以及Mini iPad。而且每一代iPad都具有相应的CSS Media Queries。这些代码能让你在的代码在iPads下更完美。
iPad (landscape和portrait)横屏和竖屏
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* 样式写在这里 */}iPad (landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* 样式写在这里 */}iPad (portrait)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* 样式写在这里 */ }2、iPad3和iPad4
iPad3和iPad4具有Retina屏幕技术,如果你想针对Retina屏幕使用@2x的图像,来区别普通屏幕下的显示,那么使用下面的Media Queries会让你很轻松实现。
Retina iPad (portrait 和 landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)and (-webkit-min-device-pixel-ratio: 2) { /* 样式写在这里 */}Retina iPad (landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)and (-webkit-min-device-pixel-ratio: 2) { /* 样式写在这里 */}Retina iPad (portrait)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)and (-webkit-min-device-pixel-ratio: 2) { /* 样式写在这里 */ }3、iPad 1 和 iPad 2 Media Queries
上面的满足了高版本,可能你对细节追求的比较高,想让你的Web在低版本的iPad下也能展示的很完美,那么下面的这几段代码能帮助你。
iPad 1 有 iPad 2 (portrait 和landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){ /* 样式写在这里 */}iPad 1 有 iPad 2 (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 有 iPad 2 (portrait)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) { /* 样式写在这里 */ }
iPad mini Media Queries
使用Media Queries还能帮助我们区分iPad和iPad mini,具体的看下面的代码
iPad mini (portrait 和 landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)and (-webkit-min-device-pixel-ratio: 1) { /* 样式写在这里 */}
iPad mini (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 mini Resolution
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)and (-webkit-min-device-pixel-ratio: 1) { /* 样式写在这里 */ }iPad mini (portrait)
Screen Width = 768px (CSS Pixels)Screen Height = 1024px (CSS Pixels)Screen Width = 768px (Actual Pixels)Screen Height = 1024px (Actual Pixels)Device-pixel-ratio: 1
iPhone Media Queries
1、iPhone 5 Media Queries
iPhone 5 (portrait 和 landscape)
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { /* 样式写在这里 */}iPhone 5 (landscape)
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { /* 样式写在这里 */}iPhone 5 (portrait)
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { /* 样式写在这里 */}
2、iPhone 2G, 3G, 4, 4S Media Queries
iPhone 2G-4S (portrait 和 landscape)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* 样式写在这里 */}iPhone 2G-4S (landscape)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) { /* 样式写这里 */}iPhone 2G-4S (portrait)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) { /* 样式写这里 */ }iPhone 5 Resolution
Screen Width = 320px (CSS Pixels)Screen Height = 568px (CSS Pixels)Screen Width = 640px (Actual Pixels)Screen Height = 1136px (Actual Pixels)Device-pixel-ratio: 2iPhone 4/4S Resolution
Screen Width = 320px (CSS Pixels)Screen Height = 480px (CSS Pixels)Screen Width = 640px (Actual Pixels)Screen Height = 960px (Actual Pixels)Device-pixel-ratio: 2iPhone 2G/3G/3GS Resolution
Screen Width = 320px (CSS Pixels)Screen Height = 480px (CSS Pixels)Screen Width = 320px (Actual Pixels)Screen Height = 480px (Actual Pixels)Device-pixel-ratio: 1
上面Media Queries主要是针对于苹果中的iPad和iPhone设备,而且使用的是px为计算单位,大家也可以将上面的px代码转换成em,详细的可以看看使用em单位创建CSS3的Media Queries。
特别声明:本文中展示的代码是由@stephentgilbert搜集与整理,详细可以点击CSS Media Queries for iPads & iPhones
如需转载,烦请注明出处:http://www.w3cplus.com/css3/css-media-queries-for-iPads-and-iPhones.html
- iPads和iPones的Media Queries
- iPads和iPones的Media Queries
- CSS3 Media Queries在iPhone4和iPad上的运用
- CSS3 Media Queries在iPhone4和iPad上的运用
- 响应式Web设计:Media Queries和Viewport的困惑
- CSS之Responsive设计和CSS3 Media Queries的结合
- media queries
- Media Queries
- Media Queries
- media queries的书写顺序问题
- 实践 HTML5 的 CSS3 Media Queries
- 响应式Web设计:Media Queries和Viewport的区别和用法
- [CSS3]CSS3 Media Queries在iPhone4和iPad上的运用
- 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
- 学习之响应式Web设计:Media Queries和Viewports
- 学习之响应式Web设计:Media Queries和Viewports
- CSS3 Media Queries详细介绍和使用实例
- CSS3 Media Queries
- Centos网站服务器使用DropBox定时备份方案
- 百度定位不成功后 android系统4.0.1不兼容 去掉option.setLocationNotify 就好了
- Windows下写Hadoop MapReduce程序
- 优惠券码生成
- mysql彻底卸载-增加远程权限-修改root密码
- iPads和iPones的Media Queries
- HDU - 3336 Count the string
- 中兴通讯宋国栋:IMS全业务运营部署探讨
- 基于rsync同步算法的文件同步系统JAVA实现(一)——项目介绍
- cisco路由器如何查看内网流量情况
- alter tablespace
- ERROR at line 206: Unknown command '\''.解决办法
- 非类型模板形参取数组的维数
- 对数的性质及推导