移动适配

视口

作用：显示 HTML 网页的区域，用来约束 HTML 的尺寸

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!– 视口标签 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>
</head>
<body>
  
</body>
</html>
  • width=device-width：视口宽度 = 设备宽度
  • initial-scale=1.0：缩放1倍（不缩放）

屏幕分辨率

分类：

  • 物理分辨率：硬件分辨率（出厂设置）
  • 逻辑分辨率：软件 / 驱动设置

结论：制作网页参考 逻辑分辨率

1681811157520.png

适配方案

  • 宽度适配：宽度自适应

    • 百分比布局
    • Flex 布局

  • 等比适配：宽高等比缩放

    • rem
    • vw

rem

简介

  • rem单位，是相对单位
  • rem单位是相对于HTML标签的字号计算结果
  • 1rem = 1HTML字号大小

媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式

1681811369469.png

1
2
3
4
5
@media (width:320px) {
  html {
    background-color: green;
  }
}

rem 布局

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10。

1681811438512.png

flexible.js

flexible.js是手机淘宝团队开发出的一个用来适配移动端的 js 库。
核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。

1
2
3
4
<body>
  ......
  <script src="./js/flexible.js"></script>
</body>

rem 移动适配

rem单位尺寸

  1. 确定基准根字号
  • 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
  1. rem单位的尺寸
  • rem单位的尺寸 = px单位数值 / 基准根字号

less

Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力

注意：浏览器不识别 Less 代码，目前阶段，网页要引入对应的 CSS 文件

VS Code 插件：Easy LESS，保存 less文件后自动生成对应的 CSS 文件

注释

  • 单行注释

    • 语法：// 注释内容
    • 快捷键：ctrl + /

  • 块注释

    • 语法：/* 注释内容 */
    • 快捷键： Shift + Alt + A

运算

  • 加、减、乘直接书写计算表达式
  • 除法需要添加 (小括号) 或 .
  • 表达式存在多个单位以第一个单位为准

1681811616094.png

嵌套

作用：快速生成后代选择器
用 & 表示当前选择器，不会生成后代选择器，通常配合伪类或伪元素使用

1
2
3
4
5
6
7
8
9
.father {
	color: red; /*父级样式*/
	.son {
		width: 100px; /*子级样式*/
	}
	&:hover {
		color: blue;
	}
}

变量

概念：容器，存储数据
作用：存储数据，方便使用和修改
语法：

  • 定义变量：@变量名: 数据;
  • 使用变量：CSS属性：@变量名;
1
2
3
4
5
6
7
8
9
// 定义变量
@myColor: pink;
// 使用变量
.box {
  color: @myColor;
}
a {
  color: @myColor;
}

导入导出

导入

作用：导入 less 公共样式文件
语法：导入: @import “文件路径”;
提示：如果是 less 文件可以省略后缀

1
2
@import './base.less';
@import './common';

导出

写法：在 less 文件的第一行添加 // out: 存储URL
提示：文件夹名称后面添加 /

1
2
// out: ./index.css
// out: ./css/

禁止导出

写法：在 less 文件第一行添加:  // out: false

vw

vw和vh基本使用

vw和vh是相对单位，相对视口尺寸计算结果

  • vw：viewport width（1vw = 1/100视口宽度 ）
  • vh：viewport height ( 1vh = 1/100视口高度 )

vw布局

确定设计稿对应的vw尺寸（1/100视口宽度）

  • 查看设计稿宽度 -> 确定参考设备宽度（视口宽度） -> 确定vw尺寸（1/100视口宽度）

vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )

vh问题

  • 开发实践中，vw和vh不能混用
  • vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形

响应式网页

媒体查询

基础写法

1681811369469.png

  • max-width：最大宽度（小于等于）
  • min-width：最小宽度（大于等于）
1
2
3
4
5
6
7
8
9
10
11
12
/*屏幕宽度小于等于320px*/
@media (max-width:320px) {
  html {
    background-color: green;
  }
}
/*屏幕宽度大于等于320px*/
@media (min-width:320px) {
  html {
    background-color: green;
  }
}

书写顺序

需求：

  • 默认网页背景色为灰色
  • 屏幕宽度大于等于768px，为粉色
  • 屏幕宽度大于等于992px，为绿色
  • 屏幕宽度大于等于1200px，为skyblue
  • min-width（从小到大）
  • max-width（从大到小）

完整写法

1682668186585.png

关键词 / 逻辑操作符

  • and
  • only
  • not

媒体类型

媒体类型用来区分设备类型

类型名称 值 描述
屏幕 screen 带屏幕的设备
打印预览 print 打印预览模式
阅读器 speech 屏幕阅读模式
不区分类型 all 默认值，包括上述三种

媒体特性

特性名称 属性 值
视口宽高 width、height 数值
视口最大宽高 max-width、max-height 数值
视口最小宽高 min-width、min-height 数值
屏幕方向 orientation protrait：竖屏
landscape：横屏

外部CSS

1
2
<!--实际使用中，通常只写(媒体特性)-->
<link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xxx.css">

Bootstrap

简介

Bootstrap 是由 Twitter 公司（现在应该叫X）开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

中文官网：https://www.bootcss.com/
中文开发文档：https://v5.bootcss.com/docs/getting-started/introduction/

使用步骤

下载

下载：Bootstrap V5中文文档 → 进入中文文档 → 下载 →下载 Bootstrap 生产文件

image.png

使用

  1. 引入 Bootstrap CSS 文件
1
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
  1. 调用类名： container 响应式布局版心类
1
<div class="container">测试</div>

栅格系统

作用：响应式布局

栅格化是指将整个网页的宽度分成12等份，每个盒子占用的对应的份数

例如：一行排4个盒子，则每个盒子占 3份 即可（12 / 4 = 3）

1682668611644.png

  • col-*-*：列（例如：col-xxl-3，表示在xxl的宽度占3份）
  • row：行，可以让内容在一行排（flex布局）

全局样式

按钮

1682668666364.png
类名

  • btn：默认样式
  • btn-success：成功
  • btn-warning：警告
  • ……
  • 按钮尺寸：btn-lg / btn-sm

表格

1682668706851.png
表格类：

  • table：默认样式
  • table-striped：隔行变色
  • table-success：表格颜色
  • ……

组件

  1. 引入样式表

  2. 引入 js 文件

  3. 复制结构，修改内容

字体图标

下载

导航 / Extend：图标库 → 安装 → 下载安装包 → bootstrap-icons-1.X.X.zip

使用

  1. 复制 fonts 文件夹到项目目录
  2. 网页引入 bootstrap-icons.css 文件
  3. 调用 CSS 类名（图标对应的类名）
1
<i class="bi-android2"></i>