1、 響應式布局定義
頁面布局會隨著螢幕大小變化而發生不同的響應，稱為響應式布局。
（1）不需要單獨寫移動端頁面
（2）根據不同裝置發生變化
2、 原理
通過**查詢針對不同寬度的裝置進行布局和樣式的設定，從而適配不同裝置
分四個檔位（手機<768px、平板》=768px&<992px、桌面顯示器》=992px&<1200px、大屏桌面顯示器》=1200px）
響應式需要乙個父級作為布局容器，來配合子元素實現頁面變化效果。
原理是在不同螢幕下，通過**查詢來改變這個布局容器的大小，再改變裡面子元素的排列方式和大小，從而實現在不同螢幕下，看到不同的頁面布局和樣式變化。
"container">
bootstrap是最流行的html、css和js框架，用於開發響應式布局、移動裝置優先的web專案。
3.1 使用步驟
1、建立bootstrap資料夾
2、建立html骨架結構
3、引入相關樣式檔案
4、書寫內容
3.2 柵格系統
將頁面內容分成12等份（.container）
行（row）可以去除父容器作用的15px的邊距
xs-extra small: 超小；sm-small; md-medium; lg-large
當列總和少於12時，則不會鋪滿整個螢幕，會有空白；當總和大於12時，放不下的元素會另起一行排列
每一列缺省有左右15px的padding
3.2.1列巢狀
柵格系統內建的柵格系統將內容再次巢狀，巢狀的內容份數還是12等份
列巢狀時最好加row，可以去掉父元素的padding，而且高度自動保持和父元素一致。
"container">
"row">
"col-lg-3 col-md-4 col-sm-6">
"row">
"col-sm-6">a
"col-sm-6">b
"col-lg-3 col-md-4 col-sm-6">2
"col-lg-3 col-md-4 col-sm-6">3
"col-lg-3 col-md-4 col-sm-6">4
.col-md-offset-份數可以將列向右側偏移，實際是增加了margin值
"container">
"row">
/*中間間隔6等份*/
"col-md-offset-3">左側
"col-md-offset-3">右側
.col-md-push-份數.col-md-pull-份數
3.2.4 響應式工具
在某些螢幕下展示或隱藏某些內容
.hidden-xs 超小屏下隱藏，其他屏可見
.hidden-sm 小屏。。。
.hidden-md 中屏。。。
.hidden-lg 大屏。。。
展示 visible-xs/sm/md/lg
移動端頁面布局
上下兩條固定到上邊和下邊，中間的內容區域佔據剩餘的空間 all html,body,container 第一種方法 1 header高度固定畫素，footer固定畫素。section高度calc 100 header高度 footer高度 2 header,footer設定絕對定位的方式 absol...
移動端頁面布局
關於移動端頁面的總結，最近接觸移動端頁面，簡單的介紹幾種頁面布局吧，以後繼續補充。1 移動端頁面需要在頭部新增 2 移動頁面的布局方式 1 橫向百分比，縱向畫素值 可以採用百分比 相對度量單位 進行盒模型橫向屬性 width 左右內邊距 左右外邊距 的製作，使用em 相對度量單位 實現文字的處理。但...
移動端布局（3）
css3引入了一種新的布局模式，叫做flexbox布局，即伸縮布局和 flexible box 模型，很多地方又稱為彈性盒模型，我們下面都叫彈性盒模型，它可以用來提供乙個更加有效的方式制定 調整和分布乙個容器裡的專案布局 css中的布局方式總結 塊布局 行內布局 布局 定位布局 flexbox布局 ...