Responsive Design常用的媒体查询

2024-05-28 17:58
文章标签 查询 媒体 design 常用 responsive

本文主要是介绍Responsive Design常用的媒体查询，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

（PS:原文写于2012年，本文参照原文作了适当修改，不当之处请指出）

现在Web朝着响应式的趋势发展，媒体查询在创建响应式网站中起到了主要作用。

没有媒体查询几乎不能实现响应式设计，利用媒体查询，我们可以针对特定的设备，如显示器、智能手机和平板，写CSS。

媒体查询是响应式设计的核心

在这篇文章中我将分享一些到目前为止我收集到的常用媒体查询。在一些示例中，我可能是错误的，但是不用担心，因为我针对这个开通了评论功能。我把它们分为显示器媒体查询、智能手机媒体查询和平板媒体查询

显示器媒体查询

显示器媒体查询是以屏幕大小为基础划分的

640px

@media screen and (max-width: 640px) 
{ }

800px

@media screen and (max-width: 800px) 
{ }

1024px

@media screen and (max-width: 1024px) 
{ }

智能手机媒体查询

适用于大部分主流智能手机

iPhone(2G-4S)

/*Landscape Mode*/@media screen and (max-device-width: 480px) 
{ }
/* Portrait Mode */@media screen and (max-device-width: 320px) 
{ }

iPhone 4

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) 
{ }

iPhone5

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* 样式写在这里 */
}

iPhone6

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {/*iPhone 6 Portrait*/
}@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {/*iPhone 6 landscape*/
}@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {/*iPhone 6+ Portrait*/
}@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {/*iPhone 6+ landscape*/
}@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){/*iPhone 6 and iPhone 6+ portrait and landscape*/
}@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){/*iPhone 6 and iPhone 6+ portrait*/
}@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){/*iPhone 6 and iPhone 6+ landscape*/
}
HTC Evo，BlackBerry Torch，HTC Thunderbolt，HD2
@media screen and (max-device-width: 480px) 
{ }

平板媒体查询

这个列表会有点长

iPad

/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape) 
{ }/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait) 
{ }

iPad 2

/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape) 
{ }/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait) 
{ }

iPad 3

/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape) 
{ }/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait) 
{ }

iPad mini

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  { /* 样式写在这里 */
}

Samsung Galaxy Tab 10.1

/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape) 
{ }/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait) 
{ }

Motorola Xoom

/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape) 
{ }/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait) 
{ }

HTC Flyer

/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape) 
{ }/* Portrait Mode */
@media (max-device-width: 600px) and (orientation: portrait) 
{ }

BlackBerry PlayBook

/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape) 
{ }/* Portrait Mode */
@media (max-device-width: 600px) and (orientation: portrait) 
{ }

HP TouchPad

/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape) 
{ }/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait) 
{ }

Lenovo Thinkpad Tablet

/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape) 
{ }/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait) 
{ }

Sony Tablet S

/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape) 
{ }/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait) 
{ }

T-Mobile G-Slate

/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape) 
{ }/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait) 
{ }

ViewSonic ViewPad 10

/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape) 
{ }/* Portrait Mode */
@media (max-device-width: 600px) and (orientation: portrait) 
{ }

Dell Streak 7

/* Landscape Mode */
@media (max-device-width: 800px) and (orientation: landscape) 
{ }/* Portrait Mode */
@media (max-device-width: 480px) and (orientation: portrait) 
{ }

ASUS Eee Pad Transformer

/* Landscape Mode */
@media (max-device-width: 1080px) and (orientation: landscape) 
{ }/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait) 
{ }

英文原文：Some Media Queries for Responsive Design

译文出处：http://www.ido321.com/1540.html

参考文章：
七个高度有效的媒体查询技巧
iPads和iPhones的Media Queries

这篇关于Responsive Design常用的媒体查询的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1011278。

相关文章

浅谈mysql的sql_mode可能会限制你的查询

浅谈mysql的sql_mode可能会限制你的查询

