wap 媒体查询对应iphone手机的大小范围

最新推荐文章于 2025-09-05 10:20:53 发布

转载最新推荐文章于 2025-09-05 10:20:53 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jingzhou/p/5849325.html

本文介绍了一种响应式设计中根据不同屏幕尺寸调整字体大小的方法。通过使用CSS媒体查询，针对不同设备（如iPhone不同型号及大屏设备）设置字体大小和行高，实现良好的阅读体验。

@media screen and (min-width: 320px) and (max-width: 480px){
    /*!*iPhone < 5 Portrait*!*/
    .rad-top{font-size: 12px;line-height: 12px;}

}

@media screen and (min-width: 375px) and (max-width: 627px){
    /*!*iPhone 6*!*/
    .rad-top{font-size: 14px;line-height: 14px;}

}
@media screen and (min-width: 414px) and (max-width: 736px){
    /*!*iPhone 6+ Portrait*!*/
    .rad-top{font-size: 16px;line-height: 16px;}

}
@media screen and (min-width: 737px){
    /*!*大屏*!*/
    .rad-top{font-size: 16px;line-height: 16px;}

}