一、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框架的目的不是为了用，是为了学会如何查阅框架的手册

手册文档：

其它版本：

3.下载生产文件

4.Bootstrap5的html模板