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。

相关文章

一文详解Python中数据清洗与处理的常用方法

一文详解Python中数据清洗与处理的常用方法

《一文详解Python中数据清洗与处理的常用方法》在数据处理与分析过程中,缺失值、重复值、异常值等问题是常见的挑战,本文总结了多种数据清洗与处理方法,文中的示例代码简洁易懂,有需要的小伙伴可以参考下... 目录缺失值处理重复值处理异常值处理数据类型转换文本清洗数据分组统计数据分箱数据标准化在数据处理与分析过
阅读更多...
Java中Object类的常用方法小结

Java中Object类的常用方法小结

《Java中Object类的常用方法小结》JavaObject类是所有类的父类,位于java.lang包中,本文为大家整理了一些Object类的常用方法,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. public boolean equals(Object obj)2. public int ha
阅读更多...
Oracle查询优化之高效实现仅查询前10条记录的方法与实践

Oracle查询优化之高效实现仅查询前10条记录的方法与实践

《Oracle查询优化之高效实现仅查询前10条记录的方法与实践》：本文主要介绍Oracle查询优化之高效实现仅查询前10条记录的相关资料,包括使用ROWNUM、ROW_NUMBER()函数、FET... 目录1. 使用 ROWNUM 查询2. 使用 ROW_NUMBER() 函数3. 使用 FETCH FI
阅读更多...
数据库oracle用户密码过期查询及解决方案

数据库oracle用户密码过期查询及解决方案

《数据库oracle用户密码过期查询及解决方案》：本文主要介绍如何处理ORACLE数据库用户密码过期和修改密码期限的问题,包括创建用户、赋予权限、修改密码、解锁用户和设置密码期限,文中通过代码介绍... 目录前言一、创建用户、赋予权限、修改密码、解锁用户和设置期限二、查询用户密码期限和过期后的修改1.查询用
阅读更多...
Java 字符数组转字符串的常用方法

Java 字符数组转字符串的常用方法

《Java字符数组转字符串的常用方法》文章总结了在Java中将字符数组转换为字符串的几种常用方法,包括使用String构造函数、String.valueOf()方法、StringBuilder以及A... 目录1. 使用String构造函数1.1 基本转换方法1.2 注意事项2. 使用String.valu
阅读更多...
使用SQL语言查询多个Excel表格的操作方法

使用SQL语言查询多个Excel表格的操作方法

《使用SQL语言查询多个Excel表格的操作方法》本文介绍了如何使用SQL语言查询多个Excel表格,通过将所有Excel表格放入一个.xlsx文件中,并使用pandas和pandasql库进行读取和... 目录如何用SQL语言查询多个Excel表格如何使用sql查询excel内容1. 简介2. 实现思路3
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...
MySQL不使用子查询的原因及优化案例

MySQL不使用子查询的原因及优化案例

《MySQL不使用子查询的原因及优化案例》对于mysql,不推荐使用子查询,效率太差,执行子查询时,MYSQL需要创建临时表,查询完毕后再删除这些临时表,所以,子查询的速度会受到一定的影响,本文给大家... 目录不推荐使用子查询和JOIN的原因解决方案优化案例案例1：查询所有有库存的商品信息案例2：使用EX
阅读更多...
SpringBoot基于MyBatis-Plus实现Lambda Query查询的示例代码

SpringBoot基于MyBatis-Plus实现Lambda Query查询的示例代码

《SpringBoot基于MyBatis-Plus实现LambdaQuery查询的示例代码》MyBatis-Plus是MyBatis的增强工具,简化了数据库操作,并提高了开发效率,它提供了多种查询方... 目录引言基础环境配置依赖配置（Maven）application.yml 配置表结构设计demo_st
阅读更多...
Java 枚举的常用技巧汇总

Java 枚举的常用技巧汇总

《Java枚举的常用技巧汇总》在Java中,枚举类型是一种特殊的数据类型,允许定义一组固定的常量,默认情况下,toString方法返回枚举常量的名称,本文提供了一个完整的代码示例,展示了如何在Jav... 目录一、枚举的基本概念1. 什么是枚举？2. 基本枚举示例3. 枚举的优势二、枚举的高级用法1. 枚举
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2