CSS 设备媒体查询（最全版本）

最新推荐文章于 2024-07-10 16:12:49 发布
最新推荐文章于 2024-07-10 16:12:49 发布
阅读量1.3k 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41631910/article/details/109365129
版权
这篇博客详细列举了各种设备的CSS媒体查询，包括iPhone 4到iPhone 12 Pro Max，Samsung Galaxy系列，iPad，Apple Watch以及不同尺寸的平板和桌面设备。通过这些查询，开发者可以精确地为不同设备优化网页布局。
摘要由CSDN通过智能技术生成

Phones

Portrait and landscape phones

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)

Landscape phones

@media only screen 
  and (min-width: 321px)

Portrait phones

@media only screen 
  and (max-width: 320px)

iPhone 4 and iPhone 4S

Portrait and landscape iPhone 4 and iPhone 4S

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px) 
  and (-webkit-min-device-pixel-ratio: 2)

Portrait iPhone 4 and iPhone 4S

@media only screen  
  and (min-device-width: 320px) 
  and (max-device-width: 480px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait)

Landscape iPhone 4 and iPhone 4S

@media only screen  
  and (min-device-width: 320px) 
  and (max-device-width: 480px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape)

iPhone 5 and iPhone 5S

Portrait and landscape iPhone 5 and iPhone 5S

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px) 
  and (-webkit-min-device-pixel-ratio: 2)

Portrait iPhone 5 and iPhone 5S

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait)

Landscape iPhone 5 and iPhone 5S

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape)

iPhone 6 and iPhone 6S

Portrait and landscape iPhone 6 and iPhone 6S

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)

Portrait iPhone 6 and iPhone 6S

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait)

Landscape iPhone 6 and iPhone 6S

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape)

iPhone 6 Plus and iPhone 6S Plus

Portrait and landscape iPhone 6 Plus and iPhone 6S Plus

@media only screen 
  and (min-device-width: 414px) 
  and (max-devic
最低0.47元/天 解锁文章
SKTATTOO
关注
css媒体查询（手机、平板、PC）
qq_41913971的博客
04-25 3927
css媒体查询 PC端按屏幕尺寸整理? 通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器(≥992px) 大屏幕 大桌面显示器 (≥1200px) /* 超小屏幕（手机，小于 768px） */ @media (max-width: 768px) { ... } /* 小屏幕（平板，大于等于 768px） */ @media (min-w
CSS 媒体查询 IPHONE PC 常用尺寸总结
alokka的博客
05-04 752
推荐一个网址，获取一些常用设备信息。
CSS 【实用教程】（2024最新版）
最新发布
朝阳39的博客
07-10 2312
CSS 是层叠样式表( Cascading Style Sheets ) 的简写，用于精确控制 HTML 页面的样式，以便更好地展示图文信息或产生炫酷/友好的交互体验。 CSS 文件的后缀名为 1. style 内嵌样式 https://blog.csdn.net/weixin_41192489/article/details/140226382容器内的元素，会获得容器上添加的样式 文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。 盒子
ipad 媒体查询
weixin_35755640的博客
12-23 388
iPad 的媒体查询是指使用 CSS3 中的 @media 规则，在网页中为不同的设备定义不同的样式。这样可以使网页在不同的设备(如电脑、平板电脑、手机)上看起来更好。 例如，可以使用媒体查询为 iPad 定义特定的样式，使网页在 iPad 上更好看： @media only screen and (min-device-width: 768px) and (max-device-width: 1...
css平板手机pc媒体查询
hello world
01-29 327
/*平板*/ @media screen and (min-width:600px) and (max-width:960px){ } /*手机*/ @media screen and (max-width:600px){ } /*PC*/ @media screen and (min-width:960px){ }
css 响应式布局(媒体查询)，兼容pc，ipad，移动端的布局单位
PrimaryColor
01-10 2174
代码： .box{ width:80%; } //ipad和手机端，默认pc。 @media screen and (max-width: 62rem){ //62rem对应992px，约等于1000px宽度 .newBgTitle{ width:90%; } } @media screen and (max-width: 48rem){ //48rem对应768px，约等于780px宽度 .newBgTitle{ width:
iphone手机常用适配媒体查询
Leader_yuxi的博客
11-17 353
记录一下iphone手机常用适配媒体查询。
CSS3 多媒体查询
12-13
CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。 媒体查询可用于检测很多事情，例如： viewport(视窗) 的宽度与高度 设备的宽度与高度 朝向 (智能手机横屏，...
CSS3媒体查询Media Queries基础学习教程
11-21
CSS3媒体查询（Media Queries）是网页设计中用于实现响应式布局的关键技术，它允许开发者根据设备特性，如视口宽度、颜色深度等，来应用不同的样式规则。媒体查询的基本结构包括媒体类型和一个或多个媒体特性表达式...
CSS3 多媒体查询实例
12-13
**CSS3 多媒体查询（Media Queries）**是现代网页设计中的一个重要工具，它允许开发者根据设备的不同特性，如屏幕尺寸、分辨率等，为不同类型的设备提供不同的样式。这一功能对于响应式网页设计至关重要，确保网页在...
CSS3媒体查询(Media Queries)介绍
01-19
媒体特性 媒体特性共13种，可以说是一个类似CSS属性的集合。其中的大部分接受 min/max 的前缀，用来表示 大于等于/小于等于 的逻辑。 and 示例如下所示： @media screen and (min-width: 800px) {样式代码} >800 @...
css媒体查询来兼容
wangle_style的博客
04-04 662
1，判断ipad：@media only screenand (min-device-width  : 768px)and (max-device-width  : 1024px){  样式}2，判断ipad横屏：@media only screenand (min-device-width  : 768px)and (max-device-width  : 1024px)and(orientat...
CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX
m0_50015961的博客
12-10 632
/*iPhone6和iPhone8*/ @media only screen and (device-width : 375px) and (device-height : 667px) and (-webkit-device-pixel-ratio : 2) { /*code*/ } /*iPhone6 Plus 和iPhone8 Plus*/ @media only screen and (device-width : 414px) and (dev
CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
51yunOA
04-16 1953
文章目录 媒体查询介绍 Media Queries具体使用 一、最大宽度Max Width 二、最小宽度Min Width 三、多个Media Queries使用 四、设备屏幕的输出宽度Device Width 五、iPhone4 六、iPad 七、android 八、not关键字 九、only关键字 十、其他 媒体查询之device-aspe...
css @media 判断iphone/ipad 各种机型
Helen
05-15 5732
兼容iphone4/4s： @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ } 兼容iphone5 ： @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){ } 兼容iphone6，iphone7，iphone8s ： @me...
媒体查询适配代码 适配IOS等各类机型
qq_43683753的博客
10-27 891
媒体查询适配代码，适配IOS等各类机型，可按需取用
CSS媒体查询判断iphone设备
06-29 765
判断iphone设备 兼容iphone4/4s @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ } 兼容iphone5@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){ } 兼容iphone6，...
CSS媒体查询深入理解与应用
媒体查询是CSS中用于根据设备特性和视口尺寸来应用不同样式的功能，尤其对于响应式设计至关重要。作者在进行页面打印特殊处理时接触到这个概念，并在Mozilla Developer Network上学习后进行了总结。" 在CSS2中，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值