移动web开发

目录

一字体图标

二平面转换

位移

旋转

转换原点

多重转换

缩放

渐变

三空间转换

空间平移

透视

空间旋转

立体呈现

空间缩放

四动画

基本使用：

拆分写法

移动端的特点

屏幕尺寸

百分比布局

flex布局

水平-主轴

垂直-侧轴

伸缩比

主轴方向

移动适配

less

vw & wh

---

一字体图标

1 iconfont.cn，查找想要的小图标，添加购物车，点击购物车，添加到项目

2 两种下载方式：下载至本地和生成线上链接（记得+htpp：）

3 下载至本地：将解压后的文件夹放在项目中

4 引用：引入iconfont.css

<i class="iconfont xxx">

二平面转换

使用transform属性实现元素的位移旋转缩放等效果（2d转换）

改变盒子在平面内的形态（位移，旋转，缩放）

平面坐标轴：x轴（向右）y轴（向下）

位移

transform：translate（水平垂直距离，垂直位移距离）

transform：translate（x，y）

取值：正负值都可

1像素单位数值

2百分比（参照物为盒子自身）

技巧：translate（）如果只给一个值，就代表着而只有水平方向移动

translateX（水平）translateY（垂直）

定位盒子居中

1盒子绝对定位 left50% top50%

2位移=translate（-50%，-50%）

旋转

使用rotate实现元素旋转效果

transform：rotate(角度)单位deg

transform：rotate(360deg)

正数：顺时针 负数：逆时针

转换原点

使用transform-orgin改变原点

transform-orgin{方位名词\像素单位数值\百分比（参照盒子自身尺寸进行计算）}

默认原点是盒子中心点

多重转换

使用transform复合属性实现多形态转换

同时改变盒子的多个形态

旋转放在最后

先写位移，在写旋转 旋转会改变坐标轴向

transform：{translate（x，y），rotate（360deg）}

缩放

使用scale改变元素的尺寸

transform：scale（缩放倍数）大于1放大，小于1缩小。

transform：{scale（1）}

渐变

使用background-image属性添加渐变背景效果

background-image{linear-gradient（颜色1，颜色2）}

透明渐变

transparent，rgba

background-image{linear-gradient（transparent，rgba（0,0,0,1））}

to+方位名词可以显示渐变的方向

background-image{linear-gradient（transparent，rgba（0,0,0,1））to+方位名词}

三空间转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间是从坐标轴角度定义的，xy和z三条坐标轴构成了一个立体空间，z轴位置于视线方向相同。空间也叫3d转换

空间平移

transform：translate3d{x，y，z}

取值：正负皆可

Z轴与用户视线方向重叠

完整写法
 translate3d(x, y, z)
 某个坐标轴位移
translateX()
 translateY()
 translateZ()

透视

作用：产生近大远小，近实远虚的视觉效果

 视距：用户眼睛和屏幕的距离

写法 perspective: 值；添加给父级取值一般800-1200px之间

空间旋转

transorm：rotatex

旋转  rotateX()

         rotateY()
         rotateZ()

transorm：rotatex+perspective属性更好看

rotatex3d{x，y，z}设置自定义旋转轴的位置以及旋转的角度 xyz取值0-1

左手法则左手握住旋转轴，大拇指指向坐标轴正值方向， 四根手指弯曲方向为旋转正值方向

立体呈现

作用：让子级处于真正的3D空间内

写法：transform-style: preserve-3d;（添加给父级）

空间缩放

完整写法  scale3d(x, y, z)

某个坐标轴缩放
 scaleX()
scaleY()
scaleZ()

四动画

使用关键帧动画效果，给网页元素添加动画特效，提升用户体验

基本使用：

定义动画
	@keyframes{
   from {}
   to {}
}
	@keyframes{
   0% {}
   20% {}
   50% {}
   100% {}
}

animation: 动画名称  动画时长;

1 先定义动画keyframes，起一个动画名

2 在要添加动画的标签内+动画名+时长

复合属性
写法
        animation：动画名称  动画时长  速度曲线  延迟时间   重复次数  动画方向  执行完毕时状态；
    注意事项
        取值不分先后顺序
        必须赋值项：动画名称和动画时长
        若出现2个时间：第一个时间为动画时长， 第二个时间为延迟时间

拆分写法

拆分写法（了解）
animation-name：动画名称
animation-duration：动画时长
animation-delay：延迟时间
animation-fill-mode：动画执行完毕时状态
forwards：最后一帧状态
backwards：第一帧状态（默认值）
animation-timing-function：速度曲线
steps(数字) : 逐帧动画
animation-iteration-count：重复次数
infinite：无限循环
animation-direction：动画方向
alternate：反向
animation-play-state：动画播放状态
paused：暂停
通常配合:hover使用

