iPads和iPones的Media Queries

最新推荐文章于 2017-09-17 23:45:25 发布
最新推荐文章于 2017-09-17 23:45:25 发布
阅读量765 收藏
点赞数
分类专栏： css3 文章标签： Media Queries
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cengjingcanghai123/article/details/39157895
版权

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)  { 
  /* 样式写在这里 */
}
 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) {
   /* 样式写在这里 */
}
 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) { 
  /* 样式写在这里 */ 
}
 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) { 
  /* 样式写在这里 */
}
 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) { 
  /* 样式写在这里 */
}
 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) { 
  /* 样式写在这里 */ 
}
 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){ 
  /* 样式写在这里 */
}
 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)  { 
  /* 样式写在这里 */
}
 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) { 
  /* 样式写在这里 */ 
}
 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)  { 
  /* 样式写在这里 */
}
 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)  { 
  /* 样式写在这里 */
}
 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)  { 
  /* 样式写在这里 */ 
}
 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) { 
  /* 样式写在这里 */
}
 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) { 
  /* 样式写在这里 */
}
 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) { 
  /* 样式写在这里 */
}
 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) { 
  /* 样式写在这里 */
}
 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) { 
  /* 样式写这里 */
}
 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) { 
  /* 样式写这里 */ 
}
 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: 2

iPhone 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: 2

iPhone 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。

延伸阅读

▶ Walkthrough007

