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

您可以尝试

$(window).resize(function(){
    if ($(window).width() <= 800){  
        // do something here
    }   
});

在this article中，它提到了为什么这种方法不是最佳方法。进一步了解。

在使用CSS时，还有其他很棒的Java脚本管理选项响应式网站中的媒体查询。 MediaCheck， Window.matchMedia()全部允许您根据可自定义的方式触发javascript函数浏览器宽度的断点。

我希望这会有所帮助。

Answer 4

要使用的省时选项： 1. Javascript + CSS Media查询 2. Bootstrap CSS框架-简单且非常有效

使用带有window.width的调整大小功能可以控制屏幕的大小。