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。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
常用的jdk下载地址

常用的jdk下载地址

jdk下载地址 安装方式可以看之前的博客： mac安装jdk oracle 版本：https://www.oracle.com/java/technologies/downloads/ Eclipse Temurin版本：https://adoptium.net/zh-CN/temurin/releases/ 阿里版本： github：https://github.com/
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
30常用 Maven 命令

30常用 Maven 命令

Maven 是一个强大的项目管理和构建工具，它广泛用于 Java 项目的依赖管理、构建流程和插件集成。Maven 的命令行工具提供了大量的命令来帮助开发人员管理项目的生命周期、依赖和插件。以下是 常用 Maven 命令的使用场景及其详细解释。 1. mvn clean 使用场景：清理项目的生成目录，通常用于删除项目中自动生成的文件（如 target/ 目录）。共性规律：清理操作
阅读更多...
019、JOptionPane类的常用静态方法详解

019、JOptionPane类的常用静态方法详解

目录 JOptionPane类的常用静态方法详解 1. showInputDialog()方法 1.1基本用法 1.2带有默认值的输入框 1.3带有选项的输入对话框 1.4自定义图标的输入对话框 2. showConfirmDialog()方法 2.1基本用法 2.2自定义按钮和图标 2.3带有自定义组件的确认对话框 3. showMessageDialog()方法 3.1
阅读更多...
ural 1026. Questions and Answers 查询

ural 1026. Questions and Answers 查询

1026. Questions and Answers Time limit: 2.0 second Memory limit: 64 MB Background The database of the Pentagon contains a top-secret information. We don’t know what the information is — you
阅读更多...
工作常用指令与快捷键

工作常用指令与快捷键

Git提交代码 git fetch  git add .  git commit -m “desc”  git pull  git push Git查看当前分支 git symbolic-ref --short -q HEAD Git创建新的分支并切换 git checkout -b XXXXXXXXXXXXXX git push origin XXXXXXXXXXXXXX
阅读更多...
Mybatis中的like查询

Mybatis中的like查询

<if test="templateName != null and templateName != ''">AND template_name LIKE CONCAT('%',#{templateName,jdbcType=VARCHAR},'%')</if>
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2