響應式布局

時間：2023-09-03 02:24:02 | 來源：網(wǎng)站運營

時間：2023-09-03 02:24:02 來源：網(wǎng)站運營

響應式布局：

響應式布局

媒體查詢 + bootstrap

1. 響應式開發(fā)原理

使用媒體查詢針對不同寬度的設(shè)備進行布局和樣式的設(shè)置，從而適配不同設(shè)備的目的。

設(shè)備劃分
超小屏幕（手機）：<768px
小屏設(shè)備（平板）：>=768px ~ <992px
中等屏幕（桌面顯示器）：>=992px ~ <1200px
寬屏設(shè)備（大桌面顯示器）：>=1200px

2. 響應式布局容器

響應式需要一個父級作為布局容器，來配合子級元素來實現(xiàn)變化效果

原理：在不同屏幕下，通過媒體查詢來改變這個布局容器的大小，再改變里面子元素的排列方式和大小，從而實現(xiàn)不同屏幕下，看到不同的頁面布局和樣式變化

響應式尺寸劃分
超小屏幕（手機，小于768px）：設(shè)置寬度為100%
小屏幕（平板，大于等于768px）：設(shè)置寬度為750px
中等屏幕（桌面顯示器，大于等于992px）：設(shè)置寬度為970px
大屏幕（大桌面顯示器，大于等于1200px）：設(shè)置寬度為1170px

也可以根據(jù)實際情況自定義劃分

注意：寬度設(shè)置比尺寸小的原因是，布局容器在中間顯示，兩側(cè)留有空白處，會好看一些

Bootstrap前端開發(fā)框架

1. Bootstrap簡介

來自Twitter（推特），是目前最受歡迎的前端框架，基于HTML、CSS、JAVASCRIPT，簡潔靈活，使得web開發(fā)更加便捷

• 中文官網(wǎng)：http://www.bootcss.com/
• 官網(wǎng)：http://getbootstrap.com/
• 推薦使用：http://bootstrap.css88.com/

框架：就是一套架構(gòu)，它有一套比較完整的網(wǎng)頁功能解決方案，而且控制權(quán)在框架本身，有預制樣式庫、組件和插件，使用者要按照框架所規(guī)定的某種規(guī)范進行開發(fā)（拿來用）

2. Bootstrap優(yōu)點

• 標準化的html+css編碼規(guī)范
• 提供了一套簡潔、直觀、強悍的組件
• 有自己的生態(tài)圈，不斷地更新迭代
• 讓開發(fā)更簡單，提高了開發(fā)的效率

3. Bootstrap版本

• 2.x.x：停止維護，兼容性好，代碼不夠簡潔，功能不夠完善
• 3.x.x：目前使用最多，穩(wěn)定，但是放棄了IE6-IE7，對IE8支持但界面效果不好，偏向用于開發(fā)響應式布局、移動設(shè)備優(yōu)先的WEB項目
• 4.x.x：最新版，目前還不是很流行（不再支持IE9以及以下瀏覽器，源碼采用Sass語言編寫）

4. Bootstrap使用

現(xiàn)階段只考慮樣式庫

（1）創(chuàng)建文件夾結(jié)構(gòu)

（2） 創(chuàng)建文件夾bootstrap，然后復制下載好的Bootstrap相關(guān)文件夾

（3）創(chuàng)建html骨架結(jié)構(gòu)

<!--要求當前網(wǎng)頁使用IE瀏覽器最高版本的內(nèi)核來渲染（從而兼容性好一些）--><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--視口的設(shè)置：視口的寬度和設(shè)備一致，默認的縮放比例和PC端一致，用戶不能自行縮放--><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]-->

1. 引入相關(guān)樣式文件

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />

1. 書寫內(nèi)容
2. 直接拿Bootstrap預先定義好的樣式來使用
3. 修改Bootstrap原來的樣式，注意權(quán)重問題
4. 要知道它定義了哪些樣式，以及這些樣式能實現(xiàn)什么樣的效果

Bootstrap布局容器

Bootstrap需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個.container容器，它提供了兩個作此用處的類

1. container 類

• 響應式布局的容器，固定寬度
• 大屏（>=1200px）寬度定為1170px
• 中屏（>=992px）寬度定為970px
• 小屏（>=768px）寬度定為750px
• 超小屏（100%）

