響應式佈局

在移動互聯日益成熟的時候，我們在桌面瀏覽器上開發的網頁已經無法滿足移動設備的閱讀。

通常的做法是針對移動端單獨做一套特定的版本。但是如果終端越來越多那麼你需要開發的版本就會越來越多（大屏移動設備普及）。

那麼Ethan Marcotte在2010年5月份提出的一個概念。
簡而言之，就是一個網站能夠兼容多個終端。
在新建站的一些網站現在普遍採用的響應式開發，減少成本。

原理

CSS3中的Media Query(媒體查詢)
通過查詢screen的寬度來指定某個寬度區間的網頁佈局
超小屏幕（移動設備:手機）768px以下
小屏設備（Pad） 768px~992px
中等屏幕 992px-1200px
寬屏設備1200px以上

對比移動web開發

開發方式	移動web開發+PC開發	響應式開發
應用場景	一般在已經有PC端的網站，開發移動站的時候，只需單獨開發移動端	針對新建站的一些網站，現在要求適配移動端，所以就一套頁面兼容各種終端，靈活
開發	針對性強，開發效率高。	兼容各種終端，效率低
適配	只適配移動設備，pad上體驗相對較差。	可以適配各種終端
效率	代碼簡潔，加載快。	代碼相對複雜，加載慢

移動web開發和響應式開發都是現在主流的開發模式。
使用的都是流式佈局，來適配不同設備。
由於終端設備的多樣化，新建站的站點會優先用響應式來開發。

bootstrap 框架

當下最流行的前端UI框架（有預製界面組件）

http://getbootstrap.com/
中文官網 http://www.bootcss.com/

優點

有自己的生態圈，不斷的更新迭代。
提供了一套簡潔、直觀、強悍的組件。
標準化的html+css編碼規範。
讓開發更簡單，提高了開發的效率。

注意：雖然界面組件樣式已經定義好了，但是擴展性相對較強，也就是說我們還可以自定義，修改默認樣式。

bootstrap版本

2.x.x 停止維護
優點：兼容性好
缺點：代碼不夠簡潔，功能不夠完善。
3.x.x 目前使用最多
穩定，但是放棄了IE6-IE7。對IE8支持但是界面效果不好。
偏向用於開發響應式佈局、移動設備優先的 WEB 項目。
4.x.x
更偏響應式，移動設備。

媒體查詢

能針對不同屏幕區間設置不同的佈局和樣式,使用媒體查詢：關於媒體查詢 @media
語法：
@media screen and (max-width: 768px) and (min-width: 320px){屬性樣式}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 1000px;
            margin: 0 auto;
            height: 1000px;
            background: pink;
        }
        /*使用媒體查詢能針對不同屏幕區間設置不同的佈局和樣式*/
        /*怎麼使用媒體查詢：關於媒體查詢 @media */
        /*語法： @media screen and (max-width: 768px) and (min-width: 320px){屬性樣式}*/

        @media screen and (max-width: 768px) {
            /*1. 在超小屏設備的時候 768px以下      當前容器的寬度100%     背景藍色*/
            .container{
                width: 100%;
                background: blue;
            }
        }
        @media screen and (min-width: 768px) and (max-width: 992px){
            /*2. 在小屏設備的時候   768px-992px    當前容器的寬度750px    背景綠色*/
            .container{
                width: 750px;
                background: green;
            }
        }
        @media screen and (min-width: 992px) and (max-width: 1200px){
            /*3. 在中屏設備的時候   992px-1200px   當前容器的寬度970px    背景紅色*/
            .container{
                width: 970px;
                background: red;
            }
        }
        @media screen and (min-width: 1200px){
            /*4. 在大屏設備的時候   1200px以上      當前容器的寬度1170px   背景黃色*/
            .container{
                width: 1170px;
                background: yellow;
            }
        }
    </style>
</head>
<body>
<!--
響應式容器：設置當前容器的寬度小於設定的容器區間，保證在最小的屏幕中也不出現滾動條
1. 在超小屏設備的時候 768px以下      當前容器的寬度100%     背景藍色
2. 在小屏設備的時候   768px-992px    當前容器的寬度750px    背景綠色
3. 在中屏設備的時候   992px-1200px   當前容器的寬度970px    背景紅色
4. 在大屏設備的時候   1200px以上      當前容器的寬度1170px   背景黃色
-->
<div class="container"></div>
</body>
</html>

使用

基本模版

<!--h5文檔申明-->
<!DOCTYPE html>
<!--文檔語言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文檔編碼申明-->
    <meta charset="utf-8">
    <!--要求當前網頁使用瀏覽器最高版本的內核來渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--視口的設置：視口的寬度和設備一致，默認的縮放比例和PC端一致，用戶不能自行縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
    <!-- 優先加載和瀏覽器解釋 -->

    <title>title</title>

    <!-- Bootstrap 核心樣式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分別用來解決IE8版本瀏覽器不支持 H5標籤和媒體查詢的  不兼容問題-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 
    警告：不能以file形式打開，本地打開。最好http://打開 
    Respond.js使用ajax,file形式會出現跨域
    -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 以下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!--TODO-->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>



<!-- bootstrap依賴jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

