在创建移动响应式设计时，哪些是最重要的媒体查询？
Posted
技术标签:
【中文标题】在创建移动响应式设计时，哪些是最重要的媒体查询？【英文标题】：Which are the most important media queries to use in creating mobile responsive design? 【发布时间】：2012-08-16 06:27:42 【问题描述】：对于移动屏幕尺寸有很多不同的媒体查询。在设计响应式移动网站时，容纳所有这些可能会让人不知所措。在为移动设备设计时，哪些是最重要的？我发现这篇文章很好地概述了可用的媒体查询：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/。
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
/* Styles */
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px)
/* Styles */
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px)
/* Styles */
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
/* Styles */
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
/* Styles */
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
/* Styles */
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px)
/* Styles */
/* Large screens ----------- */
@media only screen
and (min-width : 1824px)
/* Styles */
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
/* Styles */
【问题讨论】：
这确实没有正确的答案，这几乎取决于您自己来决定。就我个人而言，我只将我的个人网站设置为一个针对移动设备的 max-width:480px 媒体查询，但这正是我所满意的。您可能希望为许多不同的尺寸设置不同的布局。 这个真的没法回答，这是一个非常主观的问题。当您的设计看起来很糟糕时，您应该在设计中创建断点，而不是尝试以设备宽度为目标。响应式设计是关于查看过去的设备并使网站对未来友好。作为“最佳实践”，您的样式应该在没有媒体查询的情况下定义，并使用 min-width 构建以在屏幕变大时覆盖样式。这是一种移动优先方法，也是响应式设计得到最广泛支持的方法。 我不认为这是一个真正主观的问题，设备可以很容易地分组到标准化的媒体查询组中，并且具有更高屏幕密度的设备具有适合它们的像素比这些组 - 对于现在。考虑到绝大多数响应式站点都使用诸如引导程序、基础或骨架之类的框架，这些框架也使用这些媒体查询，因此暂时这样做似乎是安全的。在不断变化的标准范围内，这绝对可以得到解答。 【参考方案1】：我建议在 Twitter's Bootstrap 之后只使用以下四个媒体查询：
/* Landscape phones and down */
@media (max-width: 480px) ...
/* Landscape phone to portrait tablet */
@media (max-width: 767px) ...
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) ...
/* Large desktop */
@media (min-width: 1200px) ...
编辑：最初的答案（上面）取自 Bootstrap 版本 2。Bootstrap 已经在版本 3 中更改了他们的媒体查询。请注意，对于小于 768 像素的设备没有明确的查询。这种做法有时被称为移动优先。任何媒体查询之外的所有内容都适用于所有设备。媒体查询块中的所有内容都扩展并覆盖了全局可用的内容以及所有较小设备的样式。将其视为响应式设计的渐进式增强。
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) ...
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) ...
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) ...
查看Bootstrap 3's docs。
【讨论】：
也许是个愚蠢的问题，但是对于拥有 1024 宽桌面的人来说会发生什么？或将窗口大小调整为 1000 像素的人 如果没有默认使用的背景 css（没有 @media(...)... 过滤器的规则），恕我直言，他们将根本看不到 css 样式。如果代码像/* Large desktop */ @media (min-width: 980px) ... 这样就更好了
正如 phippu 所说，您应该使用默认 CSS 而不使用媒体查询来处理这些默认大小，例如 1024。许多具有这种分辨率的机器都是旧的并且完全忽略了媒体查询，所以最好按照 Twitter 的 Bootstrap 的建议来做。
Bootstrap 4 文档，getbootstrap.com/docs/4.3/layout/overview/…【参考方案2】：
按百分比设计，最初针对 15 英寸以上的屏幕进行了优化。
查看您希望在手机上看到的组件 - 只需保留基本内容并删除不起作用或使小屏幕混乱的元素。这些样式可以包含在@media (max-width: 480px) ...
随着尺寸移动到 10 英寸或更小，重新设计您的按钮和交互组件，以使用手指而不是鼠标。@media (max-width: 767px) ...
缩小浏览器的宽度。当事情看起来不太好时，进入控制台并找出可以更改的样式或需要重新设计或删除的项目。标记它们出现的屏幕宽度并创建媒体查询。
最后，检查您的媒体查询，看看它们中的一些是否可以组合在一起（即，如果您有一个宽度为 750 和 767 像素的查询，则最好将它们组合到 767 中）。
如果您对 jQuery 感到满意，您可以添加
$(window).resize(function()
console.log($(window).width());
);
获取当前屏幕尺寸。添加一些额外的像素以获得良好的测量效果。
【讨论】：
【参考方案3】：@cjlarose 引用的第一个 Twitter Bootstrap 代码假定您已经为宽度在 980 像素到 1200 像素之间的显示器构建了主 CSS，因此您基本上是从桌面设计开始并从中调整所有其他内容.
我很高兴看到 Twitter 在 Bootstrap 3 中已更改为 "mobile first"。这是最流行的媒体查询方法之一，也是我更喜欢的方式。你从最小的尺寸开始，而不是从桌面出来。
请注意，您的特定网站可能需要不同于此处或任何其他列表中列出的查询。 您应该根据您的内容要求添加查询，而不是基于任何设置的模板。
以下是一些我认为最有用的媒体查询。这些只是一些例子：
/* Start with baseline CSS, for the smallest browsers.
Sometimes I put this into a separate css file and load it first.
These are the "mobile first" styles. */
...
/* Then progressively add bigger sizes from small to large */
/* Smartphones start somewhere around here */
@media (min-width: 300px)
/* You might do landscape phones here if your content seems to need it */
@media (min-width: 450px)
/* Starting into tablets somewhere in here */
@media (min-width: 600px)
/* Perhaps bigger tablets */
@media (min-width: 750px)
/* Desktop screen or landscape tablet */
@media (min-width: 900px)
/* A bit bigger if you need some adjustments around here */
@media (min-width: 1100px)
/* Widescreens */
@media (min-width: 1500px)
最重要的是，您可能不需要所有这些，或者您可能希望根据内容的外观更改数字。我认为对于放置断点的数量或位置没有任何硬性规定。我现在正在做一个网站，恰好只需要一个断点，因为内容非常简单，但我也做过看起来更像上面代码的网站。
我没有包含视网膜显示代码。如果您要在高分辨率显示器上将普通分辨率图像切换为高分辨率图像，这很有用，但否则它就没有那么有用了。
【讨论】：
以上是关于在创建移动响应式设计时，哪些是最重要的媒体查询？的主要内容，如果未能解决你的问题，请参考以下文章