从0开始学前端第十六课：响应式设计基础

mls学习小记

已于 2024-01-24 17:09:39 修改

阅读量340

点赞数 7

分类专栏：从0开始学前端文章标签：前端

于 2024-01-24 16:50:58 首次发布

本文链接：https://blog.csdn.net/weixin_44738632/article/details/135826424

版权

从0开始学前端专栏收录该内容

81 篇文章 1 订阅

订阅专栏

本文介绍了响应式设计的核心概念，包括媒体查询的应用、流式布局的原理以及如何使用相对单位和Bootstrap框架来创建灵活的布局。通过实例展示了如何在HTML中实现响应式设计和使用Bootstrap栅格系统进行布局调整。

摘要由CSDN通过智能技术生成

第十六课：响应式设计基础

学习目标

在本课中，我们将学习响应式网页设计的基本概念，目标如下：

理解响应式设计的概念和重要性。
学习使用媒体查询来实现响应式设计。
掌握流式布局的基本原理。
学习如何使用相对单位和百分比来创建灵活的布局。
了解如何利用框架简化响应式设计，例如Bootstrap。

学习内容

1. 响应式设计概念

响应式网页设计（Responsive Web Design，RWD）指的是能够自适应不同屏幕大小和分辨率的网页设计。一个响应式的网页能够在手机、平板电脑和桌面电脑上提供良好的浏览体验，无需为每种设备做特定的设计。

2. 媒体查询

媒体查询是响应式设计中的核心技术，允许你根据不同的屏幕尺寸或设备特性应用不同的CSS样式。

基本语法：

@media (max-width: 600px) {
  /* 当屏幕宽度小于或等于600像素时，应用以下样式 */
  body {
    background-color: lightblue;
  }
}

3. 流式布局

流式布局是一种灵活的布局方式，通常使用百分比来设置宽度，使元素宽度随着屏幕或容器大小的变化而变化。

示例：
```
.container {
  width: 100%;
}
.column {
  float: left;
  width: 50%;
}
```
在这里，.container 占据了100%的父元素宽度，而 .column 则占据了父容器宽度的50%。

4. 相对单位和百分比

使用相对单位（如em, rem, %）而不是绝对单位（如px）可以增强网页的灵活性。

em和rem：
em 基于父元素的字体大小，而 rem 基于根元素的字体大小。
```
p {
  font-size: 1.2em;
}
```
1.2em 表示字体大小是父元素字体大小的1.2倍。
百分比：
百分比单位通常用于布局，可以相对于父元素的大小。
```
.wrapper {
  width: 80%;
}
```
.wrapper 的宽度是其父元素宽度的80%。

5. 框架使用

框架，如Bootstrap，提供了预设的响应式设计组件和工具类，可以简化响应式网页的开发。

Bootstrap栅格系统：
Bootstrap的栅格系统允许你通过预定义的类来创建响应式的布局。

<div class="container">
  <div class="row">
    <div class="col-md-6">内容</div>
    <div class="col-md-6">内容</div>
  </div>
</div>

课后练习

创建一个简单的页面，包含一个导航栏、几个内容区域和一个页脚。
使用媒体查询添加至少两个断点，以改善小屏幕和大屏幕上的显示效果。
实现一个流式布局，使内容区域的宽度根据浏览器窗口的大小变化。
使用Bootstrap框架的栅格系统实现一个响应式的布局。

解析

HTML部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式设计练习</title>
    <!-- 引入Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        /* 通用样式 */
        body {
            font-family: Arial, sans-serif;
        }

        /* 媒体查询，针对小屏幕和大屏幕的样式调整 */
        @media (max-width: 768px) {
            .column {
                width: 100%;
                margin-bottom: 20px;
            }
        }

        @media (min-width: 769px) {
            .column {
                width: 45%;
                margin-right: 10%;
            }
            
            .column:last-child {
                margin-right: 0;
            }
        }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">响应式网站</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">主页 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">功能</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">价格</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">禁用</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container mt-4">
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <h2>栏目1</h2>
            <p>这里是内容...</p>
        </div>
        <div class="col-sm-12 col-md-6">
            <h2>栏目2</h2>
            <p>这里是内容...</p>
        </div>
    </div>
</div>

<footer class="footer mt-4 py-3 bg-dark text-white text-center">
    版权所有 &copy; 2024
</footer>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

在这个练习中，我们使用了Bootstrap框架来创建一个响应式布局，并且依据不同屏幕大小使用媒体查询来调整样式。当屏幕宽度小于768px时，每个栏目宽度调整为100%，堆叠显示；当屏幕宽度大于或等于768px时，栏目横排显示，每个栏目宽度为45%，且第二个栏目右侧没有外边距。

这个练习将加深你对媒体查询、流式布局以及Bootstrap栅格系统的理解，并帮助你构建更加灵活和响应式的网页布局。

章节目录
 第十七课：动画和过渡

mls学习小记

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
从0开始学前端第十六课：响应式设计基础

响应式网页设计（Responsive Web Design，RWD）指的是能够自适应不同屏幕大小和分辨率的网页设计。一个响应式的网页能够在手机、平板电脑和桌面电脑上提供良好的浏览体验，无需为每种设备做特定的设计。流式布局是一种灵活的布局方式，通常使用百分比来设置宽度，使元素宽度随着屏幕或容器大小的变化而变化。媒体查询是响应式设计中的核心技术，允许你根据不同的屏幕尺寸或设备特性应用不同的CSS样式。框架，如Bootstrap，提供了预设的响应式设计组件和工具类，可以简化响应式网页的开发。/* 通用样式 */
复制链接

扫一扫