1.1 響應式開發原理
使用**查詢針對不同寬度的裝置進行布局和樣式的設定，從而適配不同裝置的目的。
裝置的劃分情況：
1.2 響應式布局容器
響應式需要乙個父級做為布局容器，來配合子級元素來實現變化效果。
原理就是在不同螢幕下，通過**查詢來改變這個布局容器的大小，再改變裡面子元素的排列方式和大小，從而實現不同螢幕下，看到不同的頁面布局和樣式變化。
父容器版心的尺寸劃分
2.1bootstrap基本使用
在現階段我們還沒有接觸js相關課程，所以我們只考慮使用它的樣式庫。
bootstrap 使用四步曲：
建立資料夾結構
建立 html 骨架結構
直接拿bootstrap 預先定義好的樣式來使用
修改bootstrap 原來的樣式，注意權重問題
2.2 bootstrap布局容器
bootstrap 需要為頁面內容和柵格系統包裹乙個 .container 或者.container-fluid 容器，它提供了兩個作此用處的類。
.container
.container-fluid
2.3 bootstrap柵格系統
bootstrap提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面布局，你的內容就可以放入這些建立好的布局中。
柵格巢狀
柵格系統內建的柵格系統將內容再次巢狀。簡單理解就是乙個列內再分成若干份小列。我們可以通過新增乙個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-*
元素內。
小列小列
使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）。
12
通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序。
左側
右側
為了加快對移動裝置友好的頁面開發工作，利用**查詢功能，並使用這些工具類可以方便的針對不同裝置展示或隱藏頁面內容。
移動Web開發 響應式布局（一）
就是使用 查詢針對不同寬度的裝置進行布局和樣式的設定，從而適配不同裝置的目的。裝置劃分 尺寸區間 超小螢幕 手機 768px 小屏裝置 平板 768px 992px 中等螢幕 桌面顯示器 992px 1200px 寬屏裝置 大桌面顯示器 1200px 響應式需要乙個父級做為布局容器，來配合子級元素實...
開發移動端頁面和響應式布局
開發移動端頁面和響應式布局 響應式布局 響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容 多個終端，而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。由於響應式布局要針對不同的視口尺寸，對樣式作出更多的修改，因此並不像流...
響應式開發移動端入門必備知識
採用flex布局的元素，它的所有子元素自動成為容器成員，可以自動分配空間，適合做移動端開發 在不同的裝置上顯示不同的效果，因此適合做移動端開發 物理畫素值 螢幕解析度 裝置獨立畫素 當前瀏覽器的寬高 裝置畫素比 裝置畫素比 物理畫素 裝置獨立畫素 每英吋的畫素值 指裝置的螢幕上能用來顯示網頁的區域 ...