移动端常见的不同苹果手机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汇总相关推荐

html select ios 闪屏,移动端常见的兼容性问题.md
# 移动端常见的兼容性问题 ###### 1. meta 基础知识点如下 ``` // 启动或禁用自动识别页面中的电话号码 // 启动或禁用自动识别邮箱地址 // 设置 Web 应用是否以全屏模式运行 ...
css3 media query orientation,CSS3之media query
现在响应式设计应该是码农标配了,今天就学习学习响应式的重量级大杀器 -- media query 语法 media_query_list: [, ]* media_query: [[only | no ...
CSS之media Query
CSS3中的Media Queries增加了更多的媒体查询,同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件,如果媒体符合相应的条件,那么就会调用对应的样式表.换句简单的说," ...
android oneshot自动播放bug,移动端常见bug汇总001
前言本文是摘录整理了移动端常见的一些bug以及解决方案,第一篇,后面还会有持续的文章更新整理. 点击样式闪动 Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个 ...
CSS3 Media Query 响应式媒体查询
在CSS中,有一个极其实用的功能:@media 响应式布局.具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分.通过响应式布局,可以达到只使用单一文件提供多平台的 ...
201509280825_《css3——media query整理2》
1.Smartphones (竖板和横板) @media only screen and (min-device-width : 320px) and (max-device-width : 480p ...
Media Query在SAP Spartacus里的用途
Media queries are useful when you want to modify your site or app depending on a device's general ty ...
CSS3 Media Query：移动 Web 的完美开端
CSS3 Media Query:移动 Web 的完美开端 Introduction 移动时代,是任何 Web 设计与开发者都不能忽视的一个时代,总有一天,你设计的东西将被显示在两种屏幕上,桌面大屏幕 ...
纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
纯CSS实现移动端常见布局--高度和宽度挂钩的秘密不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...

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

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

最新文章

热门文章