移动端布局

移动端布局：
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