例項練習
響應式開發原理
使用**查詢針對不同寬度的裝置進行布局和樣式的設定，從而適配不同裝置的目的
裝置劃分
尺寸區間
設定寬度
列字首超小螢幕（手機）
<768px
100%
.col-xs-
小屏裝置（平板）
>=768px ~ < 992px
750px
.col-sm-
中等螢幕（桌面）
>=992px ~ < 1200px
970px
.col-md-
寬屏裝置（大桌面）
>=1200px
1170px
.col-lg-3
@media screen and (max-width:767px)
}
@media screen and (min-width:768px)
}
簡介前端開發框架—基於html、css、js的，簡潔靈活，使得web開發更加快捷
布局容器
需要為頁面內容和柵格系統包裹乙個.container容器，提供了兩類
container-fluid類
柵格系統
在每一列都有左右15px的padding值，原理是給了33.3%寬度距離進行了左浮動，如果直接給這個＋margin邊框就會存在溢位掉下來，我們就要在列中再增加乙個盒子然後設定它的padding
列巢狀問題
列偏移問題
列排序問題
列隱藏顯示問題
螢幕劃分
container寬度修改 布局
移動端響應式布局基礎
搭建乙個h5頁面，我們需要在head中新增乙個meta標籤 快捷鍵 meta vp tab鍵 width device width 設定視口的寬度等於裝置的寬度，如果不設定的話，缺省視口寬度為980px。通俗的理解 我們這個操作其實就是告訴當前的瀏覽器按照多少寬度來渲染頁面，換句話說，就是展示當前這...
響應式布局的開發基礎
言歸正傳，博主因為是刨根問底攔不組的，所以在此就往響應式設計的祖墳上刨，深入了解下這四個步驟。1.布局及設定meta標籤 當建立乙個響應式 或者非響應式 變成響應式的時候，首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完...
響應式布局與彈性布局基礎篇
響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移動裝置的普及，用 大勢...