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

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

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

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

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

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

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

通過vh和vw適配大屏項目和不同分辨率瀏覽器

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

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

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