逐帧动画
作用
精灵动画搭配精灵图使用
动画速度曲线为steps(N) N与精灵图小图个数相同
多组动画
作用：一个元素添加多个动画效果
animation: 动画1，动画2，动画N；

移动端的特点

pc屏幕放大，网页固定版心

手机屏幕小，网页宽度多为百分之100% 

屏幕尺寸

尺寸指的是屏幕对角线的长度，一半用英寸来度量

分辨率：硬件分辨率（物理）

经过电脑缩放设置之后的分辨率（逻辑）

使用

<meta name="viewport" content="width=derice-width",initial-scale=1.0'>

 视口标签（没有视口标签的话高度默认为980）

百分比布局

百分比布局也叫流式布局（效果：宽度自适应，高度自适应）

flex布局

弹性布局

使用flex布局模型灵活快速的开发网页：display：flex

是一种网页提倡的布局模型，布局网页更加灵活简单，避免浮动脱标，页面渲染性能高 ，兼容性高。

组成部分：

弹性容器（添加display：flex    的盒子（父级））

弹性盒子（子级）

主轴（默认水平）-侧轴（默认垂直）

设置方式：父元素添加display：flex子元素可以自动的挤压或者拉伸。

主轴：main-axis   侧轴：cross-axis

视觉效果：子级一行排列/水平排列

默认主轴在水平，弹性盒子都是沿着主轴排列

水平-主轴

justify-content调整主轴对齐方式

flex-start默认值

flex-end 终点开始依次排列

center：沿主轴居中排列

space-around 沿主轴均匀排列，容器于盒子的间距是盒子与盒子间距的2/1

space-between 空白分布在盒子和盒子之间 ，只有盒子与盒子之间有空白间距

space-evenly 盒子与盒子 盒子与父都是平均空白

垂直-侧轴

align-items-添加给父元素

align-self :添加给单个想要设置垂直排列方式的子元素

flex-start 默认值

flex-end 终点开始依次排列

center 沿着侧轴居中排列

stretch 默认值 子元素不设置高度的话子元素的高度会默认占满整个父盒子

伸缩比

使用flex属性修改弹性盒子的伸缩比

属性：flex：值 （数值整数）

注意：只是占用盒子的剩余尺寸

主轴方向

使用flex-direction改变元素排列方向

row 行水平

column 列 垂直

row-reverse 行从右向左

column-reverse 列从下向上

使用flex-warp实现弹性盒子多行排列的效果

warp和no warp

flex-warp弹性盒子换行显示

align-content-调整行对齐方式取值与justify-content相同

移动适配

rem目前多数企业都在使用的解决方案

vw/vh 未来的解决方案

rem相对单位 相当于html标签的字号

1rem=1html字号大小 根字号

使用媒体查询设置差异化css样式

@media (视口宽度) {
    html {
        font-size: 37.5px;
    }
}

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

在body标签的最下面添加js文件<script src="flexible.js"></script>

<body>
<script src="flexible.js"></script>
</body>

less

less是一个css处理器。

扩充了css语言，使得css具备一定的逻辑性，计算能力。

单行注释：//注释内容 快捷键 ctrl+/

块注释（多行注释）：shift+alt+a /*注释内容*/

运算：+-*/直接书写计算表达式

除法+./或者（n/n）包起来

4.0之前是直接写，4.0后新加的规则加点或者用括号包起来

嵌套：快速生成后代选择器（方便代码迁移）

父选择器 {
    子选择器{}
}

加&（and）可以不生成后代选择器

变量：将一个网页固定的元素存储到一个元素中，设置属性值

1. 定义变量
    @变量名: 值;
2. 使用变量
    CSS属性: @变量;

导入

作用
    引入其他less文件
写法
    @import: ‘文件及路径’;

导出

导出CSS文件
 控制所有Less导出路径：修改EasyLess插件
            1. 设置 → 搜索easy → 在settings.json中编辑
            2. 添加代码："out": "目标存储路径"（文件夹以/结束）

  单独控制某个Less文件导出路径：less文件第一行添加  // out：路径
禁止导出CSS文件：less文件第一行添加： // out: fals

vw & wh

布局流程

1、根据设计稿计算出1vw的尺寸（比如375设计稿下 1vw = 3.75px）

2、将设计稿中的px单位转为vw单位（60px 60 / 3.75 vw）

Tips：简单来说，就是 （设计稿中的尺寸（px）/ 设计稿宽的1/100 ） vw

注意

全面屏：高尺寸要大一些，要避免vw和vh混合使用