如何为每个设备大小编写媒体查询
我想开发一个使用媒体查询的响应性网页。我还为手机、桌子和台式机编写了媒体查询。
但我无法理解，如果我正在为设备的最大宽度:320 if编写css代码集，那么我必须再次为另一个设备编写相同的代码，即大小不同的640 if。
我感到困惑的是，这是否是编写媒体查询的正确方式，因为我正在为每个设备的大小再次编写相同的css代码。
请帮助我继续前进，因为我是新的媒体查询。同时，我也很困惑是采用自适应布局还是响应式布局？
你们真是太好了，我很感谢你们给出的有帮助的答案。我给了一个公司的任务，他们告诉我，我不能使用任何框架来设计响应性网页，我只需要使用媒体查询。
回答 5
Stack Overflow用户
发布于 2015-06-26 06:21:59
一般来说，媒体查询和层叠样式表的想法是在你前进的时候逐步提高你的水平。
这意味着:开始你的设计目标是移动。完成后，添加一个媒体查询您的下一个更大的目标视口大小。
在此查询中，覆盖对此视口需要不同的所有样式。
等等..。
想要你不想做的是再写一遍所有的样式。
查看一些流行的框架，以获得灵感，如twitter引导程序、html样板或基础框架。
Stack Overflow用户
发布于 2015-06-26 06:31:56
这可能会清除所有的doubts.This框架，使您的工作更加容易。http://getbootstrap.com/
希望能帮上忙。
Stack Overflow用户
发布于 2015-06-26 07:19:26
使用媒体查询，您将告诉代码-Bro，如果宽度大于“这里的大小”(320 if，240 if，任何.)那就用这段代码。
否则，如果“这里的下一个更大的大小”，那么使用这另一段代码，并与下一个@media查询相同。
使用它有两种方法。移动优先的编码思想(推荐)或不推荐:)
这意味着，您为小型浏览器创建代码，然后开始为平板电脑、平板电脑以及桌面和宽屏幕添加媒体。
这是非常有用的，因为帮助您只在页面中添加真正重要的内容，并避免无用的大量信息。因为您开始设计小尺寸，必须压缩所有有用的信息并放入:)
@media (min-width: 320px) {
nav li {
display: inline-block;
}
}https://stackoverflow.com/questions/31064773
复制相似问题
腾讯云开发者
