? ? ? ? 對于大屏，主要用于對外展示數(shù)據(jù)。

? ? ? ? 可能會投放在各種分辨率的顯示器上面，對于前端最重要的是自適應(yīng)的處理。

? ? ? ? 自適應(yīng)包含字體、圖表、圖片等的自適應(yīng)。

? ? ? ? 常見的布局有：

一、rem布局: 字體和寬高等長度都可以使用的單位

? ? ? ? 默認情況下，html元素的font-size為12px。

? ? ? ? 可以按照設(shè)計稿給的尺寸大小，設(shè)置一個方便計算的font-size，其他的元素的尺寸按照rem來給。

? ? ? ? 對于設(shè)計稿之外的其他尺寸的分辨率，我們加一段js代碼，自動去按照比例去更改根元素font-size的值，然后在監(jiān)聽瀏覽器的resize，去調(diào)用這段js代碼，動態(tài)設(shè)置font-size，實現(xiàn)響應(yīng)。

? ? ? ? 缺點：css樣式和js代碼有一定的耦合性。且必須將改變font-size的代碼放在css樣式之前。

二、百分比布局

? ? ? ? 寬高設(shè)置百分比，可以使得瀏覽器發(fā)生變化時，得到響應(yīng)式效果。

? ? ? ? 百分比布局相對的大小標準不唯一，需要了解以下幾點：

? ? ? ? 1、width和height是相對于直接父元素的width和height；

? ? ? ? 2、top,bottom是相對于直接非static父元素的height；

? ? ? ? 3、left,right是相對于直接非static父元素的width；

? ? ? ? 4、padding,margin無論是垂直還是水平方向都是相對于直接父元素的width，與height無關(guān)；

? ? ? ? 5、border-radius, translate、background-size都是相對于自身；

? ? ? ? 缺點：要自己換算，換算不唯一。

三、px結(jié)合多媒體查詢

? ? ? ? 使用@media媒體查詢可以針對不同的媒體類型定義不同的樣式，特別是響應(yīng)式頁面，編寫多套樣式，從而達到自適應(yīng)效果。

? ? ? ? ? ? 缺點：如果在瀏覽器大小改變時，需要改變的樣式太多，那么多套樣式代碼會很繁瑣

四、vm布局（vw wh vmin wmax）

? ? ? ? css3新特性,與百分比布局不同，它是相對于視口大小的更理想的百分比單位，1vw是視口寬度的1/100。

? ? ? ? viewport 就是瀏覽器視口，瀏覽器視口和瀏覽器窗口類似，只不過不包括水平滾動條和垂直滾動條。如果網(wǎng)頁里沒有滾動條，則瀏覽器視口和瀏覽器窗口的大小一樣。

? ? ? ? 假如視口寬度為1920px,那么1px=100/1920vw。自己計算比較麻煩，可以使用插件，將px轉(zhuǎn)化為vw。

? ? ? ? 缺點：自己計算會比較麻煩，ie11不支持該屬性。

五、flex布局

? ? ? ? 彈性盒子布局，為盒模型提供最大的靈活性。

? ? ? ? 在實際項目中，我經(jīng)常選用的是，rem布局，或者vw+百分比，同時結(jié)合flex等進行靈活使用。

對于第三方工具自適應(yīng)的處理，比如echarts圖表

? ? ? ? 對于大屏，其實經(jīng)常會使用到圖表，我一般使用的是echarts。

? ? ? ? 對于echarts,里面不能使用vw、rem這樣的單位，只能使用px,因此echarts中涉及到尺寸的設(shè)置。

? ? ? ? 在考慮到自適應(yīng)的情況下，需要我們?nèi)憘€方法，動態(tài)換算設(shè)值，同時在監(jiān)聽resize的時候，調(diào)用setOption。

注意在組件銷毀的時候 要清空綁定的resize事件

如果幫助到你，點個贊鼓勵下女程序員吧！