平板、手机、电脑分别如何设置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> 标签以兼容移动设备缩放：

逻辑操作符：使用 and 连接多个条件，only 避免旧浏览器误读，如：

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

IE 兼容：若需支持 IE8 及以下，需引入 html5shiv.js 和 respond.js。

五、总结表格

设备类型

典型断点（宽像素）

代码示例


手机	≤480px	`@media screen and (max-width: 480px)`
iPad	768px–1024px	`@media screen and (min-width: 768px) and (max-width: 1024px)`
电脑	≥1200px	`@media screen and (min-width: 1200px)`

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

THE END

平板、手机、电脑分别如何设置css自适应@media screen and

一、手机（iPhone 及主流手机设备）

五、总结表格

1 PHP函数：array_sum()

2 构建您的第一个 PHP MVC 框架

3 PHP函数库中usort()函数用法介绍

4 PHP实现生成推广海报的方法详解

5 php如何统计数组元素个数

6 利用PHP调用摄像头实时拍摄照片并加入文字水印

7 PHP中krsort()函数用法详解|对数组按照键名逆向排序

8 PHP中的glob()函数用于查找文件或目录

9 如何提升PHP与MySQL的访问速度？

10 宝塔修改cli php版本