有没有办法直接通过javascript获得响应式网页设计

Question

我正在构建一个网站，其中一部分是使用 JavaScript 的 createElement 属性构建页面。对于 Web 浏览器，我拥有一切美好而漂亮的东西，这肯定符合我的喜好，但我需要将它缩小到移动设备的规模，而且我在网上找不到这些信息。

我知道使用 CSS 可以使用 @media(max-width: ****) ，但是是否有与此等效的 javascript？

到目前为止，我还不是 100% 熟悉 jQuery，但我可以很好地理解代码，所以如果有 jQuery 代码可用于此，我愿意尝试一下，

感谢您的帮助！

Answer 1

你所有的样式都应该用 CSS 而不是 javascript 来完成。您可以查看 Bootstrap（css 框架），它使开发响应式网站变得容易。

Answer 2

您可以检查实际窗口是否是移动设备，然后您可以使用 setAttribute 来制作您的自定义 CSS。Window 接口的 matchMedia() 方法返回一个新的 MediaQueryList 对象，表示指定媒体查询字符串的解析结果。然后可以使用返回的 MediaQueryList 来确定文档是否与媒体查询匹配，或监视文档以检测它何时匹配或停止匹配媒体查询。

Answer 3

使用的省时选项： 1. Javascript + CSS 媒体查询 2. Bootstrap CSS 框架 - 简单且非常有效可以使用带有 window.width 的 resize 函数来控制屏幕的大小。