CSS3 Media Queries在iPhone,iPad 等常用设备的设置方法【转载】

大家对于css3中media属性并不陌生,但是随着一些高视网膜的设备面世,很多情况对于media的不标准的用法也越来越多,我通过查找一些知识结合实践给总结出一些标准的设置的方法。

CSS3 中的 Media Queries 可以让我们设置不同类型的媒体条件,并根据对应的条件,给相应符合条件的媒体调用相对应的样式表。现在最常见的一个例子,就是可以同时给 PC 的大屏幕和移动设备设置不同的样式表。这功能是非常强大的,它可以让我们定制不同的分辨率和设备,并在不改变内容的情况下,制作的网页在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。

常用设备的 CSS3 Media Queries

所有 iPad Media Queries

@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES */}

iPad 横屏

@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES */}

iPad 竖屏

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES */ }

高清屏 iPad Media Queries(即 iPad 3 & 4 的 Media Queries)

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {/* STYLES */}

高清屏 iPad 横屏

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES */}

高清屏 iPad 竖屏

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }

iPad 1 & 2 Media Queries

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES */}

iPad 1 & 2 横屏

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES */}

iPad 1 & 2 竖屏

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES */}

iPad mini 也是和 iPad 1 和 2 一样。

iPhone 5 Media Queries

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* STYLES */}

iPhone 5 横屏

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { /* STYLES */}

iPhone 5 竖屏

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {/* STYLES */ }

iPhone 2G, 3G, 4, 4S Media Queries

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {/* STYLES */}

iPhone 2G-4S 横屏

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { /* STYLES */}

原文链接


yangbai
如果非要用一种东西来记录我得生命历程,我会用朋友!

良好的心里,出众的发挥!

2.8k 声望
43 粉丝
0 条评论
推荐阅读
利用Charles做代理测试电脑上写的H5页面
做H5页面的同学可能经常会遇到一个场景,就是电脑上调试好的页面怎么在手机上访问测试呢? 下面就介绍一种自己经常使用的方式,利用Charles代理软件来实现! 安装Charles 直接去官网下载对应的系统版本安装即可。...

杨佰2阅读 5.8k

还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan35阅读 2.6k评论 2

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan30阅读 3.9k评论 2

封面图
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...

XboxYan31阅读 2.5k评论 2

封面图
由小见大!不规则造型按钮解决方案
今天,有个群友在群里提问,使用 CSS 能否实现下述这个图形:emmm,中间这个酷似三次贝塞尔曲线的造型,使用 CSS 不太好实现。我的建议是切图实现,然而群友要求一定要用 CSS 实现。虽然麻烦,但是这个图形勉强也...

chokcoco17阅读 1.3k

封面图
CSS 如何根据背景色自动切换黑白文字?
在项目中,经常会碰到背景色不确定的场景,为了让内容文字足够清晰可见,文字和背景之间需要有足够的对比度。换句话说,当背景是深色时,文字为白色,当背景是浅色时,文字为黑色,就像这样:

XboxYan19阅读 1.7k

封面图
CSS 如何让auto height完美支持过渡动画?
欢迎关注我的公众号:前端侦探众所周知,高度在设置成auto关键词时是不会触发transition过渡动画的,下面是伪代码 {代码...} 效果如下如果希望展开时有过渡动画,例如这样通常是借助 JS 动态去获取元素的高度(还...

XboxYan17阅读 1.2k评论 2

封面图

良好的心里,出众的发挥!

2.8k 声望
43 粉丝
宣传栏