响应式布局的简单案例

响应式布局是指网页能够在不同尺寸屏幕下（例如：电脑、平板、手机）保持一致的显示效果，而不需要设计多个不同的版本。下面是响应式布局的简单案例攻略。

简单案例攻略

步骤一：设置视口（Viewport）

在 HTML 文件的 head 标签中添加以下的代码，它能够确保网页在移动设备上正常显示：

<meta name="viewport" content="width=device-width, initial-scale=1">

步骤二：使用流式布局（Fluid Grid）

将网页布局分成等份的栏目，然后根据百分比来指定每个栏目的宽度。下面是一个例子：

<div class="row">
    <div class="col-4">
        栏目 1
    </div>
    <div class="col-4">
        栏目 2
    </div>
    <div class="col-4">
        栏目 3
    </div>
</div>

上述代码中，.row 是用来包含所有栏目的容器，.col-4 指定每个栏目的宽度为 33.33%（1/3）。

步骤三：使用媒体查询（Media Queries）

使用媒体查询来确定不同屏幕宽度下的样式，例如：

@media (max-width: 768px) {
    .col-4 {
        width: 50%;
    }
}

上述代码中，当屏幕宽度小于等于 768 像素时，栏目的宽度将变为 50%。

示例说明

1. 在电脑屏幕上，栏目的宽度是三分之一，当屏幕宽度小于等于 768 像素时，栏目的宽度会自动变为二分之一，这样手机用户就能更好地浏览网页内容。

<div class="row">
    <div class="col-4">
        栏目 1
    </div>
    <div class="col-4">
        栏目 2
    </div>
    <div class="col-4">
        栏目 3
    </div>
</div>

<style>
    .col-4 {
        width: 33.33%;
    }

    @media (max-width: 768px) {
        .col-4 {
            width: 50%;
        }
    }
</style>

1. 在电脑和平板屏幕上，网页会显示一个图像和一些文字，当屏幕宽度小于等于 768 像素时，图像和文字会分别显示在不同的行中。

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <img src="image.jpg" alt="">
        </div>
        <div class="col-md-6">
            <h2>网页标题</h2>
            <p>网页正文文字内容……</p>
        </div>
    </div>
</div>

<style>
    @media (max-width: 768px) {
        .col-md-6 {
            width: 100%;
        }
    }
</style>

以上是响应式布局的简单案例攻略和两个示例说明。需要注意的是，响应式布局不是一成不变的，需要考虑用户的需求、设备屏幕尺寸、流量限制等因素来进行灵活的适配。