Javascript 哪种建议最适合根据用户视口调整布局？

我的目标是实现智能手机、平板电脑和台式机的完美融合。完全不需要西装！该网站是高度动态的-就像一个回答问题的游戏。每次回答后，都会生成一个新问题（div和li元素的复杂结构）

通过ajax向php发送请求，并返回完整的html；使用jquery更正所有元素的宽度和高度

通过ajax发送请求，只接收json格式的核心信息；在jquery中完全构建html

根据视口使用最佳匹配样式表；通过ajax发送请求并接收完整的html

在我看来，建议3具有足够的准确性，并且可能比其他建议表现得更好

建议3更详细一点会像这样工作（只是一个例子！）：

切换（视口）{
case>1200=>包含样式表1
case>980=>include样式表2
case>600=>包含样式表3
case>400=>包含样式表4
案例包括样式表5
}

我想这在技术上不是对你问题的回答，因为我提出了我自己的建议：

---

你应该使用。这样，您就可以为需要设计的每个特定视口定义样式。

您是否尝试用Javascript实现？您好，我听说过媒体查询，但我不确定宽度计算是否正确。现在我有了以下内容：是移动的（yes=>viewport=window.screen.availWidth；no=>viewport=$（window.width（）），所以我需要移动设备上的可用宽度，而不是缩放的（我想大部分是980像素）。你应该依赖于

缩放的
宽度，实际上这是用户想要的。否则，您可以禁止使用
+1缩放媒体查询，尤其是使用
switch(viewport){
 case > 1200 => include stylesheet1
 case > 980 => include stylesheet2
 case > 600 => include stylesheet3
 case > 400 => include stylesheet4
 case <=400 => include stylesheet5
}