Web前端第四章（清华 2019.2.23）

响应式布局
三大关键技术：流式布局，弹性媒体，媒体查询

Vw vh
100vw=100%(和适口相同)
Max-width 大屏保持 小屏变化

Media query 媒体查询
宽度变化:
@media(width<=600px){
nav,section{float:none;width:auto;}
Height:100px;
} //新版本
@media(max-width=600px){
nav,section{float:none;width:auto;}
Height:100px;
} //老版本

@media screen/all and (max-width=600px){
nav,section{float:none;width:auto;}
Height:100px;
}

@media mt and (mf1) and (mf2) and (mf3){
Rule1
Rule2
}

宽高比
@media(aspect-ratio>=16:9){
}
@media(min-aspect-ratio:16/9){
} //老版本

IE6以下 respond.js 开源语法

移动优先响应式布局 mobile first
优点：需求优先，加速渲染，节约网络资源带宽
Css rules for mobile device…
@media screen and (wdith>=768px){
R1
R2
}

@media screen and (min-wdith:768px){
R1
R2
} //老版本

Transform 变换
对行内元素不起作用 display->…
Transform:rotate(50deg) 顺时针旋转
Transform:scale(2) 放大两倍
Transform:scalex/scaley(2) 垂直水平方向缩放
Transform:scale(.5,2) 水平，垂直
Transform:translate(20px，40px)
Transform:translateX(20px) 向右平移20px
Transform:skew(45deg) 左倾斜45度 X轴

Transform: translate(20px) scale(2) rotate(45deg); //组合 从右往左
Transform: 矩阵…
Transform-origin (基点)
transform-origin:left top;
Transform-origin:right bottom; / 100% 100%; / 20px 30px;

兼容性：www.camiuse.com MDN

便准写法：带上厂商前缀(兼容性)
-webkit-transform:scale(.5); //safari
-moz-transform:scale(.5); //firefox
-ms-transform:scale(.5); //IE
-o-transform:scale(.5); //opera
Transform:(.5);

Transition 过度变化效果 —animated可动画属性
Transition-property:width,background-color;
Transition-duration:3s,1s;

4个基本属性:
Transition-property:none/all(默认)
Transition-duration:6s/1s,2s/40ms/0(默认)
Transition-delay: 2s 执行前的等待时间
Transition-timing-function:linear/ ease/ease-in/ease-out/ease-in-out 过渡时间函数
简写属性：
Transition:width 4s linear 1s,height 1s linear 0s(delay);

Animation 动画
@keyframes 关键帧
@keyframes bounce{
0%{
Left:0;
Top:0;
}
50%{
Left:200px;
Top:200px;
}
100%{
Left:400px;
Top:0px;
}
}
Animation:bounce 4s linear 0s; //引入bonce动画

.box:hover.ball{
Animation:bounce 4s linear 0s;
} //鼠标接触开始动画
Animation-name:bounce;
Animation-duration:4s;
Animation-timing-function:linear;
Animation-delay:0s;