iPads和iPhones的Media Queries

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

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

iPad (landscape)

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

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

Retina iPad (landscape)

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-de
剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css-media-queries-for-iPads-and-iPhones.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部