移动端常见的不同苹果手机media query汇总

在做手机网站的时候，我经常用百分比布局，但是经常在不同的手机显示的不同

比如说，一样的东西，在iphone4(s)、5(s)、6、plus中都会有不同显示

有时候也想有为了某个手机单独的做一些效果，来满足不同客户的要求

这时候，最方便的，我觉得应该是css3的 media query 而不是用javascript来判断

吼吼。。。真是方便极了！！

下面的，是我汇总的一些常用 media  query 代码，希望有帮助~  上干货！！

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */ } @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */ } @media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */ } @media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6+ */ } @media all and (orientation:landscape){ /* body {overflow:hidden;}.onResize {display:block;position:fixed;top:0;left:0;width:100%;z-index:999;background:url(../images/bodybg.jpg) #ccc center repeat;}.onResize img {width:50%;margin:10% auto;display:block;} 这是为了在手机横屏的时候，弹出一个图片，让浏览者把手机数着看，样式可以自己定义哟 */}

这就是常用的几个电话，其他的我再慢慢搜集~

 

转载于:https://www.cnblogs.com/Sinhtml/p/4846295.html

总结

以上是生活随笔为你收集整理的移动端常见的不同苹果手机media query汇总的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。