可視化大屏經(jīng)驗(yàn)分享

1、左1圖，不建議在餅圖內(nèi)與百分比數(shù)值一起顯示，餅圖本身的形狀和大小，文字過(guò)多時(shí)容易溢出，如果出現(xiàn)一個(gè)2%一個(gè)1%，就很難辨別圖形指向，這樣也就失去了數(shù)據(jù)可視化的意義，PPT通常有這樣的設(shè)計(jì)樣式，因?yàn)槭莻€(gè)死圖。

如何高效快速的開發(fā)多終端自適應(yīng)網(wǎng)頁(yè)

1、在網(wǎng)頁(yè)代碼的頭部，加入一行viewport元標(biāo)簽。

2、在HTML頭部增加viewport標(biāo)簽。在網(wǎng)站HTML文件的開頭，增加viewport meta標(biāo)簽告訴瀏覽器視口寬度等于設(shè)備屏幕寬度，且不進(jìn)行初始縮放。

3、其次，除了布局和文本，”自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)”還必須實(shí)現(xiàn)圖片的自動(dòng)縮放。有條件的話，比較好還是根據(jù)不同大小的屏幕，加載不同分辨率的圖片。有很多方法可以做到這一條，服務(wù)器端和客戶端都可以實(shí)現(xiàn)。

4、一HTMLCSS3為基礎(chǔ)，因此現(xiàn)在能夠?qū)⑦@兩種技術(shù)運(yùn)用到恰到好處的網(wǎng)站設(shè)計(jì)師并不多見，如果設(shè)計(jì)師對(duì)這兩種技術(shù)不夠精通，會(huì)導(dǎo)致就算設(shè)計(jì)師做出很棒的頁(yè)面，但是實(shí)現(xiàn)以后，不會(huì)完全一模一樣。

通過(guò)vh和vw適配大屏項(xiàng)目和不同分辨率瀏覽器

vh：viewpointheight，視窗高度，1vh等于視窗高度的1%。vmin：vw和vh中較小的那個(gè)。vmax：vw和vh中較大的那個(gè)。

和使用rem單位一樣，vh vw也可以通過(guò)計(jì)算函數(shù)使用，這樣更加方便。Sass函數(shù)：以移動(dòng)端PSD設(shè)計(jì)稿 寬為750px，高為1250px為例。拿dom在設(shè)計(jì)稿內(nèi)的尺寸比例 乘以 100vh/vw ，得到了在當(dāng)前視口的尺寸占比。

可根據(jù)需要靈活掌握。在PC中，視口的長(zhǎng)寬則是跟瀏覽器窗口的物理分辨率恒等的。1vw等于視口寬度（viewport width）的百分之一，也就是說(shuō)100vw就是視口的寬度。同理，1vh等于視口高度（viewport height）的百分之一。