适配问题
1.布局适配
流式布局(百分比) ：
核心问题：页面不能出现缩放；页面不能出现滚动条。
解决方案：1.设置标准视口
视觉视口
布局视口-----默认 980px
理想视口,标准视口：通过 <meta name="viewport" content="width=device-width, ititial-scale=1.0">
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特性
网友评论