随着移动设备用户数量的增加，响应式设计（responsive design）变得越来越流行。响应式设计是一种网站设计方法，能使网站在各种不同的设备上自适应地显示，包括不同尺寸的屏幕，如电脑、平板和手机等。
实现这种自适应的布局，需要一些 Javascript 的帮助。在本文中，我们将讨论响应式设计中使用 Javascript 实现响应式布局的方法。
1. 使用媒体查询
在响应式设计中，我们通常使用 CSS media queries 来为不同大小的屏幕应用不同的样式。具体实现方法是，当屏幕尺寸满足特定条件时，就可以应用相应的样式。
下面是一个基本的媒体查询示例，它可以在屏幕宽度小于等于 768 像素时应用特定的样式：
@media screen and (max-width: 768px) {
/* 应用特定的样式 */
}当然，我们也可以使用 Javascript 来检测屏幕尺寸，并动态地应用相应的 CSS 样式。下面是一个使用 Javascript 实现媒体查询的示例：
-- -------------------- ---- -------
-------- ------------- -
-- ------
--- ----- - ----------------- --
------------------------------------ --
--------------------------
-- ------ -- ---- -
-- -------
-- ---------
--- ------ - ------------------------------------
------------------ - ------
- ---- -
-- -------
-- ---------
--- ------ - ------------------------------------
------------------ - -------
-
-
-- -----------------
------------- - ------------
--------------- - ------------以上代码在应用样式时检测屏幕宽度，如果屏幕宽度小于等于 768 像素，则应用特定的样式。
2. 展示/隐藏元素
当屏幕尺寸改变时，有时需要动态地展示或隐藏某些元素，这就需要使用 Javascript 来实现。
下面是一个展示或隐藏元素的示例：
-- -------------------- ---- -------
-------- ------------- -
-- ------
--- ----- - ----------------- --
------------------------------------ --
--------------------------
-- ------ -- ---- -
-- -------
--- ------- - -------------------------------------
--------------------- - -------
- ---- -
-- -------
--- ------- - -------------------------------------
--------------------- - --------
-
-
-- -----------------------
------------- - ------------
--------------- - ------------以上代码在应用样式时检测屏幕宽度，如果屏幕宽度小于等于 768 像素，则隐藏特定的元素，否则展示特定的元素。
3. 动态地改变元素样式
最后但同样重要的是，我们可以使用 Javascript 动态地改变元素的样式，以适应屏幕尺寸。
下面是一个改变元素样式的示例：
-- -------------------- ---- -------
-------- ------------- -
-- ------
--- ----- - ----------------- --
------------------------------------ --
--------------------------
-- ---------
--- ------- - -------------------------------------
---------------------- - ----- - -- - -----
-
-- ----------------------
------------- - ------------
--------------- - ------------以上代码会在应用样式时检测屏幕宽度，然后动态地改变元素 myElement 的字体大小，以适应屏幕尺寸。
结论
在响应式设计中，Javascript 不仅可以检测屏幕尺寸并应用样式，还可以动态地展示/隐藏元素，以及动态地改变元素的样式。以上技巧可以帮助我们更好地实现响应式设计，以确保网站在各种不同的设备上都能正确地显示和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f109126fbf96019735b50d