移動web開發———第三天

標籤：網頁布局   多個   開發效率   流行   區別   響應式布局   相容   前端   and   

一、響應式開發
1、響應式布局， 就是一個網站能夠相容多個終端。
2、響應式開發的原理
CSS3中的Media Query（媒介查詢，and之後一定要加空格@media screen and (min-width: 768px) and (max-width: 992px) {}; 通過查詢screen的寬度來指定某個寬度區間的網頁布局。
超小螢幕（行動裝置）768px以下
小屏裝置 768px-992px
中等螢幕 992px-1200px
大屏裝置 1200px以上
3、響應式開發和移動web開發的區別
開發方式 移動web開發+PC開發 響應式開發
應用情境 一般在已經有PC段的網站，開發移動站的時候，只需單獨開發移動端 針對建立站的一些網站，現在要求適配移動端，所以就一套頁面相容各種終端，靈活
開發 針對性強，開發效率高 相容各種終端，效率低
適配 只是陪行動裝置，pad上體驗相對較差 可以適配各種終端
效率 代碼簡潔，載入快 代碼相對複雜，載入慢

bootStrap
bootStrap架構----當前最流行的前端UI架構（有預製介面組件）
特點：組件簡潔大方，代碼規範精簡，介面自訂性強
優點：
有自己的生態圈，不斷的更新迭代
提供了一套簡潔、直觀、強悍的組件
標配准化的html+css編碼規範
讓開發更簡單，提高了開發的效率。
3、版面配置容器
.container固定寬度並且支援響應式布局的容器
預設margin:55px; padding:15px;
.container-fluid類用於 100% 寬度，佔據全部視口（viewport）的容器。
4、刪格系統
行：row 通過自身的展開來填充父容器的內邊距
刪格參數：
超小螢幕 手機(<768px) 小螢幕 平板(≥768px) 中等螢幕(≥992px) 大螢幕 (≥1200px)
柵格系統行為 總是水平排列 開始是堆疊在一起的，當大於這些閾值時將變為水平排列C
.container最大寬度 None（自動） 750px 970px 1170px
類首碼 .col-xs- .col-sm- .col-md- .col-lg-
列數(column) 12
可嵌套 是
位移（Offsets） .col-xs-offset-
可見、隱藏 .visible-xs- .hidden-xs

移動web開發———第三天