移動端WEB開發之響應式佈局
1、響應式開發原理
1.1 響應式開發原理
就是使用媒體查詢針對不同寬度的裝置進行佈局和樣式的設定,從而適配不同裝置的目的。
裝置的劃分情況:
-
小於768的為超小螢幕(手機)
-
768~992之間的為小屏裝置(平板)
-
992~1200的中等螢幕(桌面顯示器)
-
大於1200的寬屏裝置(大桌面顯示器)
1.2 響應式佈局容器
響應式需要一個父級做為佈局容器,來配合子級元素來實現變化效果。
原理就是在不同螢幕下,通過媒體查詢來改變這個佈局容器的大小,再改變裡面子元素的排列方式和大小,從而實現不同螢幕下,看到不同的頁面佈局和樣式變化。
bootstrap裡面父容器版心的尺寸劃分
-
超小螢幕(手機,小於 768px):設定寬度為 100%
-
小螢幕(平板,大於等於 768px):設定寬度為 750px
-
中等螢幕(桌面顯示器,大於等於 992px):寬度設定為 970px
-
大螢幕(大桌面顯示器,大於等於 1200px):寬度設定為 1170px
但是我們也可以根據實際情況自己定義劃分
2 、bootstrap(前端開發框架)的介紹
2.1Bootstrap簡介
Bootstrap 來自 Twitter(推特),是目前最受歡迎的前端框架。Bootstrap 是基於HTML、CSS 和 JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。
框架:顧名思義就是一套架構,它有一套比較完整的網頁功能解決方案,而且控制權在框架本身,有預製樣式庫、元件和外掛。使用者要按照框架所規定的某種規範進行開發。
2.2 bootstrap優點
-
標準化的html+css編碼規範
-
提供了一套簡潔、直觀、強悍的元件
-
有自己的生態圈,不斷的更新迭代
-
讓開發更簡單,提高了開發的效率
-
裡面還有字型圖示,使用時直接複製圖示類名新增到標籤中即可
2.3 版本簡介
2.x.x:停止維護,相容性好,程式碼不夠簡潔,功能不夠完善。
3.x.x:目前使用最多,穩定,但是放棄了IE6-IE7。對 IE8 支援但是介面效果不好,偏向用於開發響應式佈局、移動裝置優先的WEB 專案。
4.x.x:最新版,目前還不是很流行
2.4bootstrap基本使用
在現階段我們還沒有接觸JS相關課程,所以我們只考慮使用它的樣式庫。
Bootstrap 使用四步曲:
-
建立資料夾結構
把下載下來的資料夾放到我們自己的bootstrap資料夾中
-
建立 html 骨架結構
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--要求當前網頁使用IE瀏覽器最高版本的核心來渲染-->
<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>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<!--解決ie9以下瀏覽器對html5新增標籤的不識別,並導致css不起作用的問題-->
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--解決ie9以下瀏覽器對除css3 Media Query的不識別-->
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html> -
引入相關樣式檔案
<!-- Bootstrap 核心樣式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> -
書寫內容
直接拿Bootstrap 預先定義好的樣式來使用
可通過新增類名修改Bootstrap 原來的樣式,注意權重問題
學好Bootstrap 的關鍵在於知道它定義了哪些樣式,以及這些樣式能實現什麼樣的效果(去官網查詢)
2.5 bootstrap佈局容器
Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 或者.container-fluid 容器,它提供了兩個作此用處的類。
.container(bootstrap裡面設定了左右15px的內邊距 ,加了row後會去掉container盒子的內邊距)
-
響應式佈局的容器 固定寬度
-
大屏 ( >=1200px) 寬度定為 1170px
-
中屏 ( >=992px) 寬度定為 970px
-
小屏 ( >=768px) 寬度定為 750px
-
超小屏 (100%)
.container-fluid
-
流式佈局容器 百分百寬度
-
佔據全部視口(viewport)的容器。
-
適合單獨做移動端開發
2.6 bootstrap柵格系統
柵格系統英文為"grid systems" ,也有人翻譯為“網格系統”,它是指將頁面佈局劃分為等寬的列,然後通過列數的定義來模組化頁面佈局。
Bootstrap提供了一套響應式、移動裝置優先的流式柵格系統,隨著螢幕或視口(viewport)尺寸的增加,系統會自動分為最多12列。
柵格系統用於通過一系列的行(row)與列(column)的組合來建立頁面佈局,你的內容就可以放入這些建立好的佈局中。
超小螢幕(手機)<768px | 小屏裝置(平板)>=768px | 中等螢幕(桌面顯示器)>=992px | 寬屏裝置(大桌面顯示器)>=1200px | |
---|---|---|---|---|
.container 最大寬度 | 自動(100%) | 750px | 970px | 1170px |
類字首 | .col-xs-份數 | .col-sm-份數 | .col-md-份數 | .col-lg-份數 |
列數(column) | 12 | 12 | 12 | 12 |
-
行( row )必須放到container佈局容器裡面
-
我們實現列的平均劃分 需要給列新增類字首
-
xs- extra small:超小; sm- small:小; md- medium:中等; lg- large:大;
-
列(column)大於 12,多餘的“列(column)”所在的元素將被作為一個整體另起一行排列
-
每一列預設有左右15畫素的 padding,
-
可以同時為一列指定多個裝置的類名,以便劃分不同份數 例如 class="col-md-4 col-sm-6"
柵格巢狀
柵格系統內建的柵格系統將內容再次巢狀。簡單理解就是一個列內再分成若干份小列。我們可以通過新增一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-*元素內。
列巢狀最好加一個行 row 這樣可以取消父元素的padding值,而且高度自動和父親一樣高
<!-- 列巢狀 -->
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6">小列</div>
<div class="col-sm-6">小列</div>
</div>
</div>
列偏移
使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 類選擇器為當前元素增加了左側的邊距(margin)。
<!-- 列偏移 -->
<div class="row">
<div class="col-lg-4">1</div>
<div class="col-lg-4 col-lg-offset-4">2</div>
</div>
列排序
通過使用 .col-md-push-(推) 和 .col-md-pull- (拉)類就可以很容易的改變列(column)的順序。
<!-- 列排序 -->
<div class="row">
<div class="col-lg-4 col-lg-push-8">左側</div>
<div class="col-lg-8 col-lg-pull-4">右側</div>
</div>
響應式工具
為了加快對移動裝置友好的頁面開發工作,利用媒體查詢功能,並使用這些工具類可以方便的針對不同裝置展示或隱藏頁面內容。
超小屏 | 小屏 | 中屏 | 大屏 | |
---|---|---|---|---|
.hidden-xs | 隱藏 | 可見 | 可見 | 可見 |
.hidden-sm | 可見 | 隱藏 | 可見 | 可見 |
.hidden-md | 可見 | 可見 | 隱藏 | 可見 |
.hidden-lg | 可見 | 可見 | 可見 |
與之相反的是visible-xs, visible-sm, visible-md, visible-lg ,是顯示某個頁面內容
bootstrap其他(如按鈕、表單、表格等)請參考bootstrap文件
3、 阿里百秀案例製作
3.1 技術選型
方案:我們採取響應式頁面開發方案
技術:bootstrap框架
設計圖: 本設計圖採用 1280px 設計尺寸
3.2 螢幕劃分分析
-
螢幕縮放發現 中螢幕和大屏幕布局是一致的,因此我們列定義為col-md-就行了,md是大於等於970以上的
-
小屏幕布局發生變化,因此需要為小螢幕根據需求改變樣式佈局
-
超小屏幕布局有發生變化,因此需要為超小螢幕根據需求改變樣式
-
策略:先佈局md以上的PC端佈局,最後根據實際需要修改小螢幕和超小螢幕的特殊佈局樣式
專案結構搭建
Bootstrap 使用四步曲:
-
建立資料夾結構
-
建立 html 骨架結構
-
引入相關樣式檔案
-
書寫內容
container寬度修改
因為本效果圖採取 1280的寬度, 而Bootstrap 裡面 container寬度 最大為 1170px,因此我們需要手動改下container寬度
/* 利用媒體查詢修改 container寬度適合效果圖寬度 */
@media (min-width: 1280px) {
.container {
width: 1280px;
}
}
移動端總結
移動端技術選型
-
-
flex彈性佈局(推薦)
-
rem適配佈局 (推薦)
-
響應式佈局
建議