pc如何自適應佈局 pc端如何根據設計稿做自適應

1、在不同分辨率下，頁面佈局存在不同程度的差異，特別是頁面上的表單控件，其寬度默認是固定值width:150px，當分辨率較高時，表格中的空白顯得過多，頁面佈局顯得很不協調，在寬屏顯示器上尤為明顯。

2、內容區采用媒體查詢+定寬，在達到某個斷點之後更改內容區的寬度，並把某個內容顯示/隱藏。 註意熱門市場這裡，雖然每一個方塊的寬度是隨著斷點變化的，但是左上角的標簽和裡面長方形的白色區域在所有的屏幕下都是定寬度的，但是也可以完美的適應不同的屏幕。

3、然後在css中 有關margin和padding屬性直接用百分比來表示 頁面佈局的時候都是通過百分比來定義寬度，但是高度大都是用px來固定住，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度還是和原來一樣，實際顯示非常的不協調，這就是流式佈局的最致命的缺點，往往隻有幾個尺寸的手機下看到的效果是令人滿意的。

4、一番辛苦做出來的網頁，在全屏狀態下瀏覽一切正常。但在改變瀏覽窗口大小之後，網頁就變得不堪入目，這是個很值得註意的問題。 問題的根源還得從網頁的佈局說起，在DW中，網頁內容的定位一般是通過表格來實現的，解決表格的問題也就成功瞭大半。

5、在它裡面嵌入瞭另外一個表格，表格寬度占表格單元的50%，則這個表格的寬度為300，上面說過rem是通過根元素進行適配的，網頁中的根元素指的是html我們通過設置html的字體大小就可以控制rem的大小。

6、瀏覽器的功能設置中，有一個可以自由設置窗口內容字體大小的功能，這樣由於不同訪問者的設置習慣不同，呈現在他們面前的網頁有時也會不不相同。比如你可能本來設計時用的是2號字體，結果由於用戶對瀏覽器的額外設定，變的更大瞭