媒体查询（响应式设计）[重复]答案

【问题标题】：Media queries (responsive design) [duplicate]媒体查询（响应式设计）[重复]
【发布时间】：2016-02-17 04:25:49
【问题描述】：

我是编码新手，但我在 CSS 媒体查询方面遇到了挑战。我注意到那里有大量的移动屏幕尺寸，有没有一种方法可以分组定位它们，而无需为每个公司型号的每个屏幕尺寸编码 - 即：iPhone、三星等。即使我定位一个移动设计，比如 iPhone，我是否必须为每个屏幕尺寸（iPhone 4、5、6）编码？在 Teamtreehouse，他们强调媒体查询不能针对移动屏幕，但我不明白这一点。我希望我的问题很清楚。

【问题讨论】：

您目前如何编码您网站 div 的大小？
这不是堆栈的东西，试试 quora。
@user3216887，我认为我的挑战不是 div 大小，而是断点。我曾尝试在线阅读和阅读解决方案，但我似乎隐藏了一堵墙。我的挑战特别是如何设置响应式设计，而不必为每个屏幕尺寸编写代码，就像在媒体查询中是否有一个可以为所有屏幕尺寸设置尺寸的平均值。 @ James111，我为什么要尝试 Quora？我有一个 Quora 帐户，但我认为在评估这两个帐户后我会在这里得到更具体的答案。

标签： android ios css responsive-design media-queries

【解决方案1】：

CSS 媒体查询允许您根据屏幕大小、设备方向或设备分辨率等来定位 CSS 规则。通常开发人员使用 4 个通用断点（小、窄、中和宽）的 CSS 媒体查询来定位基于设备的设备解决。以下是常见的媒体查询：

@media only screen and (min-width:1280px) {}
@media (min-width:1024px) and (max-width:1279px) {}
@media (min-width:768px) and (max-width:1023px) {}
@media (min-width:480px) and (max-width:767px) {}

注意-尽管遵循上述 CSS 媒体查询，应使用移动优先方法。

除上面之外，下面可用于针对特定设备、分辨率或方向：

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

【讨论】：