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

Question

我正在更深入地从事Web开发，以前曾经制作过网页，但从未真正担心过不同的屏幕尺寸。 我要创建的新网站具有很多javascript和jquery元素，但我一直想让网站具有响应性是在HTML / CSS3端进行媒体查询，但我只是想了解一下JS如何在所有方面发挥作用这样，我可以找到其他资源。

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

Answer 1

如果您希望手动编写应用程序，则可以对应用程序使用css媒体查询，否则，可以使用这些css库中的任何一个

1. 引导程序
2. 基础

希望这可以帮助。

Answer 2

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

但是请注意：

jQuery $（window）.width（）和CSS3媒体查询并不总是匹配。

资源

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了解更多详细信息

作为Web开发人员，重要的是要了解为什么要采用这种方法

HTML / CSS First方法的优点

• 专注于编写语义和干净的标记
• 更少的DOM操作
• 良好的标记减少了编写复杂JavaScript的需求
• 提高页面速度

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