做響應式最簡單方便的就是用現成的框架或者ui庫，常見的有bootstrap、elementui、layui等等，這裡拿bootstrap來舉例：
1. 柵格系統
大部分框架都有柵格系統，我們可以根據這個直接來規定不同裝置上的布局，省去了很多手寫的麻煩。
超小螢幕 手機 (<768px)
小螢幕 平板 (≥768px)
中等螢幕 桌面顯示器 (≥992px)
大螢幕 大桌面顯示器 (≥1200px)
類字首.col-xs-
.col-sm-
.col-md-
.col-lg-
最大列（column）寬
自動~62px
~81px
~97px
bootstrap把每一行分成12列，使用的時候在類名上加上我們想要的行寬，系統就可以自動分配了。
class
="row"
>
class
="col-xs-12 col-md-4"
>
1div
>
class
="col-xs-12 col-md-4"
>
2div
>
class
="col-xs-12 col-md-4"
>
3div
>
div>
2. 響應式工具
除了柵格系統，bootstrap 自帶的響應式工具也可以幫助我們快速的搭建響應式頁面。
可以通過單獨或聯合使用以下列出的類，可以針對不同螢幕尺寸隱藏或顯示頁面內容。
超小螢幕 手機 (<768px)
小螢幕 平板 (≥768px)
中等螢幕 桌面 (≥992px)
大螢幕 桌面 (≥1200px)
.visible-xs-*
可見隱藏
隱藏隱藏
.visible-sm-*
隱藏可見
隱藏隱藏
.visible-md-*
隱藏隱藏
可見隱藏
.visible-lg-*
隱藏隱藏
隱藏可見
.hidden-xs-*
隱藏可見
可見可見
.hidden-sm-*
可見隱藏
可見可見
.hidden-md-*
可見可見
隱藏可見
.hidden-lg-*
可見可見
可見隱藏
用法類似柵格系統，新增對應的類名就可以了，可以控制在不同頁面中的頁面布局。
其實我個人用css手寫的方法比較多，因為在不同裝置下，每個內容塊的展示方式、布局或者大小可能都是不一樣的，柵格系統能夠幫我們更改布局，但是更多的比如字型大小這種樣式還是要我們重新設定的，手寫的話可以一邊設定布局，一邊就把樣式也完成了。
1. **查詢（@media）
想要手寫響應式頁面，最最基礎的當然是**查詢。
有很多**型別都已經被廢棄不用了，我個人比較常用的是這兩個：
body
@media screen and (
max-width
: 768px)
}
要注意，先寫通用樣式，然後從小往大寫。
因為小螢幕的樣式比較少，如果先寫大螢幕樣式，有了浮動或者定位，要清除起來就比較麻煩。
2. 設定 meta 標籤
大多數移動瀏覽器將html頁面放大為寬的檢視（viewport）以符合螢幕解析度。
你可以使用檢視的meta標籤來進行重置。下面的檢視標籤告訴瀏覽器，使用裝置的寬度作為檢視寬度並禁止初始的縮放。
在< head>標籤裡加入這個 meta 標籤。
name
="viewport"
content
="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
>
3. 寬度設定
元素的寬度用百分比（%）或者 vw、vh 這個不用我多說了吧~
不光響應式，普通pc頁面肯定也是要這樣設定的。
另外，可以給元素設定最大寬度（wax-width）和最小寬度（min-width）控制縮放量。
比如這個頁面的主體內容我希望他佔頁面的60%，但是最小也不要低於1000px：
.main
4. 計算尺寸
計算尺寸可能對於響應式來說沒那麼友好，因為乙個元素的寬度我想要跟頁面保持一致（100%），但是兩邊的邊距我又想固定（20px）。這個時候就可以利用盒模型來實現啦~
可以參考我之前寫過的文章~
css盒子模型和樣式更改: 點這裡跳轉。
響應式頁面的坑
以此來記錄錯誤以及注意點 防止以後再出現同樣的錯誤 1.當乙個div標籤裡面包含多個p標籤時 p標籤會溢位 這時應該在div標籤上加上css的height auto 屬性 2.屬性的max width定義為不縮放 維持本身大小 響應式是盡量放乙個符合需求大小的 3.0 important是為提高優先...
關於響應式頁面
作為乙個無線部門的人，不懂移動裝置是不行的。而作為乙個無線的重構 不會寫響應式 頁面更是不行得。而我，乙個無線的重構 在我最近做的乙個移動端的專案之前，的確是不會寫響應式 頁面的，所以，嚴格來說，在這個專案之前，我是乙個不合格的無線重構 人。而這個專案，卻讓我快速地掌握了響應式頁面重構的一些方法。下...
頁面的響應式布局實現
當你設定乙個元素的高度為100 時，期望這樣元素能撐滿整個瀏覽器視窗的高度，但大對數情況下，這樣做法沒有任何效果，你知道為什麼height 100 不起作用嗎？按常理，當我們用css的height屬性定義乙個元素的高度時，這個元素應該按照設定在瀏覽器的縱向空間裡擴充套件相應的空間距離。例如，如果乙個...