@media only screen 手机端适配判断

最新推荐文章于 2026-05-16 05:17:38 发布

原创最新推荐文章于 2026-05-16 05:17:38 发布 · 8.5k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#自适应 #iPhone X适配 #@media

css 同时被 2 个专栏收录

3 篇文章

订阅专栏

html

1 篇文章

订阅专栏

本文介绍了如何使用@media only screen进行手机端屏幕适配，特别关注了iPhone 5, X, Plus系列及三星Galaxy S5等设备的屏幕尺寸。强调了absolute和relative定位的运用，并提醒将@media查询置于需要修改样式的样式之后，避免不规范的写法。" 112411913,10535617,图像标注技术详解：从2D边框到语义分割,"['计算机视觉', '图像处理', '深度学习', '数据标注', '人工智能应用']

做好屏幕自适应，一般只需要注意iPhone5，x，plus,等问题，注意使用absolute，relative

/*iphone 6,7,8plus screen-width:414px */

@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3) {}

/*iphone X screen-width:375px, screen-hight: 812px */

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {}

/*iphone 5,5E screen-height:568px*/

  @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2) {}

/*iphone 4 screen-width:320px*/

@media only screen and (min-width: 320px) and (max-width: 360px) {}

/*三星Galaxy S5 screen-width:360px*/

@media only screen and (min-width: 360px) and (max-width: 375px) {}

/*iphone 6 screen-width:375px*/

@media only screen and (min-width: 375px) and (max-width: 414px) {}

/*iphone 6plus screen-width:414px*/

@media only screen and (min-width: 414px) and (max-width: 768px) {}

/*iPad Mini screen-width:768px*/

@media only screen and (min-width: 768px){}

注意@media only screen写在需要操控的样式后面，对已声明样式才可以重新赋予新样式，媒体查询@media写在style靠前是不规范的写法，切记。

如果懒得不愿动手可直接将@media的代码放置style尾部。

参考文章：

https://www.cnblogs.com/iovec/p/7700733.html