【前端】响应式布局

news2024/11/15 11:09:53

1.媒体查询

2.BootStrap

2.1BootStrap引入

2.2BootStrap栅格系统

2.3BootStrap手册查询

1.媒体查询

响应式布局：显示区域改变，布局随之改变，即同一套代码适配不同大小的显示器

媒体查询：检测视口宽度，设置差异化CSS样式

媒体特性常用写法：

max-width：最大宽度
min-width：最小宽度

📖Note：

顺序不能乱，CSS样式具有层叠性

min-width：从小到大
max-width：从大到小

媒体查询完整写法：

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

and：两个条件
only：一个判断条件
not：非，取反

媒体是用来区分设备类型的，如屏幕设备，打印设备等，其中手机，电脑，平板都属于屏幕设备

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不区分类型	all	默认值，包括以上3种情形

媒体特性：主要用来描述媒体类型的具体特征，如当前屏幕的宽高，分辨率，横屏或竖屏等

特性名称	属性	值
视口的宽和高	width，height	数值
视口的最大宽或高	max-width，max-height	数值
视口的最小宽或高	min-width，min-height	数值
屏幕方向	orientation	portrait：竖屏 landscape：横屏

媒体查询引入：

<link rel="stylesheet" media="逻辑符媒体类型 and (媒体特性)" href=".css样式表">

一般只需要书写（媒体特性）属性，在符合媒体特性属性值时，执行对应的CSS样式

2.BootStrap

2.1BootStrap引入

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

官网：Bootstrap中文网 (bootcss.com)

下载BootStrap框架

使用：

引入：BootStrap提供的CSS代码：<link rel="stylesheet" href="../../../BootStrap/bootstrap-3.4.1-dist/css/bootstrap.css">
调用类：使用BootStrap提供的样式

2.2BootStrap栅格系统

栅格系统英文为“grid systems”,也有人翻译为“网格系统”，它是指将网页布局划分为等宽的列，然后通过列数的定义来模块化页面布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

栅格化是指将整个网页的宽度分成若干等份

BootStrap3默认将网页分成12等份

	超小屏幕	小屏幕	中等屏幕	大屏幕
响应断点	<768px	>=768	>=992px	>=1200px
别名	xs	sm	md	lg
容器宽度	100%	750px	970px	1170px
类前缀	col-xs-*	col-sm-*	col-md-*	col-lg-*
列数	12	12	12	12
列间隙	30px	30px	30px	30px

📖Note：

BootStrap中一行排列是浮动实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="../../bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>

        /* 需求：大屏一行排四个，中屏一行排两个 */
        .container div {
            height: 50px;
            background-color: pink;
        }

    </style>
</head>
<body>
    <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>

BootStrap中的常见类：

.container是BootStrap中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中，也称为响应式布局版心类
.container-fluid也是BootStrap中专门提供的类名，所有应用该类名的盒子，宽度均为100%
分别使用.row类名和.col类名定义栅格布局的行和列

📖Note：

container类自带内间距15px
row类自带外间距-15px