随着移动设备和平板电脑的日益普及，响应式设计已成为了现代 web 开发中的重要部分。一个好的响应式设计需要两种响应方式，一种是支持多种屏幕尺寸的响应式布局，一种是能够对不同屏幕大小做出适当的反应。在本文中，我们将关注前一种响应方式：响应式布局的实现。
什么是响应式布局？
响应式布局是一种web设计方式，它根据设备的屏幕尺寸自动调整网页的布局和内容。这种方法使得网页能够在不同屏幕尺寸的设备上正确地显示，例如，它可以使得同一网站在一个电脑屏幕、一个平板电脑或者一个手机上看起来都一样好。
响应式布局通常涉及使用一个基于网格布局的框架，例如 Bootstrap 或者 Foundation。
实现方法
下面是实现响应式布局的基本步骤：
1. 创建一个网格系统
一个网格系统可以使得你的网站在不同屏幕尺寸下看起来一样。你可以使用 Bootstrap、Foundation 或者其他的网格系统来实现它。
<div class="row"> <div class="col-sm-4 col-md-3 col-lg-2">内容1</div> <div class="col-sm-4 col-md-3 col-lg-2">内容2</div> <div class="col-sm-4 col-md-3 col-lg-2">内容3</div> <div class="col-sm-4 col-md-3 col-lg-2">内容4</div> <div class="col-sm-4 col-md-3 col-lg-2">内容5</div> <div class="col-sm-4 col-md-3 col-lg-2">内容6</div> </div>
这段代码中的 col-sm-4 col-md-3 col-lg-2 表示这个 div 元素将在小、中、大三种屏幕尺寸下分别占据 4、3、2 个网格单元。
2. 使用媒体查询
媒体查询是一个能够根据设备的屏幕尺寸来选择不同 CSS 样式的方法。你可以使用 CSS @media 规则来实现媒体查询，指定哪些样式将应用到小屏幕、中等屏幕或大屏幕。
-- -------------------- ---- ------- ------ ----------- ------ - -- ---- -- --------- - ------ ---- ------ ----- - - ------ ----------- ------ - -- --- -- --------- - ------ ------------- ------ ----- - -展开代码
这段代码中的 @media (min-width: 768px) 表示当屏幕宽度不小于 768 像素时应用这些样式。@media (min-width: 992px) 表示当屏幕宽度不小于 992 像素时应用这些样式。
3. 混合使用媒体查询和网格布局
媒体查询和网格布局的混用是实现响应式设计的常用方法。如果你希望在某个屏幕尺寸下显示不同数量的网格单元，你可以在媒体查询中改变 col-* 类的属性值。
@media (max-width: 768px) { /* 小屏幕 */ .col-sm-4 { width: 50%; float: left; } }
这段代码中的 @media (max-width: 768px) 表示当屏幕宽度不大于 768 像素时应用这些样式。col-sm-4 将在这种情况下只占据 2 个网格的宽度。
示例代码
这里是一个基于 Bootstrap 的响应式布局例子：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------------------- ----- ---------------- ------------------------------------------------------------------------------- ------- ------- - ------------- ---- -------------- ---- - ----------- - ---------- ----- - ------ ----------- ------ - ------- - ------ ----- ------ ---- - ----------- - ------------ ---- -------- ------ - - -------- ------- ------ ---- ------------------------ ---------------- ---- ------------ ---- --------------- -------- ---------- ---- -------------- ----------------------------------- ------- ----- ----------------------------- ------ ---- --------------- -------- ---------- ---- -------------- ----------------------------------- ------- ----- ----------------------------- ------ ---- --------------- -------- ---------- ---- -------------- ----------------------------------- ------- ----- ----------------------------- ------ ------ ------ ------- ---------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------ ------- --------------------------------------------------------------------------------------------- ------- -------展开代码
在这个例子中，我们使用了 Bootstrap 的网格布局和媒体查询来实现响应式布局。@media 规则使得图片和标题在中等屏幕以上排列到了同一行。在小屏幕下，由于网格布局会按行自动换行，图像将平铺在网页上，并且较长的标题将在图片下方显示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bb8346306f20b3a6b1b980
