文章目录
- 移动 Web
- 一、平面转换
- 1. 平移
- 2. 旋转
- 3. 渐变
- 二、空间转换
- 1. 平移
- 2. 旋转
- 3. 动画
- 三、移动适配
- 1. 谷歌模拟器
- 2. rem
- 3. less
- 4. vw
- 四、响应式布局
- 1. 媒体查询
- 2. Bootstrap
移动 Web
一、平面转换
作用：为元素添加动态效果，一般与过渡配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
平面转换也叫 2D 转换，属性是 transform
1. 平移
transform: translate(X轴移动距离, Y轴移动距离);
- 取值
- 像素单位数值
- 百分比（参照盒子自身尺寸计算结果）
- 正负均可
- 技巧
- translate() 只写一个值，表示沿着 X 轴移动
- 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()
定位居中
- 方法一：margin
- 方法二：平移 → 百分比参照盒子自身尺寸计算结果
2. 旋转
transform: rotate(旋转角度);
- 取值：角度单位是 deg
- 技巧
- 取值正负均可
- 取值为正，顺时针旋转
- 取值为负，逆时针旋转
转换原点
默认情况下，转换原点是盒子中心点
transform-origin: 水平原点位置 垂直原点位置;
取值：
- 方位名词（left、top、right、bottom、center）
- 像素单位数值
- 百分比
多重转换
多重转换技巧：先平移再旋转
transform: translate() rotate();
- 多重转换原理：以第一种转换方式坐标轴为准转换形态
- 旋转会改变网页元素的坐标轴向
- 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
缩放
transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);
- 技巧
- 通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
- 取值大于1表示放大，取值小于1表示缩小
倾斜
transform: skew();
取值：角度度数 deg
3. 渐变
渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景
分类：
- 线性渐变
- 径向渐变
线性渐变
background-image: linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置,
......
);
取值：
- 渐变方向：可选
- to 方位名词
- 角度度数
- 终点位置：可选
- 百分比
径向渐变
background-image: radial-gradient(
半径 at 圆心位置,
颜色1 终点位置,
颜色2 终点位置,
......
);
取值：
- 半径可以是2条，则为椭圆
- 圆心位置取值：像素单位数值 / 百分比 / 方位名词
二、空间转换
- 空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。
- 空间转换也叫 3D转换
- 属性：transform
1. 平移
transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();
取值与平面转换相同
默认情况下，Z 轴平移没有效果，原因：电脑屏幕默认是平面，无法显示 Z 轴平移效果
视距
作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果
透视效果：近大远小、近实远虚
属性：(添加给父级，取值范围 800-1200)
perspective: 视距;
2. 旋转
-
Z 轴：rotateZ()
-
X 轴：rotateX()
-
Y 轴：rotateY()
左手法则
作用：根据旋转方向确定取值正负
使用：左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向
rotate3d-了解
- rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
- x，y，z 取值为0-1之间的数字
立体呈现
作用：设置元素的子元素是位于 3D 空间中还是平面中
属性名：transform-style
属性值：
- flat：子级处于平面中
- preserve-3d：子级处于 3D 空间
缩放
transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();
3. 动画
- 过渡：实现两个状态间的变化过程
- 动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
动画实现步骤
- 定义动画
/* 方式一 */
@keyframes 动画名称 {
from {}
to {}
}
/* 方式二 */
@keyframes 动画名称 {
0% {}
10% {}
......
100% {}
}
- 使用动画
animation: 动画名称 动画花费时长;
animation复合属性
提示：
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
animation拆分写法
精灵动画
- 核心
-
制作步骤
1.准备显示区域
盒子尺寸与一张精灵小图尺寸相同
2.定义动画
移动背景图（移动距离 = 精灵图宽度）
3.使用动画
steps(N)，N 与精灵小图个数相同
div {
width: 140px;
height: 140px;
border: 1px solid #000;
background-image: url(./images/bg.png);
animation: run 1s steps(12) infinite;
}
@keyframes run {
from {
background-position: 0 0;
}
to {
background-position: -1680px 0;
}
}
多组动画
animation:
动画一,
动画二,
... ...
;
三、移动适配
1. 谷歌模拟器
模拟移动设备，方便查看页面效果
屏幕分辨率
分类：
- 物理分辨率：硬件分辨率（出厂设置）
- 逻辑分辨率：软件 / 驱动设置
结论：制作网页参考 逻辑分辨率
视口
作用：显示 HTML 网页的区域，用来约束 HTML 的尺寸
<!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倍（不缩放）
二倍图
概念：设计稿里面每个元素的尺寸的倍数
作用：防止图片在高分辨率屏幕下模糊失真
使用方法：
适配方案
-
宽度适配：宽度自适应
- 百分比布局
- Flex 布局
-
等比适配：宽高等比缩放
- rem
- vw
2. rem
- rem单位，是相对单位
- rem单位是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小
媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式
@media (width:320px) {
html {
background-color: green;
}
}
rem 布局
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10。
flexible.js
flexible.js 是手淘开发出的一个用来适配移动端的 js 库。
核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。
<body>
......
<script src="./js/flexible.js"></script>
</body>
rem 移动适配
rem单位尺寸
- 确定基准根字号
- 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
- rem单位的尺寸
- rem单位的尺寸 = px单位数值 / 基准根字号
3. less
Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力
注意：浏览器不识别 Less 代码，目前阶段，网页要引入对应的 CSS 文件
VS Code 插件：Easy LESS，保存 less文件后自动生成对应的 CSS 文件
注释
- 单行注释
- 语法：// 注释内容
- 快捷键：ctrl + /
- 块注释
- 语法：/* 注释内容 */
- 快捷键： Shift + Alt + A
运算
- 加、减、乘直接书写计算表达式
- 除法需要添加 小括号 或 .
- 表达式存在多个单位以第一个单位为准
嵌套
作用：快速生成后代选择器
提示：用 & 表示当前选择器，不会生成后代选择器，通常配合伪类或伪元素使用
变量
概念：容器，存储数据
作用：存储数据，方便使用和修改
语法：
- 定义变量：@变量名: 数据;
- 使用变量：CSS属性：@变量名;
// 定义变量
@myColor: pink;
// 使用变量
.box {
color: @myColor;
}
a {
color: @myColor;
}
导入
作用：导入 less 公共样式文件
语法：导入: @import “文件路径”;
提示：如果是 less 文件可以省略后缀
@import './base.less';
@import './common';
导出
写法：在 less 文件的第一行添加 // out: 存储URL
提示：文件夹名称后面添加 /
// out: ./index.css
// out: ./css/
禁止导出
写法：在 less 文件第一行添加: // out: false
4. vw
vw和vh基本使用
vw和vh是相对单位，相对视口尺寸计算结果
- vw：viewport width（1vw = 1/100视口宽度 ）
- vh：lviewport height ( 1vh = 1/100视口高度 )
vw布局
vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )
vh问题
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形
综合案例-酷我音乐
准备工作
- HTML 结构
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/index.css">
- less 样式
// out: ../css/
@import "./base";
头部布局
- HTML 结构
<!-- 头部 -->
<header>
<div class="left">left</div>
<a href="#">下载APP</a>
</header>
- less 样式
body {
background-color: #f9fafb;
}
@vw:3.75vw;
// 头部
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 (15 / @vw);
height: (50 / @vw);
background-color: #fff;
}
头部内容
- less 样式
header {
// 左边
.left {
width: (235 / @vw);
height: (50 / @vw);
background-image: url(../assets/head.png);
background-size: contain;
background-repeat: no-repeat;
}
a {
width: (80 / @vw);
height: (30 / @vw);
background-color: #ffe31b;
border-radius: (15 / @vw);
text-align: center;
line-height: (30 / @vw);
font-size: (14 / @vw);
}
}
搜索区域
- HTML 结构
<!-- 搜索 -->
<div class="search">
<div class="txt">
<span class="iconfont icon-sousuo"></span>
<span>搜索你想听的歌曲</span>
</div>
</div>
- less 样式
// 搜索
.search {
padding: (10 / @vw) (15 / @vw);
height: (52 / @vw);
// background-color: pink;
.txt {
height: (32 / @vw);
background-color: #f2f4f5;
border-radius: (16 / @vw);
text-align: center;
line-height: (32 / @vw);
color: #a1a4b3;
font-size: (14 / @vw);
.iconfont {
font-size: (16 / @vw);
}
}
}
banner 区域
- HTML 结构
<!-- banner -->
<div class="banner">
<ul>
<li><a href="#"><img src="./assets/banner01.jpeg" alt=""></a></li>
</ul>
</div>
- less 样式
// banner
.banner {
padding: 0 (15 / @vw);
height: (108 / @vw);
// background-color: pink;
ul {
li {
width: (345 / @vw);
height: (108 / @vw);
img {
width: 100%;
height: 100%;
// cover完全覆盖
// 缩放img，图片比例跟父级盒子比例不同，避免图片挤压变形
object-fit: cover;
border-radius: (5 / @vw);
}
}
}
}
标题公共样式
- HTML 结构
<!-- 排行榜 -->
<div class="list">
<!-- 标题 -->
<div class="title">
<h4>酷我排行榜</h4>
<a href="#">更多<span class="iconfont icon-right"></span></a>
</div>
</div>
- less 样式
// 排行榜
.list {
margin-top: (20 / @vw);
padding: 0 (15 / @vw);
}
// 标题 → 公共样式
.title {
display: flex;
justify-content: space-between;
margin-bottom: (16 / @vw);
line-height: (25 / @vw);
h4 {
font-size: (20 / @vw);
}
a {
font-size: (12 / @vw);
color: #a1a4b3;
}
}
排行榜内容
- HTML 结构
<!-- 内容 -->
<div class="content">
<ul>
<li>
<div class="pic"><img src="./assets/icon_rank_hot.png" alt=""></div>
<div class="txt">
<a href="#" class="more">酷我热歌榜<span class="iconfont icon-right"></span></a>
<a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
<a href="#">2.就让这大雨全都落下 - 容祖儿</a>
<a href="#">3.缺氧 - 轩姨（相信光）</a>
</div>
</li>
<li>
<div class="pic"><img src="./assets/icon_rank_new.png" alt=""></div>
<div class="txt">
<a href="#" class="more">酷我新歌榜<span class="iconfont icon-right"></span></a>
<a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
<a href="#">2.就让这大雨全都落下 - 容祖儿</a>
<a href="#">3.缺氧 - 轩姨（相信光）</a>
</div>
</li>
<li>
<div class="pic"><img src="./assets/icon_rank_rise.png" alt=""></div>
<div class="txt">
<a href="#" class="more">酷我飙升榜<span class="iconfont icon-right"></span></a>
<a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
<a href="#">2.就让这大雨全都落下 - 容祖儿</a>
<a href="#">3.缺氧 - 轩姨（相信光）</a>
</div>
</li>
</ul>
</div>
- less 样式
// 排行榜
.list {
margin-top: (20 / @vw);
padding: 0 (15 / @vw);
li {
display: flex;
margin-bottom: (16 / @vw);
height: (105 / @vw);
background-color: #fff;
border-radius: (10 / @vw);
.pic {
margin-right: (20 / @vw);
img {
width: (105 / @vw);
height: (105 / @vw);
border-radius: (10 / @vw);
}
}
.txt {
a {
display: block;
font-size: (12 / @vw);
color: #a1a4b3;
line-height: 1.8;
}
.more {
font-size: (14 / @vw);
color: #333;
.iconfont {
font-size: (16 / @vw);
}
}
}
}
}
推荐歌单布局
- HTML 结构
<!-- 推荐歌单 -->
<div class="recommend">
<!-- 标题 -->
<div class="title">
<h4>推荐歌单</h4>
<a href="#">更多<span class="iconfont icon-right"></span></a>
</div>
<!-- 内容 -->
<div class="content">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
- less 样式
// 推荐歌单
.recommend {
padding: 0 (15 / @vw);
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
li {
margin-bottom: (16 / @vw);
width: (105 / @vw);
height: (143 / @vw);
background-color: pink;
}
}
}
推荐歌单内容
- HTML 结构
<li>
<div class="pic">
<img src="./assets/song01.jpeg" alt="">
<div class="cover">18.2W</div>
</div>
<div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
<li>
<div class="pic">
<img src="./assets/song02.jpeg" alt="">
<div class="cover">18.2W</div>
</div>
<div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
<li>
<div class="pic">
<img src="./assets/song03.jpeg" alt="">
<div class="cover">18.2W</div>
</div>
<div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
<li>
<div class="pic">
<img src="./assets/song02.jpeg" alt="">
<div class="cover">18.2W</div>
</div>
<div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
<li>
<div class="pic">
<img src="./assets/song03.jpeg" alt="">
<div class="cover">18.2W</div>
</div>
<div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
<li>
<div class="pic">
<img src="./assets/song01.jpeg" alt="">
<div class="cover">18.2W</div>
</div>
<div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
- less 样式
// 图片
.pic {
position: relative;
width: (105 / @vw);
height: (105 / @vw);
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: (10 / @vw);
}
.cover {
position: absolute;
left: 0;
bottom: 0;
width: (70 / @vw);
height: (28 / @vw);
background-color: rgba(0,0,0,0.8);
border-radius: 0 (10 / @vw) 0 (10 / @vw);
text-align: center;
line-height: (28 / @vw);
color: #fff;
font-size: (14 / @vw);
}
}
// 文字
.txt {
font-size: (14 / @vw);
}
下载区域
- HTML 结构
<!-- 安装，下载 -->
<div class="download">
<img src="./assets/logo.png" alt="">
<p>安装酷我音乐 发现更多好音乐</p>
<span class="iconfont icon-right"></span>
</div>
- less 样式
// 下载
.download {
position: fixed;
left: (15 / @vw);
bottom: (30 / @vw);
display: flex;
align-items: center;
padding: 0 (10 / @vw) 0 (15 / @vw);
width: (345 / @vw);
height: (45 / @vw);
background-color: #fff;
border-radius: (22 / @vw);
img {
margin-right: (10 / @vw);
width: (36 / @vw);
height: (36 / @vw);
}
p {
flex: 1;
font-size: (14 / @vw);
}
span {
width: (32 / @vw);
height: (32 / @vw);
background-color: #f2f3f5;
border-radius: 50%;
text-align: center;
line-height: (32 / @vw);
font-size: (16 / @vw);
}
}
头部固定
- less 样式
// 头部
header {
position: fixed;
left: 0;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 (15 / @vw);
// 固定定位的盒子，宽度靠内容撑开，希望宽度100%
width: 100%;
height: (50 / @vw);
background-color: #fff;
}
// 搜索
.search {
// 头部固定定位，脱标不占位，搜索去最顶了，加上外边距挤下来即可
margin-top: (50 / @vw);
padding: (10 / @vw) (15 / @vw);
height: (52 / @vw);
}
四、响应式布局
1. 媒体查询
基本写法
- max-width：最大宽度（小于等于）
- min-width：最小宽度（大于等于）
书写顺序
- min-width（从小到大）
- max-width（从大到小）
媒体查询-完整写法
关键词 / 逻辑操作符
- and
- only
- not
媒体类型
媒体类型用来区分设备类型
- screen：屏幕设备
- 打印预览：print
- 阅读器：speech
- 不区分类型：all
媒体特性
- 视口宽高：width / height
- 视口最大宽高：max-width ；max-height
- 视口最小宽高：min-width；min-height
- 屏幕方向：orientation
- protrait：竖屏
- landscape：横屏
媒体查询-外部CSS
2. Bootstrap
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
中文官网：https://www.bootcss.com/
使用步骤
下载
下载：Bootstrap V5中文文档 → 进入中文文档 → 下载 →下载 Bootstrap 生产文件
使用
- 引入 Bootstrap CSS 文件
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
- 调用类名： container 响应式布局版心类
<div class="container">测试</div>
栅格系统
作用：响应式布局
栅格化是指将整个网页的宽度分成12等份，每个盒子占用的对应的份数
例如：一行排4个盒子，则每个盒子占 3份 即可（12 / 4 = 3）
- row 类：行，可以让内容在一行排（flex布局）
全局样式
按钮
类名
- btn：默认样式
- btn-success：成功
- btn-warning：警告
- ……
- 按钮尺寸：btn-lg / btn-sm
表格
表格类
- table：默认样式
- table-striped：隔行变色
- table-success：表格颜色
- ……
组件
1.引入样式表
2.引入 js 文件
3.复制结构，修改内容
字体图标
下载
导航 / Extend：图标库 → 安装 → 下载安装包 → bootstrap-icons-1.X.X.zip
使用
- 复制 fonts 文件夹到项目目录
- 网页引入 bootstrap-icons.css 文件
- 调用 CSS 类名（图标对应的类名）
<i class="bi-android2"></i>
