媒体查询响应式设计

Question

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

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

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

Answer 1

不是试图找出要检测的屏幕大小，也许你可以从不同的角度来解决问题。

使用自适应设计的主要原因之一是您的网站将在所有设备上都能很好地显示，因此请查看您的特定设计，并检查设计和页面布局会发生什么变化，和身高）。

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

它更可能是在一定的视口或窗口尺寸，设计将击穿，虽然这是哪里@media查询进来，

没有硬性规定为其breakbpoints您使用@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查询可以提供帮助，并且希望您不必在每个断点处定义大量规则。

祝你好运！