一、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> |
三、Bootstrap5的响应式
1.断点
Bootstrap5为我们提供了6个断点
断点名 | 类中缀 | 屏幕宽度 | container版心 |
最小 | 无 | <576px | 宽度:100% |
小号 | sm | ≥576px | 宽度:540px |
中号 | md | ≥768px | 宽度:720px |
普通 | lg | ≥992px | 宽度:960px |
大号 | xl | ≥1200px | 宽度:1140px |
超大号 | xxl | ≥1400px | 宽度:1320px |
2.天沟
天沟是某些类中左右各0.75rem的内间距,使得元素中的内容不会直接贴到左右两侧。
3.容器
容器其实就是我们常说的版心
- 定宽容器 .container 依靠响应式,在某一个范围的视口宽度内,使用一个固定的宽度(参照上方断点的表格),并且这个类有天沟
- 变宽容器 .container-fluid一直保持和页面视口同宽,并有天沟