我想使用媒体查询开发响应式网页。 我还为移动、表格和桌面编写了媒体查询。
但我无法理解，如果我正在为设备 max-width:320px 编写一组 css 代码，那么我必须为另一个设备再次编写相同的代码，即 640px 不同尺寸。
我很困惑这是否是编写媒体查询的正确方法，因为我一次又一次地为每个设备尺寸编写相同的 css 代码集。
由于我是媒体查询的新手，请帮助我继续前进。 我也很困惑是选择自适应布局还是响应式布局？
你们太棒了，我感谢你们所有人提供的有用答案。 我已经给公司一个任务，他们告诉我我不能使用任何框架来设计响应式网页，我只需要为此使用媒体查询。
【问题讨论】：
标签： html css media-queries
这可能会清除您的所有疑虑。此框架使您的工作更轻松。 http://getbootstrap.com/
希望对你有帮助。
【讨论】：
通过媒体查询，你告诉你的代码-Bro，如果宽度大于这个“这里的大小”（320px，240em 等等......）然后使用这段代码。
else if "next large size here" 然后使用另一段代码，与下一个 @media 查询相同
有两种使用方法。 移动优先的编码思维（推荐 ULTRA MEGA）与否:)
这意味着，您为小型浏览器创建代码，然后开始为平板手机、平板电脑以及桌面和宽屏添加媒体查询。
这非常有用，因为它可以帮助您只在页面中添加真正重要的内容，并避免大量无用的信息。因为你开始设计小尺寸并且必须压缩所有有用的信息并放入里面:)
Learn more about mobile first technique
@media (min-width: 320px) {
nav li {
display: inline-block;
}
}
【讨论】：
媒体查询和级联样式表的想法通常是在您前进时逐步增强您的能力。
这意味着：开始针对移动设备进行设计。完成后，为您的下一个更大的目标视口大小添加媒体查询。
在此查询中，覆盖所有需要对此视口不同的样式。
等等……
你不想做的就是把所有的样式都写一遍一遍。
查看一些流行的框架以获得灵感，例如 twitter bootstrap、html 样板或基础框架。
【讨论】：
如果设计是相同的，比如说从台式机到大屏幕显示器，我们可以做类似的事情
@media screen and (min-device-width: 800px) and (max-device-width: 2048px) {
/* STYLES HERE */
}
假设您希望每个桌面屏幕都采用相同的设计。这将帮助您减少代码而不是重写它。
【讨论】：
下面的例子你可以理解，而不是理解媒体查询的文章。
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) {
}
如果你阅读清楚，希望你能得到一个想法。
【讨论】：