Question

我想使用媒体查询开发响应式网页。我还为移动设备，桌子和桌面写了媒体查询。桌面。

但我无法理解，如果我正在为设备max-width：320px编写css代码集，那么我必须再次为另一台设备编写代码，即640px，差异大小。

我很困惑这是否是编写媒体查询的正确方法，因为我正在为每个＆amp;编写相同的css代码集。每个设备尺寸再次和＆amp;试。

请帮助我继续进行媒体查询。而且我也很困惑是否要采用自适应布局或响应式布局？

你们中的伟大＆amp;我很感谢大家给出的有用答案。我给公司一个任务，告诉我我不能使用任何框架来设计响应式网页，我只需要使用媒体查询。

Answer 1

媒体查询和级联样式表的概念通常是逐步增强您的发展。

这意味着：针对移动设备开始您的设计。完成后，为您的下一个更大的目标视口大小添加媒体查询。

在此查询中，覆盖此视口需要不同的所有样式。

等等......

希望你不想做的就是再次写下所有样式。

查看一些流行的框架，以获得twitter bootstrap，html样板或基础框架等灵感。

Answer 2

这可能会清除你所有的疑惑。这个框架让你的工作变得更容易。 http://getbootstrap.com/

希望它有所帮助。

Answer 3

通过媒体查询，您可以告诉您的代码-Bro，如果宽度大于此值，则此处的大小为＆＃34; （无论是320px，240em ......）然后使用这段代码。

否则如果＆＃34;接下来更大的尺寸＆＃34;然后使用另一段代码，并与下一个@media查询相同

有两种方法可以使用它。首先考虑移动编码（推荐ULTRA MEGA）或不使用:)

这意味着，您为小型浏览器创建代码，然后开始为平板电脑，平板电脑，桌面和宽屏幕添加媒体查询。

这非常有用，因为它可以帮助您在页面中添加非常重要的内容并避免无用的大量信息。因为你开始设计小尺寸并且必须压缩所有有用的信息并放入内部：）

Learn more about mobile first technique

@media (min-width: 320px) {
 nav li {
  display: inline-block;
   }
}

Answer 4

如果设计相同，那么对于桌面到大型宽屏显示器，我们可以做类似的事情

@media screen and (min-device-width: 800px) and (max-device-width: 2048px) { 
    /* STYLES HERE */
}

假设您希望每个桌面屏幕都采用相同的设计。这将帮助您减少代码，而不是重写代码。

Answer 5

以下示例您可以理解，而不是理解媒体查询的文章。

1) if you say - min-device-width:320PX; this is last breakpoint of your design, below your design doesn't work.
2) if you say - max-width:420px; - this pice of code work until the 420px only after that the code which you mentioned in the breakpoint that doesn't work in remain widths. 

basic break point: 320px -mobile size
                   480px -mobile size, 640px -mobile size, 
                   768px -heigh-end phones,
                   1024px - pad.
                   as remain widths may be seems to work in desktop width.


@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

如果你读得清楚，希望你有一个想法。

如何为每个设备大小编写媒体查询

5 个答案: