web開發 固定寬度 edi 嵌套 查詢 代碼 none 原理 全部

一、響應式開發
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開發———第三天