布局實現
采用何種方式實現布局設計，也有不同的方式，這里基于頁面的實現單位而言，分為四種類型：固定布局、可切換的固定布局、彈性布局、混合布局。

固定布局：以像素作為頁面的基本單位，不管設備屏幕及瀏覽器寬度，只設計一套尺寸；

可切換的固定布局：同樣以像素作為頁面單位，參考主流設備尺寸，設計幾套不同寬度的布局。通過識別的屏幕尺寸或瀏覽器寬度，選擇最合適的那套寬度布局；

彈性布局：以百分比作為頁面的基本單位，可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度，并能完美利用有效空間展現最佳效果；

混合布局：同彈性布局類似，可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度，并能完美利用有效空間展現最佳效果；只是混合像素、和百分比兩種單位作為頁面單位。

?

除了固定布局，可切換布局，彈性布局，混合布局都可以被稱為響應式布局方式。

其中可切換的固定布局的實現成本最低，但拓展性比較差；而彈性布局與混合布局效果具響應性，都是比較理想的響應式布局實現方式。只是對于不同類型的頁面排版布局實現響應式設計，需要采用不用的實現方式。通欄、等分結構的適合采用彈性布局方式、而對于非等分的多欄結構往往需要采用混合布局的實現方式。

(from?https://www.douban.com/note/489518516/)

一些常見技巧：

1.處理文字大小（font-size），可以利用在html根元素上采用百分比的形式，利用rem的方式來設置font-size，這樣只需要保持比例不變，改變根元素的font-size百分比的數值即可達到設置全部字體尺寸的效果。

2.CSS3 中Media Query （媒介查詢）可以根據獲取的屏幕尺寸大小選取與之對應的樣式。

3.可以的話可以采用flexbox布局，彈性盒子布局。

4.處理圖片也應該處理成響應式的，根據終端類型尺寸分辨率以及當前的下載速度來適配出合理的圖形。(節省手機流量，提高加載速度。)

5.由小及大，找準核心內容，優雅升降。

6.最重要的，把你的設計在真實的設備上進行測試，是否如你所愿。

?

轉載于:https://www.cnblogs.com/vivihoo03/p/5933579.html

總結

以上是生活随笔為你收集整理的常见的布局实现，以及响应式布局技巧。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。