《浅谈mysql的sql_mode可能会限制你的查询》本文主要介绍了浅谈mysql的sql_mode可能会限制你的查询,这个问题主要说明的是,我们写的sql查询语句违背了聚合函数groupby的规则... 目录场景：问题描述原因分析：解决方案：第一种：修改后，只有当前生效，若是mysql服务重启，就会失效；
阅读更多...
MySQL多列IN查询的实现

MySQL多列IN查询的实现

《MySQL多列IN查询的实现》多列IN查询是一种强大的筛选工具,它允许通过多字段组合快速过滤数据,本文主要介绍了MySQL多列IN查询的实现,具有一定的参考价值,感兴趣的可以了解一下... 目录一、基础语法：多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析与优化1.
阅读更多...
Linux上设置Ollama服务配置(常用环境变量)

Linux上设置Ollama服务配置(常用环境变量)

《Linux上设置Ollama服务配置(常用环境变量)》本文主要介绍了Linux上设置Ollama服务配置(常用环境变量),Ollama提供了多种环境变量供配置,如调试模式、模型目录等,下面就来介绍一... 目录在 linux 上设置环境变量配置 OllamPOgxSRJfa手动安装安装特定版本查看日志在
阅读更多...
Java常用注解扩展对比举例详解

Java常用注解扩展对比举例详解

《Java常用注解扩展对比举例详解》：本文主要介绍Java常用注解扩展对比的相关资料,提供了丰富的代码示例,并总结了最佳实践建议,帮助开发者更好地理解和应用这些注解,需要的朋友可以参考下... 目录一、@Controller 与 @RestController 对比二、使用 @Data 与 不使用 @Dat
阅读更多...
Mysql中深分页的五种常用方法整理

Mysql中深分页的五种常用方法整理

《Mysql中深分页的五种常用方法整理》在数据量非常大的情况下,深分页查询则变得很常见,这篇文章为大家整理了5个常用的方法,文中的示例代码讲解详细,大家可以根据自己的需求进行选择... 目录方案一：延迟关联 (Deferred Join)方案二：有序唯一键分页 (Cursor-based Paginatio
阅读更多...
Python实现常用文本内容提取

Python实现常用文本内容提取

《Python实现常用文本内容提取》在日常工作和学习中,我们经常需要从PDF、Word文档中提取文本,本文将介绍如何使用Python编写一个文本内容提取工具,有需要的小伙伴可以参考下... 目录一、引言二、文本内容提取的原理三、文本内容提取的设计四、文本内容提取的实现五、完整代码示例一、引言在日常工作和学
阅读更多...
Redis中的常用的五种数据类型详解

Redis中的常用的五种数据类型详解

《Redis中的常用的五种数据类型详解》：本文主要介绍Redis中的常用的五种数据类型详解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Redis常用的五种数据类型一、字符串（String）简介常用命令应用场景二、哈希（Hash）简介常用命令应用场景三、列表（L
阅读更多...
python中time模块的常用方法及应用详解

python中time模块的常用方法及应用详解

《python中time模块的常用方法及应用详解》在Python开发中,时间处理是绕不开的刚需场景,从性能计时到定时任务,从日志记录到数据同步,时间模块始终是开发者最得力的工具之一,本文将通过真实案例... 目录一、时间基石：time.time()典型场景：程序性能分析进阶技巧：结合上下文管理器实现自动计时
阅读更多...
mybatis-plus 实现查询表名动态修改的示例代码

mybatis-plus 实现查询表名动态修改的示例代码

《mybatis-plus实现查询表名动态修改的示例代码》通过MyBatis-Plus实现表名的动态替换,根据配置或入参选择不同的表,本文主要介绍了mybatis-plus实现查询表名动态修改的示... 目录实现数据库初始化依赖包配置读取类设置 myBATis-plus 插件测试通过 mybatis-plu
阅读更多...
MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固 通俗易懂版)

MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固 通俗易懂版)

《MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固通俗易懂版)》本文主要讲解了MySQL中的多表查询,包括子查询、笛卡尔积、自连接、多表查询的实现方法以及多列子查询等,通过实际例子和操... 目录复合查询1. 回顾查询基本操作group by 分组having1. 显示部门号为10的部门名，员
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2