根据css中的浏览器宽度提供不同的css

Question

我无法在Stackoverflow现有查询中找到此信息。如果可以完成，请帮忙。 我想用移动优先的响应式设计方法捕获浏览器。 根据浏览器的宽度，我想包含div：

1）如果浏览器最大宽度为320像素，则使用＆＃34;＆＃34; <div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="***320***" data-numposts="5"></div><br>Floating box</div>

2）如果浏览器宽度为480px或更高，则使用 ＆＃34; <div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="**480**" data-numposts="5"></div><br>Floating box</div>＆＃34;

我知道在CSS中使用媒体查询（例如：

@media (min-width: 300px) {
  html { background: blue; }
}

但如何在div参数（320和480）中更改宽度值时如何将这些用于div？

非常感谢任何帮助。

由于

Answer 1

不要这样做 - 我的意思是创建不同的宽度尺寸，因为你想要创建一个移动响应式设计，为什么不尝试 Twitter Boostrap - 可以说是最好的移动响应框架之一 - 帮助你设计您的应用程序并使其适应任何屏幕尺寸。此外，这将帮助您利用已经在框架中的专业知识。 我想你也可以轻松学习它。