Question

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

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

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

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

祝你好运！

响应式设计与媒体查询

1 个答案: