1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 移动端常见的不同苹果手机media query汇总

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

时间:2019-12-06 23:34:32

相关推荐

移动端常见的不同苹果手机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;} 这是为了在手机横屏的时候,弹出一个图片,让浏览者把手机数着看,样式可以自己定义哟*/}

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。