在为所有设备开发网站时，我总是回到同样的问题。
通过设置百分比值或使用css3查询一些最大宽度和最小宽度来使所有内容完全响应更有意义，这样您就可以让普通网站使用960px并为不同的设备调整大小..
对于css3媒体查询，我会使用这样的东西：
/* CSS */
/* Basic responsive */
@media screen and (max-width: 960px) {
/* ..custom CSS for viewports less than 960 here */
header { /*...*/ }
section { /*...*/ }
footer { /*...*/ }
/* etc.. */
}
/* iPads (portrait) and similar tablets */
@media only screen
and (min-device-width : 768px) {
header { /*...*/ }
section { /*...*/ }
footer { /*...*/ }
/* etc.. */
}
/* Smartphones */
@media only screen and (max-device-width : 480px) {
header { /*...*/ }
section { /*...*/ }
footer { /*...*/ }
/* etc.. */
}
谢谢
答案 0 :(得分：4)
你应该做两件事。如果你可以编写一些适用于所有设备的CSS，那就太棒了。例如，如果您的标题为每个设备的宽度的100％，则无需使用媒体查询进行调整。实际上，你会发现某些部件不起作用，需要调整。这就是媒体查询的用武之地。
您不应将每个媒体查询视为新的样式表，而应仅改变或构建已定义的样式，以使布局有效。
通常，网站采用移动优先方法。这意味着您从移动布局开始，并随着视口宽度的增加而增加复杂性。这样做的好处是，旧版浏览器将获得该站点的简单移动版本（至少应该可以工作，即使它在桌面上不漂亮）。
您可以在此处阅读有关响应式布局的更多信息：
答案 1 :(得分：1)
如果您遇到这种混淆，我建议您选择 bootstrap
...否则为using media-queries is a better选项，因为它为pixels以及percentages提供了更大的灵活性和自由设置值。
答案 2 :(得分：0)
两者或媒体查询的组合。
答案 3 :(得分：0)
您必须记住，如果您不使用媒体查询，则在每台设备（智能手机，台式机，笔记本电脑等）上加载网站的所有数据。 如果你加载所有数据，它也加载，例如。图像和这可能会花费很多Kb发送到客户端浏览器。
使用媒体查询，您可以将display: none;设置为页面上的图像，并将更少的Kb发送给客户端。
因此，了解移动设备的形式应该尽可能少地发送。