CSS day_09(6.22) css优化、响应式页面、Bootstrap5的响应式

最新推荐文章于 2024-05-12 09:44:11 发布

加1床铺盖

最新推荐文章于 2024-05-12 09:44:11 发布

阅读量334

点赞数

分类专栏： CSS(6.10-6.29)

本文链接：https://blog.csdn.net/m0_70328115/article/details/125403175

版权

css 前端 css3 html

CSS(6.10-6.29) 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一、CSS优化

1.css的文件大小

css会随着样式的增多，文件越来越大，适当的可以使用压缩工具，压缩代码，注释和格式化的空格会被删掉，网上有很多代码压缩工具，一般用哪个都行Css代码压缩/解压缩格式化 - 站长工具

2.删除未使用的css样式

css样式或者选择器，有可能没有用掉，没用到的就删掉。

减少不必要的类选择器，尽量多使用关系型，和群组类的选择器

3.css文件的使用

一般情况下尽量使用外部样式，便于修改，复用性高

直接写内部样式是可以减少对服务器的请求次数

4.高效的使用css动画

css动画是渲染式的，比js编译式的要快，在网速较慢时用户体验更快

5.css hank

在不同浏览器中，元素的样式渲染不同。根据自己的项目，或者公司的规定做css样式重置

对某些元素的内外间距清空
a的下划线
ul，ol 的内外间距和标识符
input 的轮廓线
基础字体和字号
清除浮动
PC端版心的设置

二、响应式页面

1.响应式的概念

随着多种终端兴起，多种规格的页面需要向用户展示。让多种终端打开页面时展示的都是相同内容，但布局更适合当前终端。

响应式也叫“自适应”页面，根据当前设备的浏览器，视口（可视区域）变化，使用媒体查询规则，将不同宽度的css写入，来改变页面变化。

2.设备的宽度设置

如果写响应式或者移动端，必须有以下标签

width=device-width 视口等于设备宽度
initial-scale=1.0 初始化视口不缩放

3.媒体查询

媒体查询@media给与媒体类型（可省默认pc，移动），给与宽度范围

宽度范围，也叫“断点”.

4.设计响应式断点

在开发中，可能使用框架做响应式，也可能自己手写响应式断点，

5.相对视口的尺寸单位

参照vw代表视口的宽度单位，参照vh代表视口的高度的单位。

参照物是浏览器可视区域的比例大小0-100，可视区域不包括任务栏，底部工作栏，浏览器地址栏。

1vw==视口宽度的1% 100vw==整个视口宽度

1hw==视口高度的1% 100hw==整个视口高度

三、框架

1.Bootstrap概述

Bootstrap 是全球最流行的前端开源工具包，它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。

简单说，是一个开源UI框架。内置了大量的css类库，可以直接使用类名渲染元素。js的库，来帮助元素实现交互效果。

2011年诞生，到现在经历了5个版本，现在咱们学第五个版本Bootstrap5。

2.Bootstrap5

注意事项：学习UI框架的目的不是为了用，是为了学会如何查阅框架的手册

手册文档：

简介 · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网

其它版本：

Versions · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网

3.下载生产文件

软件包中的内容 · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网

4.Bootstrap5的html模板

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/bootstrap-icons.css">
<script src="../js/bootstrap.bundle.js"></script>
<title>Document</title>
<style></style>
</head>
<body>
<div class="container"></div>
</body>
</html>

三、Bootstrap5的响应式

1.断点

Bootstrap5为我们提供了6个断点

断点名	类中缀	屏幕宽度	container版心
最小	无	<576px	宽度：100%
小号	sm	≥576px	宽度：540px
中号	md	≥768px	宽度：720px
普通	lg	≥992px	宽度：960px
大号	xl	≥1200px	宽度：1140px
超大号	xxl	≥1400px	宽度：1320px