平板、手机、电脑分别如何设置css自适应@media screen and
针对 iPad、手机和电脑的媒体查询（@media screen）设置需根据设备屏幕尺寸和特性进行适配。以下是具体分类及推荐参数，结合主流设备的常见断点：
一、手机（iPhone 及主流手机设备）
1.通用手机断点
@media screen and (max-width: 480px) { /* 适用于大部分手机（如 iPhone 5/6/7/8 等） */ }
iPhone 具体型号适配
iPhone 5/SE/早期机型：
@media screen and (min-device-width: 320px) and (max-device-width: 568px) { /* 竖屏：portrait */ }
iPhone 6/7/8：
@media screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) { /* 横屏：landscape */ }
iPhone X/11/12/13：
@media screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) { /* 适配全面屏设备 */ }
二、iPad（平板设备）
通用平板断点
@media screen and (min-width: 768px) and (max-width: 1024px) { /* 适配大部分 iPad 横竖屏 */ }
区分横竖屏与分辨率 iPad 竖屏：
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { /* 竖屏样式 */ }
iPad 横屏：
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { /* 横屏样式 */ }
高清屏（如 iPad Pro）：
@media screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) { /* 适配高分辨率平板 */ }
三、电脑（桌面设备）
通用电脑断点
@media screen and (min-width: 1200px) { /* 适配台式机、笔记本等大屏幕 */ }
细分屏幕尺寸中等屏幕（如小尺寸笔记本）：
@media screen and (min-width: 992px) and (max-width: 1199px) { /* 适配 992px 至 1200px 屏幕 */ }
超大屏幕（如 4K 显示器）：
@media screen and (min-width: 1600px) { /* 适配超宽屏 */ }
四、补充说明视口设置：需在 HTML 中添加 <meta> 标签以兼容移动设备缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
逻辑操作符：使用 and 连接多个条件，only 避免旧浏览器误读，如：
@media only screen and (min-width: 768px) and (max-width: 1024px) { ... }
IE 兼容： 若需支持 IE8 及以下，需引入 html5shiv.js 和 respond.js。
五、总结表格
手机 | ≤480px |
|
iPad | 768px–1024px |
|
电脑 | ≥1200px |
|
通过上述设置，可实现针对不同设备的精细化适配。建议结合弹性布局（Flexbox/Grid）和相对单位（如 %、rem）进一步优化响应式效果。
感谢分享 有用
发表评论