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。

相关文章

JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法

JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法

《JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法》：本文主要介绍JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法,每种方法结合实例代码给大家介绍的非常... 目录引言：为什么"相等"判断如此重要？方法1：使用some()+includes()（适合小数组）方法2
阅读更多...
SpringBoot 获取请求参数的常用注解及用法

SpringBoot 获取请求参数的常用注解及用法

《SpringBoot获取请求参数的常用注解及用法》SpringBoot通过@RequestParam、@PathVariable等注解支持从HTTP请求中获取参数,涵盖查询、路径、请求体、头、C... 目录SpringBoot 提供了多种注解来方便地从 HTTP 请求中获取参数以下是主要的注解及其用法：1
阅读更多...
Java实现复杂查询优化的7个技巧小结

Java实现复杂查询优化的7个技巧小结

《Java实现复杂查询优化的7个技巧小结》在Java项目中,复杂查询是开发者面临的“硬骨头”,本文将通过7个实战技巧,结合代码示例和性能对比,手把手教你如何让复杂查询变得优雅,大家可以根据需求进行选择... 目录一、复杂查询的痛点：为何你的代码“又臭又长”1.1冗余变量与中间状态1.2重复查询与性能陷阱1.
阅读更多...
MySQL中查询和展示LONGBLOB类型数据的技巧总结

MySQL中查询和展示LONGBLOB类型数据的技巧总结

《MySQL中查询和展示LONGBLOB类型数据的技巧总结》在MySQL中LONGBLOB是一种二进制大对象（BLOB）数据类型,用于存储大量的二进制数据,：本文主要介绍MySQL中查询和展示LO... 目录前言1. 查询 LONGBLOB 数据的大小2. 查询并展示 LONGBLOB 数据2.1 转换为十
阅读更多...
使用SpringBoot+InfluxDB实现高效数据存储与查询

使用SpringBoot+InfluxDB实现高效数据存储与查询

《使用SpringBoot+InfluxDB实现高效数据存储与查询》InfluxDB是一个开源的时间序列数据库,特别适合处理带有时间戳的监控数据、指标数据等,下面详细介绍如何在SpringBoot项目... 目录1、项目介绍2、 InfluxDB 介绍3、Spring Boot 配置 InfluxDB4、I
阅读更多...
Go语言使用Gin处理路由参数和查询参数

Go语言使用Gin处理路由参数和查询参数

《Go语言使用Gin处理路由参数和查询参数》在WebAPI开发中,处理路由参数（PathParameter）和查询参数（QueryParameter）是非常常见的需求,下面我们就来看看Go语言... 目录一、路由参数 vs 查询参数二、Gin 获取路由参数和查询参数三、示例代码四、运行与测试1. 测试编程路
阅读更多...
MySQL 数据库表与查询操作实战案例

MySQL 数据库表与查询操作实战案例

《MySQL数据库表与查询操作实战案例》本文将通过实际案例,详细介绍MySQL中数据库表的设计、数据插入以及常用的查询操作,帮助初学者快速上手,感兴趣的朋友跟随小编一起看看吧... 目录mysql 数据库表操作与查询实战案例项目一：产品相关数据库设计与创建一、数据库及表结构设计二、数据库与表的创建项目二：员
阅读更多...
Linux查询服务器 IP 地址的命令详解

Linux查询服务器 IP 地址的命令详解

《Linux查询服务器IP地址的命令详解》在服务器管理和网络运维中,快速准确地获取服务器的IP地址是一项基本但至关重要的技能,下面我们来看看Linux中查询服务器IP的相关命令使用吧... 目录一、hostname 命令：简单高效的 IP 查询工具命令详解实际应用技巧注意事项二、ip 命令：新一代网络配置全
阅读更多...
Linux查询服务器系统版本号的多种方法

Linux查询服务器系统版本号的多种方法

《Linux查询服务器系统版本号的多种方法》在Linux系统管理和维护工作中,了解当前操作系统的版本信息是最基础也是最重要的操作之一,系统版本不仅关系到软件兼容性、安全更新策略,还直接影响到故障排查和... 目录一、引言：系统版本查询的重要性二、基础命令解析：cat /etc/Centos-release详
阅读更多...
Java Stream流以及常用方法操作实例

Java Stream流以及常用方法操作实例

《JavaStream流以及常用方法操作实例》Stream是对Java中集合的一种增强方式,使用它可以将集合的处理过程变得更加简洁、高效和易读,：本文主要介绍JavaStream流以及常用方法... 目录一、Stream流是什么？二、stream的操作2.1、stream流创建2.2、stream的使用2.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2