Ipad、Iphone媒体查询

发表于 | 分类于
字数统计: 422 字 | 阅读时长 ≈ 2

  Js技术每年都在日新月异的更新，那么我们生活中常见的Css呢？是否在Css3之后，已无让你喜爱的特性出现？
  本文内容来自于互联网，仅收录一些个人喜欢的东西，在本博客供自我学习。

Ipad 媒体查询

示例链接

iPad Media Queries

1、iPad Media Queries (所有版本，包括iPad mini)

iPads从第一代到至今，总共有五代，也就是iPad1~iPad5，以及Mini iPad。而且每一代iPad都具有相应的CSS Media Queries。

landscape：横屏，portrait：竖屏

iPad （landscape和portrait）
1
2
3
4
5
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
  /* 样式写在这里 */
}
iPad （landscape）
1
2
3
4
5
6
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
   /* 样式写在这里 */
}
iPad （portrait）
1
2
3
4
5
6
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
  /* 样式写在这里 */ 
}

iPad3和iPad4

iPad3和iPad4具有Retina屏幕技术，如果你想针对Retina屏幕使用@2x的图像，来区别普通屏幕下的显示，那么使用下面的Media Queries会让你很轻松实现。

iPad
1
2
3
4
5
6
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { 
  /* 样式写在这里 */
}

iPad 1 和 iPad 2 Media Queries

上面的满足了高版本，可能你对细节追求的比较高，想让你的Web在低版本的iPad下也能展示的很完美，那么下面的这几段代码能帮助你。

iPad
1
2
3
4
5
6
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){ 
  /* 样式写在这里 */
}

—

iPhone 5 Media Queries

iPhone 5
1
2
3
4
@media only screen and (device-aspect-ratio: 40/71) {
   
}
iPhone 2-4s
1
2
3
4
5
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
  /* 样式写在这里 */
}