移动端布局：
1.rem
相对单位：相对于HTML的字体大小
2.box-sizing
弹性盒模型——border、padding不改变整体宽度
3.flex
平分空间、不会挤出去
4.响应式
<style>
/条件很丰富/
@media (条件){
...
}
</style>
/条件很少:媒介-在什么东西上显示/
<style media="媒介">
...
</style>
初衷：好的，一套页面适应所有平台
稍微大点的网站：PC端和移动端东西都不一样；不能用响应式布局
大网站：好多套
PC端一套 Pad端一套 手机端一套
[taobao.com]
PC端 www.taobao.com
移动端 m.taobao.com
服务端
[pc端] localhost/pc.html
[手机] localhost/mobile.html
1.算font-size
假想屏幕 640
基准font-size 40
真实屏幕 clientWidth
真实font-size ?
clientWidth
? = -----------
16
2.算每一个元素的大小
假想屏幕宽度 640
设计图宽度 750
假想屏幕上的height ?
设计图元素height 74
640/?=750/74
?=74*640/750 => 63.146px => 1.57866rem
假想屏幕 400
假想rem 20
设计图总宽 750
测量值 a
样式 ?
750*20
b = ---
400
b=37.5
?=a/37.5
CSS3样式
transform-3d
1.坐标轴
X/Y/Z：顺时针是正的，逆时针是负的
2.perspective(透视、景深)
不加：无限大
距离越大——透视越不明显(越不3D)
距离越小——透视越明显(越3D)
transform-style：
1.flat 平面的
2.preserve-3d 保留3D
transform-style：
flat 父元素是平的，父元素内部没有3D空间；子级被限制出不来
preserve-3d 父元素是立体的；子级能飞出来
transform
rotate
preserve-3d
经验：
父级加perspective，一般子级不加
transition:1s all ease;
transition-duration:1s;
transition-property:all;
transition-timing-function:ease;
transform-3D：
rotateX/Y/Z
translateX/Y/Z
perspective——透视距离
preserve-3d——解除父级对子级的限制
XYZ
200200200
100300200
N 360/N
i i*360/N
