---
title: "IT课程 CSS基础 033_响应式布局"
date: 2024-02-18T22:10:00.000Z
tags: ["IT课程", "HTML课程", "CSS课程", "JavaScript课程", "Java课程", "计算机系统与网络", "css布局", "响应式布局"]
categories: ["学习", "CSS基础"]
canonical: https://www.zhaojian.net/it-course-css-033/
author: 赵健
---

### 响应式布局

响应式布局是一种能够适应不同屏幕尺寸和设备的网页设计方法。通过使用响应式布局，可以使网页在不同的设备上保持良好的显示效果，无论是在桌面电脑、平板电脑还是手机上。

##### 媒体查询

使用 CSS 的媒体查询可以根据设备的特征（如屏幕宽度、高度、设备类型等）应用不同的样式。这使得你可以为不同的屏幕尺寸定义不同的布局。

示例：

```css
/* PC */
@media (min-width: 992px) {
    * {
        background: yellow
    }
}
/* 平板电脑 */
@media (min-width: 768px) and (max-width: 992px) {
    * {
        background: red
    }
}
/* 普通手机 */
@media (min-width: 576px) and (max-width: 768px) {
    * {
        background: green
    }
}
/* 小屏设备 */
@media (max-width: 576px) {
    * {
       background: blue
    }
}
```

效果：
![示例效果](/uploads/2024/02/msedge_ARaxditC5I.gif)

##### 响应式图片
使用 `max-width: 100%;` 来确保图像和媒体元素在小屏幕上不会超出其容器。
示例：

```css
    img {
      max-width: 100%; /* 图像最大宽度为其包含元素的100% */
      height: auto;    /* 保持宽高比，防止图像变形 */
    }

    /* 在小屏幕上调整图像大小 */
    @media screen and (max-width: 600px) {
      img {
        max-width: 50%; /* 图像最大宽度为其包含元素的50% */
      }
    }
```

```html
    <img src="zhaojian.jpg" alt="Responsive Image">
```

效果：
![示例效果](/uploads/2024/02/msedge_Jyf0SFhx5t.gif)


##### 视口设置
使用 `<meta>` 标签设置视口，以确保页面在移动设备上正确缩放。

示例：

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

这个元标签告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度，将文档放大到其预期大小的 100%，在移动端以你所希望的为移动优化的大小展示文档。

和视口元标签一起，你可以使用另外几个设定，但大体说来，上面那行就是你想要使用的。

- `initial-scale`：设定了页面的初始缩放，我们设定为 1。
- `height`：特别为视口设定一个高度。
- `minimum-scale`：设定最小缩放级别。
- `maximum-scale`：设定最大缩放级别。
- `user-scalable`：如果设为 no 的话阻止缩放。

避免使用minimum-scale、maximum-scale，尤其是 user-scalable设置为no。以保证用户可自行缩小、放大。