移动Web

字体图标

展示的是图标，本质是字体
可以灵活的修改样式
体积小，渲染快

阿里图标网址

https://www.iconfont.cn

如果没有所需的字体图标

与设计师沟通得到SVG矢量图
上传到网站，下载图标

2D转换

2D转换 transform 位移

transform: translate(100px,100px);

第一个值代表x轴可正可负对应translateX
第二个值代表y轴可正可负对应translateY
可以写百分比

位移和定位的区别

位移移动的是元素本身的宽度或高度
定位移动的是父元素的宽度或高度
c1,c2 是根据父元素移动
c3 基本上是根据自身移动

居中的几种方式

给父元素设置 text-align：center

设置高度=行高

子元素设置vertical-align：middle

注意：vertical-align：middle只能用于行内元素和行内块元素
给子元素定位 缺：必须设宽高

left:50%

top:50%

margin-left:子元素宽度一半

margin-top:子元素高度一半
给子元素定位 缺：必须设宽高

left:0px;

right:0px;

top:0px;

bottom:0px;

margin:auto;
给子元素定位 不用设宽高

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

旋转 rotate

transform: rotate(90deg);

正值顺时针
负值逆时针
deg 度

旋转原点 origin

transform-origin: left top ;

第一个值 X轴
第二个值 Y轴
只写一个值另一个值默认 center
可以%，px

复合属性写法

transform: translate(600px) rotate(1080deg);

需要给旋转元素加过渡否者rotate 直接旋转完

缩放 scale

transform: scale(1,2);

值比1大放大
值比1小缩小
可以填一个值等比例缩放
第一个值宽的倍数第二个值高度倍数

缩放和宽高的区别

缩放是和内容一起缩放宽高只改变宽高内容不变
缩放沿着中心点缩放宽高沿着上中位置变化

渐变 linear-gradient

background: linear-gradient(to top,red,green);

方位值（一个或两个 top left），颜色，颜色
用vh铺满视口宽度默认

3D转换

移动translate

transform: translateX(50px);
transform: translateY(50px);
transform: translateZ(50px); z轴位置与视线方向相同
取值可正负
% ，px

透视perspective

默认情况下无法观察Z轴移动
只有一个盒子的情况下有效
给父级添加perspective属性
取值一般在800-1200px
为元素添加近大远小，近实远虚的视觉效果

rotate 空间转换

transform:rotateZ(); //沿Z轴旋转
transform:rotateX(); //沿X轴旋转
transform:rotateY(); //沿y轴旋转

拓展

transform: rotate3d(1,0,0,60deg);
- 自定义旋转轴的位置
- xyz选值 0不选中 1选中

3D空间

transform-style:preserve-3d; //给父元素添加
设置元素让子元素处于3d空间

scale 空间缩放

transform: scaleX(倍数)；
transform: scaleY(倍数);
transform: scaleZ(倍数)；
连写

transform: scale3d(x,y,z);

动画 animation

添加动画

@keyframes 名字 {
    from {
    }
    to {
    }
}

再给元素添加 animation：动画名称时长

动画属性

/* 动画名称 */
animation-name: 名称;
/* 播放时长  1s=1000ms*/
animation-duration: 1s;
/* 动画延迟 */
animation-delay: 1s;
/* 动画停在那个状态
    backwards  开始一帧
    forwards   最后一帧 */
animation-fill-mode: backwards;
/* 播放次数 默认播放一次   infinite  */
animation-iteration-count: infinite;
/* 动画速度曲线  linear匀速*/
animation-timing-function: ease;
/* 反方向播放 */
animation-direction: alternate;
}
.box:hover {
/* 暂停动画 */
animation-play-state: paused;
}

连写属性

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

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

逐帧动画steps

animat-timing-function:steps(份数)

将动画分成N份

多组动画

animation: dong 5s steps(12) infinite,
           yi 25s infinite linear;

animation :

动画1,

动画2；

移动端特点

移动端和PC端同异

PC屏幕大，网页固定版心
手机屏幕小，网页宽度100%

分辨率

屏幕尺寸

指的是屏幕对角线长度，一般用英寸表示

分辨率

硬件分辨率(出厂设置)
缩放调节的分辨率 (软件设置)

分辨率分类

物理分辨率（固定的，不可改变）
逻辑分辨率（由软件驱动决定的）网页制作参考的分辨率

视口

默认情况下网页宽度和逻辑分辨率不同
默认是980px

解决方法：添加视口
- viewport：视口
- width=device-width 视口宽度=设备宽度
- initial-scale=1.0 缩放1倍（不缩放）

二倍图

为了高分辨率下图片不会失真
测量二倍图

百分比布局

也叫流式布局
宽度自适应，高度固定

Flex布局

是一种浏览器提倡的布局模型
布局更简单，灵活
避免脱标问题
父元素添加 display：flex
行内元素作为弹性盒子的子元素可以直接设置宽高

主轴对齐方式 justify-content

主轴对齐方式 写在弹性容器

/* 默认值，起点开始依次排列*/
justify-content: flex-start; 
/* 从终点开始一次排列*/
justify-content: flex-end; 
/* 居中排列*/
justify-content: center;    
/* 两端是中间等距的一半 */
justify-content: space-around;   
/* 两端对齐 中间等距 */
justify-content: space-between;   
/* 两端等距 */
justify-content: space-evenly;

侧轴对齐方式 align-items

侧轴对齐方式

