responsive-design - 带有媒体查询的响应式设计

Question

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

我检测到最大宽度：320 像素，最大宽度：480 像素。

我应该用媒体查询检测什么屏幕尺寸，因为有很多类型的设备？

Answer 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 查询可以在您的设计中断时提供帮助，并且希望您不必在每个断点处定义大量规则。

祝你好运！