移动端网页和Bootstrap框架
1.视口：用来约束HTML尺寸
<!-- 视口标签是HTML骨架默认生成的 设置网页宽度与逻辑分辨率(即设备)宽度一致 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.二倍图：防止设计稿图片在高分辨率屏幕下模糊失真
3.适配方案：
- 宽度适配：百分比布局|Flex布局
- 等比适配：宽高等比缩放
- rem
- vw
4.rem适配方案
-
定义：rem是相对单位，相对于HTML标签的字号计算结果，1rem=1HTML字号大小
-
手机屏幕大小分辨率不同，如何设置不同的HTML标签字号？
使用媒体查询，检测视口宽度，然后编写差异化的CSS样式
<style> /* 视口宽度若为375，网页背景颜色就为绿色 */ @media (width:375px){ body{ background-color: green; } } </style> -
不同大小的手机，对应HTML字号大小设置为多少合适？
将网页分为10等分，一般设置为1/10
<style>
/* 1.使用媒体查询，给不同视口的屏幕设置不同的HTML字号 */
@media (width:375px){
html {
font-size: 37.5px;
}
}
@media (width:320px) {
html{
font-size: 32px;
}
}
/* 2.使用rem单位书写尺寸 */
.box{
width: 5rem;
height: 3rem;
background-color: pink;
}
</style>
-
rem-flexible.js——根据不同视口宽度给网页中html根节点设置不同的font-size
-
rem值=px值 / （1/10视口宽度）
<body> <script src="./js/flexible.js"></script> </body>
5.less——css预处理器，使css有一定的逻辑性、计算能力
- 作用：
- 在使用rem时，已知px要使用rem要进行换算，自己算的话比较麻烦
- 使用less嵌套可以快速生成后代选择器
- less运算：加、减、乘、除直接写计算表达式，除法需要加小括号
- less嵌套
- less变量：
- 定义变量：@变量名：值
- 使用变量：@变量名
- less导入：@import “文件路径”
- .less文件导出css：在less文件开头：//out:文件路径
6.vw、vh适配方案
- vw参照视口宽度，vh参照视口高度
- vw=1/100视口宽度，vh=1/100视口高度
- 一般只用vw和vh其中一种
- vw值=px值 / (视口宽度/100)
7.响应式网页——一套代码适配所有屏幕
-
媒体查询给不同视口的屏幕设置不同的CSS样式
@media (媒体特性){ 选择器{ 样式 } }-
媒体特性：
max-width:小于该视口宽度 | min-width:大于该视口宽度
-
注意书写顺序：min-width(从小到大)，max-width(从大到小)
-
-
Bootstrap框架
-
概念：前端UI框架，提供大量编写好的CSS样式
-
准备：到Bootstrap官网下载Bootstrap v5文件复制所需的CSS文件到项目中，常用bootstrap.min.css
-
使用Bootstrap实现响应式步骤：
1.引入Bootstrap CSS文件
<link rel="stylesheet" href="./bootstrap.min.css">2.调用类名：container:响应式布局版心类
<div class="container"></div> -
Bootstrap栅格系统：将网页的宽度分为12等份，每个盒子占用对应的份数
6个响应区间对应的大小和类前缀
xs sm md lg xl xxl <576px >=576px >=768 >=992px >=1200px >=1400px Container(max-width) None 540px 720px 960px 1140px 1320px Class prefix .col .col-sm- .col-md- .col-lg- .col-xl- .col-xxl <body> <!-- 视口宽度大于等于1200px,一行排4个 视口宽度大于等于768px，一行排2个 视口宽度大于等于576px,一行排1个盒子 --> <!-- container类实现版心响应式 --> <div class="container"> <!-- row配合子级的份数实现行排列响应式 子级份数分配方式，总共12份，按照排几个每个平分 即排四个则每个3份 类名=对应类前缀+份数 --> <div class="row"> <div class="col-xl-3 col-md-6 col-sm-12">1</div> <div class="col-xl-3 col-md-6 col-sm-12">2</div> <div class="col-xl-3 col-md-6 col-sm-12">3</div> <div class="col-xl-3 col-md-6 col-sm-12">4</div> </div> </div> </body> -
Bootstrap全局样式
Button类：
-
btn：默认样式，
-
btn-success：成功
-
btn-warning：警告
…
注意：类名不用记，去Bootstrap官方文档中找对应的即可
表格类：
-
table:默认样式
-
table-striped:隔行变色
-
table-success:表格颜色
…
<button class="btn btn-success btn-lg">按钮1</button> <table class="table table-hover"> <tr> <th>学号</th> <th>姓名</th> <th>班级</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> -
-
Bootstrap组件（Components）
具体样式及代码去官网文档查询即可，记得要先引入js和css样式
1.引入样式表
2.引入js文件（js在body标签的最底部）
3.复制结构，修改内容
-
Bootstrap字体图标
-
下载：导航：图标库——安装——下载安装包——bootstap-icons-1.X.X.zip
-
使用：
1.复制fonts文件夹到项目目录
2.网页引入bootstrap-icons.css文件
3.调用css类名
-
-
注意：引入顺序自身写的css必须在框架css的后面
-