进入Web开发 - 如何使javascript响应不同的浏览器大小

Question

我正在进行更多的网络开发并且之前制作过网页，但从未真正担心不同的屏幕尺寸。我想要创建的新网站有很多javascript和jquery元素，但我一直认为使用媒体查询在HTML / CSS3方面制作网站响应，但是想要在JS中扮演一个角色的开销这样我就可以找到更多的资源。

简而言之，javacsript / jquery代码是否必须根据设备检测到的使用应用程序的大小进行调整？

Answer 1

如果您不想手动编写css媒体查询，可以使用css媒体查询，否则可以使用这些css库中的任何一个

1. Bootstrap
2. Foundtion

希望这有帮助。

Answer 2

这取决于你的JS代码（直接或通过添加/删除类）修改与位置和大小相关的元素样式。

小心但是：

  

jQuery $（window）.width（）和CSS3 Media Queries并不总是匹配。

Source

Answer 3

我一直首选 HTML / CSS第一种方法，之后我们添加js以添加各种功能。过分依赖javascript进行响应行为，意味着广泛的DOM操作，这会增加网页的渲染时间。
但是，可能需要javascript来根据不同的屏幕更改元素的行为。为此，您可以自定义您的javascript

if (window.matchMedia("(min-width: 400px)").matches) {
 //the viewport is at least 400 pixels wide
 //write custom js
} else {
  // the viewport is less than 400 pixels wide
}

阅读matchMedia了解更多详情

作为一名网络开发人员，了解为何选择此应用程序非常重要

HTML / CSS第一种方法的优点

• 专注于编写语义和清理标记
• 少了DOM操作
• 良好的标记减少了编写复杂javascript的需要
• 提高网页速度

这些是一些重点，但随着您作为开发人员的进步，我相信您将学习Web开发的技巧和交易。祝你好运;）