移動(dòng)端布局：
1.rem
相對(duì)單位：相對(duì)于HTML的字體大小
2.box-sizing
彈性盒模型——border钠龙、padding不改變整體寬度
3.flex
平分空間地回、不會(huì)擠出去
4.響應(yīng)式
<style>
/條件很豐富/
@media (條件){
...
}
</style>
/條件很少:媒介-在什么東西上顯示/
<style media="媒介">
...
</style>
初衷：好的，一套頁面適應(yīng)所有平臺(tái)
稍微大點(diǎn)的網(wǎng)站：PC端和移動(dòng)端東西都不一樣俊鱼；不能用響應(yīng)式布局
大網(wǎng)站：好多套
PC端一套 Pad端一套 手機(jī)端一套
[taobao.com]
PC端 www.taobao.com
移動(dòng)端 m.taobao.com
服務(wù)端
[pc端] localhost/pc.html
[手機(jī)] localhost/mobile.html
1.算font-size
假想屏幕 640
基準(zhǔn)font-size 40
真實(shí)屏幕 clientWidth
真實(shí)font-size ?
clientWidth
? = -----------
16
2.算每一個(gè)元素的大小
假想屏幕寬度 640
設(shè)計(jì)圖寬度 750
假想屏幕上的height ?
設(shè)計(jì)圖元素height 74
640/?=750/74
?=74*640/750 => 63.146px => 1.57866rem
假想屏幕 400
假想rem 20
設(shè)計(jì)圖總寬 750
測(cè)量值 a
樣式 ?
750*20
b = ---
400
b=37.5
?=a/37.5
CSS3樣式
transform-3d
1.坐標(biāo)軸
X/Y/Z：順時(shí)針是正的，逆時(shí)針是負(fù)的
2.perspective(透視畅买、景深)
不加：無限大
距離越大——透視越不明顯(越不3D)
距離越小——透視越明顯(越3D)
transform-style：
1.flat 平面的
2.preserve-3d 保留3D
transform-style：
flat 父元素是平的并闲，父元素內(nèi)部沒有3D空間；子級(jí)被限制出不來
preserve-3d 父元素是立體的谷羞；子級(jí)能飛出來
transform
rotate
preserve-3d
經(jīng)驗(yàn)：
父級(jí)加perspective帝火，一般子級(jí)不加
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——解除父級(jí)對(duì)子級(jí)的限制
XYZ
200200200
100300200
N 360/N
i i*360/N
