響應式開發

時間 2019-11-30

標籤響應開發简体版

原文原文鏈接

響應式開發

響應式開發原理css

使用媒體查詢針對不一樣寬度的設備進行佈局和樣式的設置，從而適配不一樣設備的目的html

設備劃分	尺寸區間
超小屏幕（手機）	<768px
小屏設備（平板）	>=768px~<992px
中等屏幕（桌面顯示器）	>=992px~<1200px
寬屏設備（大桌面顯示器）	>=1200px

響應式佈局容器前端
- 響應式須要一個父級做爲佈局容器，來配合子級元素來實現變化的效果
- 【原理】在不一樣屏幕下，經過媒體查詢來改變這個佈局容器的大小，在改變裏面子元素的排列方式和大小，從而實現不一樣屏幕下，看到不一樣的頁面佈局和樣式變化
- 響應式尺寸劃分
  - 超小屏幕（手機/小於768px）：設置寬度爲100%
  - 小屏幕（平板，大於等於768px）：設置寬度爲750px
  - 中等屏幕（桌面顯示其，大於等於992px）：寬度設置爲970px
  - 大屏幕（打桌面顯示器，大於等於1200px）：寬度設置爲1170px
Bootstrap簡介html5
- Bootstrap來自Twitter，是目前最受歡迎的前端框架。Bootstrap是基於HTML、CSS和JAVASCRIPT,他的簡介靈活，使得Web開發更加快捷
- 中文官網：http://www.bootcss.com/
- 官網：http://getbootstrap.com/
- 推薦使用：http://bootstrap.css88.com/
- 【優勢】
  - 標準化的html+css編碼規範
  - 提供一套簡潔、直觀、強悍的組件
  - 有本身的生態圈，不斷的更新迭代
  - 讓開發更簡單，提升開發效率

bootstrap使用jquery

建立文件夾結構css3

建立html骨架結構npm

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
     <!--要求當前網頁使用IE瀏覽器最高版本的內核渲染-->
    <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="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 -->
    <!--[if lt IE 9]>
 <!--解決ie9如下瀏覽器對html5新增標籤的不識別，並致使CSS不起做用的問題-->
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
       <!--解決ie9一下瀏覽器對css3 Media Query的不識別-->
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

引入相關樣式文件bootstrap
書寫內容瀏覽器

bootstrap佈局容器前端框架
- Bootstrap須要爲頁面內容和柵格系統包裹一個.container容器，Bootstrap預約義好的類
- .container類
  - 響應式佈局的容器固定寬度
  - 大屏（>=1200px）寬度定位1170px
  - 中屏（>=992px）寬度定位970px
  - 小屏（>=768px）寬度定位750px
  - 超小屏（100%）
- .contaimer-fluidlei
  - 流式佈局容器百分比寬度
  - 佔據所有視口（vieport）的容器
  - 適合於單獨作移動端開發
柵格系統簡介
- 柵格系統英文爲「grid systems」,也有人翻譯爲「網格系統」，他是指將頁面佈局劃分爲等寬的列，而後經過列數的定義來模塊化頁面佈局
- Bootstrap提供了一套響應式/移動設備優先的流式柵格系統，隨着屏幕或者視口尺寸的增長，系統會自動分爲最多12列
- Bootstrap裏面container寬度是固定的，可是不一樣屏幕下，container的寬度不一樣，咱們再把container劃分爲12等分

柵格化選項參數

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

	超小屏幕（手機）<768px	小屏設備（平板）>=768px	中等屏幕（桌面顯示器）>=992px	寬屏設備（大桌面顯示器）>=1200px
.container最大寬度	自動（100%）	750px	970px	1170px
類前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）數

行（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-*元素內
- 列嵌套最好加1個row這樣能夠取消父元素的padding值並且高度自動和父級同樣高
- ```
<div class="col-sm-4">
    <div class="row">
        <div class="col-sm-6">a</div>
        <div class="col-sm-6">a</div>
    </div>

</div>
```
柵格列偏移
- 使用.col-md-offset-* 類能夠將列向右側偏移。這些類實際是經過使用* 選擇器爲當前元素增長了左側的邊距
柵格列排序
- 經過使用.col-md-push-* 和.col-md-pull-* 類就能夠很容易的改變列（column）的順序