带有媒体查询的响应式设计答案

【问题标题】：Responsive design with media query带有媒体查询的响应式设计
【发布时间】：2013-07-05 13:33:08
【问题描述】：

我想设计一个可以在手机和平板电脑上查看的网站。我正在使用响应式媒体查询。

我检测到 max-width:320px, max-width:480px。

由于设备类型很多，我应该使用媒体查询检测什么屏幕尺寸？

【问题讨论】：

这实际上不是一个问题，它只是在末尾有一个问号。
你应该回答问题，当有人有错误时你可以帮助编辑
好吧，我这么说吧：“这里没有足够的信息来有效地回答这个问题，你应该找一个可以交流你遇到的实际问题的朋友或同事。”跨度>

标签： responsive-design

【解决方案1】：

也许您可以从不同的角度解决问题，而不是试图找出要检测的屏幕尺寸。

使用响应式设计的主要原因之一是您的网站将在所有设备上都能很好地显示，因此请查看您的特定设计并检查您的设计和页面布局在您更改窗口大小（宽度和高度）。

也许你会很幸运并且拥有一个可以很好地重新配置的流畅设计，那么你甚至可能不需要使用@media 查询。

很有可能在某些视口或窗口大小下，设计会崩溃，这就是 @media 查询的用武之地。

对于@media 查询使用哪些断点没有硬性规定，作为起点Foundation 使用

/* Very large screens */
@media only screen and (min-width: 1441px) { ... }

/* Medium screens */
@media only screen and (max-width: 1279px) and (min-width: 768px) { ... }

/* Small screens */
@media only screen and (max-width: 767px) { ... }  

/* Landscape Orientation */
@media screen and (orientation: landscape) { ... }

/* Portrait Orientation */
@media screen and (orientation: portrait) { ... }

也许您想为较小的屏幕添加一条规则，但这可能与任何其他规则一样好。

请记住，@media 查询可以在您的设计中断时提供帮助，希望您不必在每个断点处定义大量规则。

祝你好运！

【讨论】：