响应式网页

虾小眠0526

已于 2023-03-29 11:27:23 修改

阅读量743

点赞数 1

分类专栏：前端学习之旅文章标签： css html css3

于 2023-03-29 11:25:33 首次发布

本文链接：https://blog.csdn.net/weixin_58470558/article/details/129802048

版权

前端学习之旅专栏收录该内容

60 篇文章 2 订阅

订阅专栏

响应式网页：同一套代码适配不同的屏幕宽度

1. 媒体查询

目标：能够根据设备宽度的变化，设置差异化样式

常用写法：

/* 媒体特性采用写法
        max-width
        min-width */
@media(媒体特性){
	选择器{
		样式
	}
}
/* 视口宽度小于等于768px， 网页背景色是粉色 */
        @media (max-width: 768px) {
            body {
                background-color: pink;
            }
        }

/* 视口宽度大于等于1200px， 网页背景色是skyblue */
        @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        }

媒体查询的书写顺序

css属性都有层叠性：
min-width(从小到大)
max-width(从大到小)

/*
            视口宽度 >= 768px，网页背景色是 粉色
            视口宽度 >= 992px，网页背景色是 绿色
            视口宽度 >= 1200px，网页背景色是 skyblue
*/
		@media (min-width: 768px) {
            body {
                background-color: pink;
            }
        }
        @media (min-width: 992px) {
            body {
                background-color: green;
            }
        }
        @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        }

完整写法（了解即可）：

@media 关键词 媒体类型 and（媒体特性）{css代码}

媒体查询 – 外联式引入css

<link rel="stylesheet" media="逻辑符 媒体类型 and （媒体特性）" href="xx.css" >

<!-- 视口宽度 >= 992px，网页背景色为粉色 -->
<!-- 视口宽度 >= 1200px，网页背景色为绿色 -->
<link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
<link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">

媒体查询 – 隐藏侧边栏

在相应类的css属性添加display: none;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 100%;
        }

        .left {
            width: 300px;
            min-height: 500px;
            background-color: pink;
        }

        .main {
            flex: 1;
            min-height: 500px;
            background-color: skyblue;
        }

        /* 如果检测到视口宽度小于768px,  left隐藏 */
        @media (max-width: 768px) {
            .left {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">left</div>
        <div class="main">响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页</div>
    </div>
</body>
</html>

2. BootStrap

目标：使用BootStrap框架快速开发响应式网页

Bootstrap 是由 Twitter 公司开发维护的前端 UI框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果

2.1 BootStrap下载

中文官网: https://www.bootcss.com/

首页 --> BootStrap3中文文档 --> 下载BootStrap

2.2 BootStrap使用

步骤：

引入： BootStrap提供的CSS代码

<link rel="stylesheet" href="/bootstrap-3.3.7/css/bootstrap.css">

调用类：使用Bootstrap提供的样式

container：响应式布局版心类

2.3 BootStrap栅格系统

目标：使用BootStrap栅格系统布局响应式网页

原理

栅格化是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成12等份
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>栅格系统</title>
    <!-- 1. 引入 -->
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

    <style>
        .container div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 需求: 大屏: 一行排列4个内容; 中屏:一行排列2个内容 -->
    <!-- 2.调用类 -->
    <div class="container">
        <div class="col-lg-3 col-md-6">1</div>
        <div class="col-lg-3 col-md-6">2</div>
        <div class="col-lg-3 col-md-6">3</div>
        <div class="col-lg-3 col-md-6">4</div>
    </div>
    
</body>
</html>

栅格系统相关类

.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中

.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%

分别使用**.row类名和.col类名**定义栅格布局的行和列。

注意：

container类自带间距15px;
row类自带间距-15px

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>栅格系统-类</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        div {
            height: 50px;
            background-color: pink;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
    <!-- 版心样式:自带左右各15px的padding -->
    <div class="container">1</div>

    <!-- row类作用就是抵消container类的15px的内边距, row有-15px的外边距 -->
    <div class="container">
        <div class="row">2</div>
    </div>

    <!-- 宽度100%:自带左右各15px的padding -->
    <div class="container-fluid">3</div>
</body>
</html>