移动web阶段总结

适配问题

1.布局适配

流式布局(百分比) ：

核心问题：页面不能出现缩放；页面不能出现滚动条。

解决方案：1.设置标准视口 

                   视觉视口

                   布局视口-----默认 980px

                   理想视口,标准视口：通过

                   2.给盒子设置百分比

伸缩布局(弹性盒子)：

        应用：元素一行显示；元素快速布局适配。

        属性：1.弹性盒子属性

                    弹性盒子 display: flex  。

                    特点：子元素默认一行显示，子元素默认都是沿着主轴方向排列，没有脱标。

                    修改主轴的方向：flex-direction 两个值row、column

                    侧轴的方向：永远垂直于主轴

                    主轴的对齐方式：justify-content  值 felx-start、flex-end、center、space-between、space-around

                    侧轴对齐方式(单行对齐方式)：align-items值、flex-start、flex-end、center、stretch(默认值)

                    多行对齐方式：align-content值、flex-start、flex-end、center、stretch(默认值)space-between、space-around

                    设置元素换行：flex-wrap 值nowrap、wrap

                   2.子元素属性

                    flex：子元素占父元素剩余宽度的比例

                    order：通过属性的方式修改html结构

响应式布局：

            作用：同一个页面在不同设备中布局差异

            实现过程：

            设备划分：

                    pc设备：条件：min-width: 1025px

                    ipad设备：条件：min-width: 768px  and  max-width: 1024px

                    移动端设备：条件：min-width:320px  and max-width: 767px

2.像素适配

---

---

CSS扩展部分

转化

2D转化

位移

transform: translate()

特点：没有脱标，可以设置百分比,相对元素自己的宽度或高度

旋转

transform: rotate()

特点：元素绕着点旋转，旋转点的位置可以修改transform-origin

缩放

transform: scale();

特点：值表示倍数,不需要带单位

大于1, 表示放大

等于1, 表示不变

等于0 , 表示宽度或高度为0

大于0小于1, 表示缩小

3D转化

位移

X轴位移、Y轴位移、Z轴位移（近大远小的视觉效果）

透视属性perspective: ;

旋转

X轴旋转

左手法则判断旋转方向

修改旋转轴的位置：transform-origin

Y轴旋转

左手法则判断旋转方向

修改旋转轴的位置：transform-origin

Z轴旋转

效果与2d旋转一样

缩放

X轴缩放、Y轴缩放、Z轴缩放（需要一个立体的效果）

动画

补间动画：

过渡

animation

属性：

动画名称：animation-name

动画时间：animation-duration

动画次数：animation-iteration-count: infinite

动画逆播：animation-direction: alternate;

动画延时：animation-delay

动画结束状态：animation-fill-mode: forwards;

动画播放状态：animation-play-state: paused;

语法：

form to

@keyframes 动画名称 {

            from {

            }

            to {}

        }

百分比

百分比相对动画执行时间

@keyframes 动画名称 {

            0% {

            }

            100% {}

        }

注意事项：动画需要单独定义、动画中会出现css特性