REM(手機(jī)端自適應(yīng)方案)
熱熱身
px 像素
rem (root-em) 也就是根元素HTML的font-size
vh: view height 100vh = 視口高度
vw: view width 100vw = 視口寬度
字體統(tǒng)一
不同瀏覽器有不同的默認(rèn)字體僵井,所以最好做項(xiàng)目前使用自己的reset.css重置一遍剖效,但是Chorme有默認(rèn)的最小字號(hào)菊值。
字體度量
一個(gè)元素中:1em = 1個(gè)字體的大小
也就是一個(gè)大寫M的大忻捅椤(涉及字體度量知識(shí))
知乎這篇寫的很好
PC響應(yīng)式
對(duì)不同屏幕大小做不同的樣子 - PC端
利用CSS媒體查詢
移動(dòng)端自適應(yīng)
不同屏幕大小的手機(jī)的網(wǎng)頁(yè)自適應(yīng)大小 - 移動(dòng)端
利用控制根元素font-size,使用rem控制大小
例如:
iphone - 375 x 667
iphone6+ - 414 x 736
iphone5 - 320 x 568
Nexus 412 x 732
· 響應(yīng)式
0~320 做一套CSS
320~375 另一套CSS
375~414 第三套CSS
· 自適應(yīng)
只有一套(越大的手機(jī)驰后,顯示越大)
方法
:
① JS控制HTML的font-size = 屏幕寬度
② CSS中寬高: 0.5rem = 半屏幕寬度
③ 用stylus自定義函數(shù)做rem -> px的轉(zhuǎn)換
12px原則
html中字體最小為12px
body中的字體用px固定(reset.css)
最近的自我總結(jié):
1肆资、最近用vue模仿去哪兒網(wǎng),踩坑踩的還是很爽的
2灶芝、想學(xué)的更好必須要強(qiáng)迫自己學(xué)英文啊郑原,大部分文檔都是英文的(LESS等等)
3、感覺(jué)less沒(méi)有stylus好用夜涕,stylus真的是無(wú)敵