2. container-fluid 類

• 流式布局容器，100%寬度
• 占據(jù)全部視口（viewport）的容器
• 適合于制作移動端頁面開發(fā)

Bootstrap柵格系統(tǒng)

1. 簡介

grid systems，指將頁面布局劃分為等寬的列，然后通過列數(shù)的定義來模塊化頁面布局

Bootstrap提供了一套響應式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列

Bootstrap里container寬度是固定的，但在不同屏幕下，container的寬度不同，我們再把container劃分為12等份

Bootstrap是把頁面內(nèi)容劃分為若干等份
之前的flexible.js + rem中的rem是把整個屏幕劃分為10等份

2. 選項參數(shù)

柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局

Bootstrap內(nèi)部已引入了初始化樣式normolize.css，不用再單獨引入

超小屏幕<768px時，.container最大寬度100%，類前綴.col-xs-
小屏設(shè)備>=768px時，.container最大寬度750px，類前綴.col-sm-
中等屏幕>=992px時，.container最大寬度970px，類前綴.col-md-
寬屏設(shè)備>=1200px時，.container最大寬度1170px，類前綴.col-lg-
以上列數(shù)都是分為12列

注意：

• 按照不同屏幕劃分為1~12等份
• 行（row）必須放到container布局容器里面
• 行（row）可以消除（抵消掉）父容器作用15px的邊距
• 實現(xiàn)列的平均劃分需要給列添加類前綴
• xs——extra small超小、sm——small小、md——medium中等、lg——large大
• 每一列默認有左右15px的padding
• 可以同時為一列指定指定多個設(shè)備的類名，以便劃分不同份數(shù)，例如：class="col-md-4 col-sm-6"

若列（column）的份數(shù)相加 = 12時，則會占滿整個container的寬度
若列（column）的份數(shù)相加 < 12時，則占不滿整個container的寬度，會留一些空白
若列（column）的份數(shù)相加 > 12時，則多余的那一列會另起一行顯示

3. 列嵌套

柵格系統(tǒng)內(nèi)置的柵格系統(tǒng)將內(nèi)容再次嵌套，簡單理解就是一個列內(nèi)再分成若干份小列

可以通過添加一個新的.row元素和一系列.col-sm-*元素到已經(jīng)存在的.col-sm-*元素內(nèi)

<div class="col-sm-4"> <div class="row"> <div class="col-sm-6">小列</div> <div class="col-sm-6">小列</div> </div></div>

4. 列偏移

使用.col-md-offset-*類可以將列向右側(cè)偏移，這些類實際是通過使用*選擇器為當前元素增加了左側(cè)的邊距(margin)

<div class="row"> <div class="col-lg-4">1</div> <div class="col-lg-4 col-lg-offset-4">2</div></div>

5. 列排序

通過使用.col-md-push-*往右推和.col-md-pull-*往左拉兩個類就可以很容易的改變列的順序

<div class="row"> <!-- 左側(cè)的元素往后推 8 份的位置 --> <div class="col-lg-4 col-lg-push-8">左側(cè)</div> <!-- 右側(cè)的元素往前拉 4 份的位置 --> <div class="col-lg-8 col-lg-pull-4">右側(cè)</div></div>

6. 響應式工具

為了加快對移動設(shè)備友好的頁面開發(fā)工作，利用媒體查詢功能，并使用這些工具類可以方便的針對不同設(shè)備展示或隱藏頁面內(nèi)容

.hidden-xs：超小屏隱藏，其他都可見
.hidden-sm：小屏隱藏，其他都可見
.hidden-md：中屏隱藏，其他都可見
.hidden-lg：大屏隱藏，其他都可見

與之相反的，visible-xs、visible-sm、visible-md、visible-lg是針對不同設(shè)備顯示某個內(nèi)容

頁面制作時container寬度修改

若效果圖采用1280的寬度，而Bootstrap里面container寬度最大為1170px，需要手動修改container的寬度

/*利用媒體查詢修改container寬度適合效果圖寬度*/@media screen and (min-width: 1280px) { .container { width: 1280px; }}

移動端技術(shù)選型

建議：選取一種主要技術(shù)類型，其他技術(shù)作為輔助，這種混合技術(shù)開發(fā)