移动web

最新推荐文章于 2025-11-26 15:59:01 发布

原创最新推荐文章于 2025-11-26 15:59:01 发布 · 743 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端开发专栏收录该内容

9 篇文章

订阅专栏

字体图标

字体图标：字体图标展示的是图标，本质是字体，处理简单的、颜色单一的图片。
图标库： Iconfont
下载字体包：登录 →选择图标库→选择图标→加入购物车→购物车→添加至项目→下载至本地
在这里插入图片描述
使用字体图标

Unicode编码
引入样式表：iconfont.css
复制粘贴图标对应的Unicode编码
设置文字字体 font-famlily: ‘iconfont’

<!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>字体图标基本使用-unicode</title>
    <!-- 引入字体图表达样式 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        span {
            font-family: 'iconfont';
            font-size: 100px;
            color: red;
        }
    </style>
</head>
<body>
    <span>&#xe721;</span>
</body>
</html>

类名
引入字体图标样式表 iconfont.css
调用图标对应的类名，必须调用2个类名
- iconfont类：基本样式，包含字体的使用等
- icon-xxx：图标对应的类名

<!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>字体图标基本使用-类名</title>
   <!-- 引入字体图表达样式 -->
   <link rel="stylesheet" href="./iconfont/iconfont.css">
   <style>
       .iconfont {
           font-size: 100px;
           color: red;
       }

       span {
           font-family: 'iconfont';
       }
   </style>
</head>
<body>
   <span class="iconfont icon-QRcode"></span>
   <span>&#xe721;</span>
</body>
</html>

平面转换

平面转换是改变盒子在平面内的形态，包括位移、旋转、缩放，也称为2D转换
平面转换的属性为：transform

位移

语法：transform: translate(水平移动距离, 垂直移动距离);

translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离：translateX() translateY()

使用translate实现绝对定位的元素居中效果

position: absolute;
left: 50%;
top: 50%;
/* margin-left: -100px;
margin-top: -50px; */
transform: translate(-50%, -50%);

旋转

语法：transform: rotate(角度); 角度单位是deg
取值为正, 则顺时针旋转，取值为负, 则逆时针旋转
transform-origin: 原点水平位置原点垂直位置;
注意：旋转会改变网页元素的坐标轴向，多重平面转换时，如果有旋转最后书写

缩放

语法：transform: scale(x轴缩放倍数, y轴缩放倍数)
一般情况下, 只为scale设置一个值transform: scale(缩放倍数); 表示x轴和y轴等比例缩放，scale值大于1表示放大, scale值小于1表示缩小

渐变

渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的背景

/* 半透明渐变 */
background-image: linear-gradient( transparent, rgba(0,0,0,.6));

空间转换

空间转换也叫3D转换，属性：transform

空间位移

语法：
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);

透视

透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
属性（添加给父级）： perspective: 值;
取值：像素单位数值，数值一般在800–1200。
空间转换时，为元素添加近大远小、近实远虚的视觉效果

空间旋转

语法:
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
transform: rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度，x，y，z取值为0-1之间的数字

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

立体呈现

盒子父元素添加transform-style: preserve-3d; 使子元素处于真正的3d空间

空间缩放

语法：
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);

动画

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
实现步骤：

定义动画

@keyframes 动画名称 {
 from { }
 to { }
} 

@keyframes 动画名称 {
 0%{ }
 10% { }
 50% { }
 100% { }
}

使用动画

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

动画属性：
属性也可以单独写

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwards：最后一帧状态 backwards：第一帧状态
animation-timing-function	速度曲线	steps(数字)：逐帧动画 linear：匀速运动
animation-iteration-count	重复次数	infinite为无限循环
animation-direction	动画执行方向	alternate为反向
animation-play-state	暂停动画	paused为暂停，通常配合:hover使用

移动端布局

百分比布局

百分比布局，也叫流式布局，效果：宽度自适应，高度固定。

Flex布局

Flex弹性布局是一种浏览器提倡的布局模型，布局网页更简单、灵活，避免浮动脱标的问题
Flex布局非常适合结构化布局
父元素添加display: flex，子元素可以自动的挤压或拉伸
在这里插入图片描述
主轴对齐方式
使用justify-content调节元素在主轴的对齐方式

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

侧轴对齐方式
使用align-items调节元素在侧轴的对齐方式
align-items：添加到弹性容器
align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认值, 弹性盒子沿着主轴线被拉伸至铺满容器

伸缩比
使用flex属性修改弹性盒子伸缩比
flex : 值;
注意: 只占用父盒子剩余尺寸

主轴方向
使用flex-direction改变元素排列方向，主轴默认是水平方向, 侧轴默认是垂直方向

属性值	作用
row	行, 水平(默认值)
column	列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

弹性盒子换行
使用flex-wrap实现弹性盒子多行排列效果
弹性盒子换行显示: flex-wrap: wrap;
调整行对齐方式：align-content，取值与justify-content基本相同

移动适配

屏幕宽度不同，网页元素尺寸不同（等比缩放）

rem

rem是相对单位，是相对于HTML标签的字号计算结果， 1rem = 1HTML字号大小
实现在不同宽度的设备中，网页元素尺寸等比缩放效果，需要根据视口宽度，设置不同的HTML标签字号
可以使用用flexible js配合rem实现网页元素尺寸等比缩放效果

vw / vh

vw和vh是相对单位，相对视口的尺寸计算结果
vw：viewport width，1vw=1/100视口宽度
vh：：viewport height，1vh=1/100视口高度

less

Less是一个CSS预处理器, Less文件后缀是.less，扩充了CSS 语言, 使CSS具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
可以使用vscode插件 Easy Less，自动将less文件生成css文件

注释：
单行注释： // 注释内容
多行注释：/* 注释内容*/

运算：
加、减、乘直接书写计算表达式，除法需要添加小括号或.
在这里插入图片描述

嵌套：
嵌套语法可快速生成后代选择器
在这里插入图片描述
注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

变量:
定义变量：@变量名:值;
使用变量：CSS属性：@变量名;
在这里插入图片描述

导入less：
使用Less导入写法引用其他Less文件
导入: @import “文件路径”;
在这里插入图片描述
导出css：
方法一：配置EasyLess插件，实现所有Less有相同的导出路径
配置插件：设置→搜索EasyLess→在setting.json中编辑→添加代码（注意，必须是双引号）

方法二：控制当前Less文件导出路径
Less文件第一行添加如下代码,注意文件夹名称后面添加/
在这里插入图片描述

响应式

媒体查询

能够根据设备宽度的变化，设置差异化样式
基本语法：

@media (媒体特性) {
	选择器 {
  	  样式
  }
}

完整写法：

@media 逻辑符 媒体类型 and (媒体特性) { CSS代码 }

逻辑符： and、 only、not
媒体类型：媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。

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

媒体特征：媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

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

外链式CSS引入

<link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xxx.css">

BootStrap

Bootstrap 是由 Twitter 公司开发维护的前端UI 框架，它提供了大量编写好的CSS 样式，允许开发者结合一定HTML结构及JavaScript，快速编写功能完善的网页及常见交互效果。
中文官网: https://www.bootcss.com/，具体信息可查阅官方文档
BootStrap栅格系统：
栅格化是指将整个网页的宽度分成若干等份，BootStrap默认将网页分成12等份
在这里插入图片描述
全局样式:
Bootstrap 将设置全局的 CSS 样式。HTML 的基本元素均可以通过 class 设置样式并得到增强效果

<button class="基本演示类 具体样式类">按钮</button>

组件：
Bootstrap 自带了大量可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能，具体查看官方手册。