平板、手机、电脑分别如何设置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。

五、总结表格

设备类型

典型断点（宽像素）

代码示例

通过上述设置，可实现针对不同设备的精细化适配。建议结合弹性布局（Flexbox/Grid）和相对单位（如 %、rem）进一步优化响应式效果。