媒体查询@media
一、常用写法
1.max-width上限（小于等于）
2.min-width 下限（大于等于）
二、其他写法
1.完整写法，min跟max用and链接
微信截图_20220411203015.png
微信截图_20220411202908.png
三、搭配@media做隐藏效果
微信截图_20220411203307.png
BootStrap
UI框架：将常见效果进行统一封装后形成的一套代码，封装了大量的HTML、CSS、JavaScript，只需要按照框架要求书写代码，即可快速完成对应的效果
作用
基于框架开发，效率高，稳定性高
下载 https://v3.bootcss.com/
压缩的代码，开发可以直接使用
使用bootstrap
min.css是压缩过的文件
微信截图_20220411211614.png
*改变组件样式时，最好自己起一个类名，不然容易覆盖原来的属性
.container 版心，自带间距15px
.container-fluid 通栏，类似于100%宽度
微信截图_20220411215518.png
栅格系统
作用：响应式布局
原理：将网页等分成12等分，每个元素占对应的份数，12的公约数多
使用：
1.大屏lg
响应断点>= 1200px
类前缀col-lg-*
版心1170px
2.中屏md （只规定下限，992以上的大屏都能生效）
响应断点>= 992px
类前缀
col-md-*
版心970px
3.小屏sm
响应断点>= 768
类前缀col-sm-*
版心750px
4.超小屏xs（一行排列一个，占据12份，可以等于一整个盒子）
响应断点< 768px
类前缀col-xs-*
版心100%
微信截图_20220411224556.png
全局CSS样式
按钮button、表单table、表格form
微信截图_20220411231633.png
组件
字体图标、路径导航、导航条
微信截图_20220412002028.png
微信截图_20220412002048.png
