有没有一种方法可以直接通过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

来自this article。你可以尝试

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

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