Apress 2014最新iOS、iphone开发书籍
08-08
Apress Beginning iOS Media App Development (2014).epub Apress Beginning iPhone Development with Swift, Exploring the iOS SDK (2014).epub Apress Beginning iPhone Development, Exploring the iOS SDK 7th ...
Objective-C for Absolute Beginners: iPhone and Mac Programming Made Easy
09-06
iPhone and Mac Programming Made Easy," is designed specifically for those who are new to programming and wish to start developing applications for Apple devices such as iPhones, iPads, and Mac ...
ios开发详细教程, ios代码大全, 苹果系统(ios)架构教程
07-07
As of March 2018, Apple's App Store contains more than 2.1 million iOS applications, 1 million of which are native for iPads.[12] These mobile apps have collectively been downloaded more than 130 ...
HTML5音频：即使离开网站，音乐也不会停止
04-04
我正在使用HTML5制作... 在游戏过程中会运行背景音乐，理想情况下，一旦我导航到另一页，背景音乐便会停止...该逻辑在较旧的iPhone和android上正常运行。但是，在iPhone 4和iPads上，音乐不会停止并继续播放（甚至...
完美的背景图全屏css代码 – background-size:cover?
热门推荐
03-26 4万+
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求，这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕，不留空白区域保持图像的纵横比（图片不变形）图片居中不出现滚动条多浏览器支持 以图片bg.jpg为例 最简单，最高效的方法 CSS3.0 归功于css3.0新增的一个属性background-size，可以简单的实现这个效果，这里用fixed和cente
移动端整体布局-解决ios下fixed定位抖动的问题
05-26 2万+
原文地址：http://www.w3cplus.com/mobile/mobile-terminal-refactoring-mobile-layout.html 一般来说,header和footer部分都为fixed定位，中间的内容区域可滚动。 fixed布局 常规的结构如下： header class="header fixed-top">header> div c
css3实现多行文字超出部分省略号代替
03-09 3995
display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow: hidden;
使用 position: sticky 达到粘性元素区域悬浮效果
07-14 3176
在一些很长的表格中，常常会使用表头悬浮的设计以方便阅读，即在表格离开窗口之前，表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框等元素，也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计。 这种效果一直以来需要通过 JavaScript 实现。不过就在去年，这项结合了 Relative （在屏幕中时） 和 Fixed （移出屏幕时） 的样式效果被提案添加到
CSS3 Object-fit和Object-position
04-06 2062
在响应式设计(RWD)中，令大家最头痛的问题的是图片的自适应处理问题。往往我采取的处理方式是给图片的容器设置一个尺寸，然后给图片设置下面的代码： img { max-width: 100%; height: auto; } 但往往需要处理的只止于此。你可能想要让图像长宽比例来填充他的整个容器，和想重新定位他的中心位置。或者，如果你想按长宽比例响应式调整iframe，你可能
CSS3发光按钮
01-28 1818
@-webkit-keyframes bigAssButtonPulse { from { background-color: #fdfdd3; -webkit-box-shadow: 0 0 25px #fdfdd3; } 50% { background-color: #fffea4; -webkit-box-shadow: 0 0 50px #fffea4; } to { backgr
background-size:cover | contain；
04-12 1479
background-size:cover | contain; 原图 不使用background-size 第一张背景图片：600 × 431第二张背景图片：426 × 600每个元素的大小：350 × 350 background-size:cover; 背景铺满元素 调整背景图片的宽度或高度（较小者），以铺满整个元素保持背景图片的宽高比
使用CSS3开启GPU硬件加速提升网站动画渲染性能
08-11 1363
先来说说遇到的问题： 　　网站本身设计初衷就没有打算支持IE8及以下版本浏览器，并不是因为代码兼容性问题，而是真的不想迁就那些懒得更新自己操作系统和浏览器的用户，毕竟是我自己的网站，所以我说了算！哈哈~ 　　没有了低版本IE6浏览器，就不用顾虑他们的性能问题了，本以为开发会一帆风顺，结果”性能问题”竟然出现在了一直以性能出色著称的Chrome浏览器中。 　　Chrome下的动画比
CSS3 Transform——transform-origin
01-18 1272
在CSS2.1中，我们的页面都是静态的，网页设计师也习惯把它作为页面效果的设计工具。但往往有些页面效果不只是静态的，比如说，如何实际移动一些元素？如何更改元素的外观——旋转或缩放？ 多年来，Web设计师为了给修改页面的外观，都依赖于图片、Flash或JavaScript才能完成。不过，CSS3将要改变设计师这种思维，进入CSS3时代，借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。
总结一些更多的针对webkit的HTML, CSS和Javascript方面的特性.
01-22 918
[html]view plaincopy spanstyle="font-size:14px;border:0px;margin:0px;padding:0px">HTMLspan>,从HTML文档的开始到结束排列: metaname=”viewport”content=”width=device-width,initial-scale=1.0
多屏复杂动画CSS技巧三则
02-02 673
当下CSS3应用已经相当广泛，其中重要成员之一就是CSS3动画。并且，随着CSS动画的逐渐深入与普及，更复杂与细腻的动画场景也如雨后春笋般破土而出。例如上个月做的「企业QQ-新年祝福」活动： 感谢shirley帮忙录制上面的视频，虽然视频内容是手机上的显示效果，但是，这个“企业新年祝福活动”原本只针对桌面端，移动端是后来辅助增强（增加了相当于活动页面UV 5.7%的点击）。而目前大多
CSS3 Gradient Buttons
02-25 645
css3 button多组渐变按钮样式css3 gradient属性制作渐变按钮样式 关闭
css3 box-sizing属性
09-17 539
box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。 content-box，border和padding不计算入width之内 padding-box，padding计算入width内 border-box，border和padding计算入width之内，其实就是怪异模式了~ ie8
上交软院 ipads实验室 面试
最新发布
07-08
感谢您对上交软院ipads实验室的面试兴趣！ 上交软院ipads实验室是一个致力于推动移动应用开发和创新的实验室。在面试中，我们将评估您在以下几个方面的能力和经验： 1. 移动应用开发技能：我们将询问您在移动应用开发方面的知识和技能，包括操作系统、编程语言和开发平台等。我们期望您有一定的移动应用开发经验，并熟悉常见的移动开发框架和工具。 2. 项目经历：我们将询问您在过去参与的移动应用开发项目，了解您在项目中所担任的角色和所取得的成果。请准备一些项目案例，讲述您是如何应对项目挑战和解决问题的。 3. 问题解决能力：我们将提问一些与移动应用开发相关的问题，以评估您的问题解决能力和学习能力。请保持冷静并尽量详细解答问题，展示您的思维和分析能力。 4. 团队合作能力：在实验室中，团队合作是非常重要的。我们将会询问您在过去的团队合作中的经验和角色，以及您与他人合作解决问题的能力。请分享您过去与团队成员一起完成的项目和团队合作中遇到的挑战。 在面试过程中，我们希望能够了解您的技能、经验和潜力，以及您对移动应用开发的热情和专注度。您还可以针对实验室的项目和愿景提出您的问题，以加深相互了解。 祝您面试顺利！如果您有任何疑问，请随时与我们联系。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值