align-items （添加到弹性容器）

/* 默认值  起点开始依次排列  不拉伸*/
align-items: flex-start;
/* 终点开始排列 */
align-items: flex-end;
/* 居中 */
align-items: center;
/* 默认值 盒子拉伸铺满容器 */
align-items: stretch;

align-self （控制某个盒子添加到弹性盒子）

/* 默认值  起点开始依次排列  不拉伸*/
align-self: flex-start;
/* 终点开始排列 */
align-self: flex-end;
/* 居中 */
align-self: center;
/* 默认值 盒子拉伸铺满容器 */
align-self: stretch;

伸缩比 flex

flex：整数；
只占用父元素剩余的尺寸

垂直排列 flex-direction

修改主轴方向

display: flex;
/* 主轴修改为垂直 */
flex-direction: column;
/* 默认值 水平 */
flex-direction: row;
/* 行从右到左 */
flex-direction: row-reverse;
/* 列从下向上 */
flex-direction: column-reverse;

主轴和侧轴互换位置

多行排列 flex-wrap

flex-wrap:wrap;
一行排列多个，放不下换行

多行子元素侧轴对齐

/* 侧轴居中 */
align-content: center;
/* 拉伸 */
align-content: stretch;
/* 默认值 从侧轴开始位置对齐 */
align-content: flex-start;
/* 从侧轴结束位置对齐*/
align-content: flex-end;
/* 两端是中间等距的一半 */
align-content: space-around;
/* 两端对齐 中间等距 */
align-content: space-between;
/* 两端等距 */
align-content: space-evenly;

溢出部分显示省略号

单行

/*设置父元素宽度 不设置的话子元素过宽会挤压 边上的子元素*/
min-width: 0;
/*文字强制显示一行*/
white-space: nowrap;
/*文字溢出显示省略号*/
text-overflow: ellipsis;
/*溢出隐藏*/
overflow: hidden;

多行

/*溢出隐藏*/
overflow: hidden;
/*文字溢出显示省略号*/
text-overflow: ellipsis;
/*作为弹性伸缩盒子模型显示*/
display: -webkit-box;
/*设置第几行添加省略号*/
-webkit-line-clamp: 3;
/*从上到下垂直排列子元素*/
-webkit-box-orient: vertical;

移动端导航栏滑动

移动适配

长度单位

rem ：目前多数企业在用
vw/vh ：未来的解决方案

rem

相对单位
1rem=1HTML字号大小
rem单位的尺寸 = px单位数值/基准跟字号

rem和em区别

1rem=1HTML字号大小，跟随根标签文字大小在变化
1em=1盒子的字号大小

vw / vh

相对于视口计算
1vw = 1/100视口宽度
1vh = 1/100视口高度
vw/vh 不能一块用

媒体查询

根据设备的宽度，设置差异化样式

常用写法

max-width

min-width

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

外链CSS引入

flexible.js

核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
把根标签的文字大小设置成当前屏幕的1/10
1rem=1/10屏幕宽度

less语法

css不支持算法可以通过less实现
less是一个css预处理器，less文件后缀
使css具备一定的逻辑性，计算能力
注意：网页不识别less，引入对应的css文件

less 语法

单行注释

// 注释内容

Ctrl+/
块注释

/**/

shift+alt+A

less 运算

加，减，乘直接写
除法需要添加小括号

width: 100 + 50px;
height: 100 - 50px;
width: 100 * 50px;
height: (100 / 50px);

less 嵌套

.father {
    color: aqua;
    .son {
        color: #000;
        &:hover {
            color: red;
        }
    }
}

可以生成后代选择器
& 不生成后代选择器，表示当前选择器通常配合伪类或伪元素

less 容器

@red: red;
div {
    color: @red;
}

文字文字颜色基本都是统一的
方便更换

less 导入less文件

@import “文件路径” ；
可以省略.less 后缀

less 导出css文件

设置-搜索Easy less - 在setting.json中编辑
添加

"less.compile": {
    "out": "../css/"
}

让less都有同样的导出路径
第二种
在要导出的less文件第一行添加

// out: ./路径/
或
// out: ./路径/名字.css

禁止导出

// out: false

Bootstrap

引入css
用插件，需要链入两个js，必须首先链入jquer.js，再链入bootstrap.js

前端

移动Web

移动Web

字体图标

字体图标

阿里图标网址

如果没有所需的字体图标

2D转换

2D转换 transform 位移

位移和定位的区别

居中的几种方式

旋转 rotate

旋转原点 origin

复合属性写法

缩放 scale

缩放和宽高的区别

渐变 linear-gradient

3D转换

移动translate

透视perspective

rotate 空间转换

3D空间

scale 空间缩放

动画 animation

添加动画

动画属性

连写属性

逐帧动画steps

多组动画

移动端特点

移动端和PC端同异

分辨率

屏幕尺寸

分辨率

分辨率分类

视口

二倍图

百分比布局

Flex布局

主轴对齐方式 justify-content

侧轴对齐方式 align-items

伸缩比 flex

垂直排列 flex-direction

多行排列 flex-wrap

多行子元素侧轴对齐

溢出部分显示省略号

单行

多行

移动端导航栏滑动

移动适配

长度单位

rem

rem和em区别

vw / vh

媒体查询

外链CSS引入

flexible.js

less语法

less 语法

less 运算

less 嵌套

less 容器

less 导入less文件

less 导出css文件

禁止导出

Bootstrap

相关