數字世界網

可視化大屏經驗分享

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

如何高效快速的開發多終端自適應網頁

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

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

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

4、一HTMLCSS3為基礎，因此現在能夠將這兩種技術運用到恰到好處的網站設計師并不多見，如果設計師對這兩種技術不夠精通，會導致就算設計師做出很棒的頁面，但是實現以后，不會完全一模一樣。

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

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

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

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