1. 首頁 > 生活經驗 > >

pc如何自適應布局

生活百科pc

1、在不同分辨率下 ， 頁面布局存在不同程度的差異 ， 特別是頁面上的表單控件 ， 其寬度默認是固定值width:150px，當分辨率較高時，表格中的空白顯得過多 ， 頁面布局顯得很不協調，在寬屏顯示器上尤為明顯 。
2、內容區采用媒體查詢+定寬，在達到某個斷點之后更改內容區的寬度，并把某個內容顯示/隱藏 。注意熱門市場這里，雖然每一個方塊的寬度是隨著斷點變化的，但是左上角的標簽和里面長方形的白色區域在所有的屏幕下都是定寬度的，但是也可以完美的適應不同的屏幕 。
3、然后在css中 有關margin和padding屬性直接用百分比來表示 頁面布局的時候都是通過百分比來定義寬度，但是高度大都是用px來固定住，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長 ， 但是高度還是和原來一樣，實際顯示非常的不協調，這就是流式布局的最致命的缺點，往往只有幾個尺寸的手機下看到的效果是令人滿意的 。
【pc如何自適應布局】4、一番辛苦做出來的網頁，在全屏狀態下瀏覽一切正常 。但在改變瀏覽窗口大小之后，網頁就變得不堪入目 ， 這是個很值得注意的問題 。問題的根源還得從網頁的布局說起，在DW中，網頁內容的定位一般是通過表格來實現的，解決表格的問題也就成功了大半 。
5、在它里面嵌入了另外一個表格 ， 表格寬度占表格單元的50%，則這個表格的寬度為300，上面說過rem是通過根元素進行適配的，網頁中的根元素指的是html我們通過設置html的字體大小就可以控制rem的大小 。
6、瀏覽器的功能設置中 ， 有一個可以自由設置窗口內容字體大小的功能，這樣由于不同訪問者的設置習慣不同，呈現在他們面前的網頁有時也會不不相同 。比如你可能本來設計時用的是2號字體，結果由于用戶對瀏覽器的額外設定，變的更大了