使用Normalize.css增強跨瀏覽器表現的一致性。

佈局容器

.container 類用於固定寬度並支持響應式佈局的容器。不同的設備，使用不同大小的寬度如上，自定義使用媒體查詢一致。

<div class="container">
  ...
</div>

.container-fluid 類用於 100%寬度，佔據全部視口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

柵格系統

行和列的佈局，網格狀佈局，使用百分比佈局，佔用父容器內容(content,即去掉padding後的內容寬度)的100%

行：row（默認沒有高度）

.container容器默認有15px的左右內間距
.row填充父容器的15px的左右內間距
具有margin-left:-15px,margin-right:-15px -15px拉伸

清除父容器兩側的內邊距

列：`col--` （默認沒有高度）

*不確定（參數）

col：列樣式
第一個*：屏幕的大小
大屏設備 lg 大屏設備以上生效包含本身
中屏設備 md 中屏設備以上生效包含本身
小屏設備 sm 小屏設備以上生效包含本身
超小屏設備 xs 超小屏設備以上生效包含本身
第二個*：每一行的分等份，默認分成12等份，數字代表的是佔多少份
超出12份會自動換行

柵格系統應用

設備	佔比	實際佔用
大屏設備	讓div平均分成6等份	每份佔2份
中屏設備	讓div平均分成4等份	每份佔3份
小屏設備	讓div平均分成3等份	每份佔4份
超小屏設備	讓div平均分成2等份	每份佔6份

<!--h5文檔申明-->
<!DOCTYPE html>
<!--文檔語言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文檔編碼申明-->
    <meta charset="utf-8">
    <!--要求當前網頁使用瀏覽器最高版本的內核來渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--視口的設置：視口的寬度和設備一致，默認的縮放比例和PC端一致，用戶不能自行縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
    <!-- 優先加載和瀏覽器解釋 -->

    <title>title</title>

    <!-- Bootstrap 核心樣式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分別用來解決IE8版本瀏覽器不支持 H5標籤和媒體查詢的  不兼容問題-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打開，本地打開。最好http://打開 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 一下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
    <style>
        .container{
            height: 100px;
            background: pink;
        }
        .container > .row{
            height: 50px;
            background: green;
        }
        .container > .row > div{
            height: 25px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<!--
大屏設備   讓div平均分成6等份 每份佔2份
中屏設備   讓div平均分成4等份 每份佔3份
小屏設備   讓div平均分成3等份 每份佔4份
超小屏設備 讓div平均分成2等份 每份佔6份

超出12份自動換行

-->
<div class="container">
    <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
    </div>
</div>
<!-- bootstrap依賴jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

柵格嵌套

添加row爲了清除父容器的內邊距，不加row會有15px的內邊距

<!--柵格嵌套-->
<div class="col-xs-4">
    <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
</div>

列的偏移

默認左對齊，不能左右浮動，爲了實現右浮動效果可以使用列偏移。
使用 .col-md-offset-*類可以將列向右側偏移。這些類實際是通過使用 * 選擇器爲當前元素增加了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。

<div class="col-xs-4">
    <div class="row">
        <div class="col-xs-3"></div>
        <div class="col-xs-6 col-xs-offset-1"></div>
    </div>
</div>

列排序

在不改變html結構的前提下，通過使用.col-md-push-*（向後推）和 .col-md-pull-*（向前拉）類就可以很容易的改變列（column）的順序。

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

響應式工具

爲了加快對移動設備友好的頁面開發工作，利用媒體查詢功能並使用這些工具類可以方便的針對不同設備展示或隱藏頁面內容。另外還包含了針對打印機顯示或隱藏內容的工具類。

設備	效果
大屏設備	顯示
中屏設備	隱藏
小屏設備	顯示
超小屏設備	隱藏
visible-lg	大屏顯示其他隱藏
visible-md
visible-sm
visible-xs
hidden-lg	大屏隱藏其他顯示
hidden-md
hidden-sm
hidden-xs

3.2版本以後建議使用hidden

平時應該熟悉下bootstrap的組件與javascript插件，當遇到問題時可以判斷是否可以通過bootstrap解決

移動Web開發--學習筆記三響應式佈局

響應式佈局

原理

對比移動web開發

bootstrap 框架

優點

bootstrap版本

媒體查詢

使用

基本模版

佈局容器

柵格系統

行：row（默認沒有高度）

列：`col--` （默認沒有高度）

柵格系統應用

柵格嵌套

列的偏移

列排序

響應式工具

ArcGis-學習筆記6-5 外部Excel數據點導入

大數據 - MapReduce編程案例 -BH3

rem學習使用

Android通過藍牙與PC通信

ArcGis-學習筆記5 地圖可視化與出圖

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

移動Web開發--學習筆記三 響應式佈局

響應式佈局

原理

對比移動web開發

bootstrap 框架

優點

bootstrap版本

媒體查詢

使用

基本模版

佈局容器

柵格系統

行：row（默認沒有高度）

列：col-*-* （默認沒有高度）

柵格系統應用

柵格嵌套

列的偏移

列排序

響應式工具

移動Web開發--學習筆記三響應式佈局

列：`col--` （默認沒有高度）