前端成神之路-移動web開發之響應式佈局

不一樣的花朵發表於2020-11-28

前端Web

移動端WEB開發之響應式佈局

1.0 響應式開發原理

1.1 響應式開發原理

就是使用媒體查詢針對不同寬度的裝置進行佈局和樣式的設定，從而適配不同裝置的目的。

裝置的劃分情況：

小於768的為超小螢幕（手機）
768~992之間的為小屏裝置（平板）
992~1200的中等螢幕（桌面顯示器）
大於1200的寬屏裝置（大桌面顯示器）

1.2 響應式佈局容器

響應式需要一個父級做為佈局容器，來配合子級元素來實現變化效果。

原理就是在不同螢幕下，通過媒體查詢來改變這個佈局容器的大小，再改變裡面子元素的排列方式和大小，從而實現不同螢幕下，看到不同的頁面佈局和樣式變化。

父容器版心的尺寸劃分

超小螢幕（手機，小於 768px）：設定寬度為 100%
小螢幕（平板，大於等於 768px）：設定寬度為 750px
中等螢幕（桌面顯示器，大於等於 992px）：寬度設定為 970px
大螢幕（大桌面顯示器，大於等於 1200px）：寬度設定為 1170px

但是我們也可以根據實際情況自己定義劃分

2.0 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 使用四步曲：

建立資料夾結構

建立 html 骨架結構

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

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

    <!-- 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]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <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

響應式佈局的容器固定寬度
大屏 ( >=1200px) 寬度定為 1170px
中屏 ( >=992px) 寬度定為 970px
小屏 ( >=768px) 寬度定為 750px
超小屏 (100%)

.container-fluid

流式佈局容器百分百寬度
佔據全部視口（viewport）的容器。

2.6 bootstrap柵格系統

Bootstrap提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。

柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就可以放入這些建立好的佈局中。

按照不同螢幕劃分為1~12 等份
行（row）可以去除父容器作用15px的邊距
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-*
元素內。

<!-- 列巢狀 -->
 <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>

響應式工具

為了加快對移動裝置友好的頁面開發工作，利用媒體查詢功能，並使用這些工具類可以方便的針對不同裝置展示或隱藏頁面內容。
在這裡插入圖片描述

3.0 阿里百秀案例製作

3.1 技術選型

方案：我們採取響應式頁面開發方案

技術：bootstrap框架

設計圖：本設計圖採用 1280px 設計尺寸

專案結構搭建