頁面佈局左側固定寬度,右側屏幕自適應

開發初期,頁面佈局要實現左側固定寬度右側屏幕自適應,且右側內容塊的距離是8px固定,我們考慮的最小分辨率是1366px,1366以下並不能像bootstrap那樣內容塊被擠下去。因爲沒有考慮清楚,沒有使用bootstrap,採用了左邊用px,右側用rem,當屏幕<1366px,font-size=100px.固定了寬度。

結果出現問題,大於1366px,由於左側固定寬度,分辨率變大,右側變大,左側寬度並未變,所以在1600px\1920px下導致右側留出很寬的寬度,影響頁面美觀度,所以其實一開始方案就不對,使用rem用於整個頁面都是自適應。

解決方案:

1、其實1366px及以下用px,就可實現,由於我們已經使用了rem,工程量太大,就未更改了,so <1366px,固定寬度,沒問題;

2、大於1366px,參考bootstrap的做法,方案改成使用100%,而非rem,右側div不設置寬度,float:left;margin-left:左邊固定寬;

其餘裏面內容全改爲100%.部分相差不大,不改,有些echarts的父級div用了百分比,導致echarts圖形變形,所以依然用rem;

3、部分間距是固定間距,計算百分比並不可行,只能設置在每一個模塊中,將100%分兩個模塊,其中一個模塊box-sizing:border-box;padding-right:8px;但這種情況下必須在模塊下再建立一個div,寬度100%,設置background-color,否則padding也會有顏色;

到此,就算解決了;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章