網頁佈局方式

1、固定寬度佈局：爲網頁設置一個固定的寬度，通常以px做爲長度單位，常見於PC端網頁。

2、流式佈局：爲網頁設置一個相對的寬度，通常以百分比做爲長度單位。

3、柵格化佈局：將網頁寬度人爲的劃分成均等的長度，然後排版佈局時則以這些均等的長度做爲度量單位，通常利用百分比做爲長度單位來劃分成均等的長度。

4、響應式佈局：通過檢測設備信息，決定網頁佈局方式，即用戶如果採用不同的設備訪問同一個網頁，有可能會看到不一樣的內容，一般情況下是檢測設備屏幕的寬度來實現。

注：以上幾種佈局方式並不是獨立存在的，實際開發過程中往往是相互結合使用的。

響應式佈局

Responsive design，意在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。屏幕尺寸不一樣展示給用戶的網頁內容也不一樣，我們利用媒體查詢可以檢測到屏幕的尺寸（主要檢測寬度），並設置不同的CSS樣式，就可以實現響應式的佈局。

我們利用響應式佈局可以滿足不同尺寸的終端設備非常完美的展現網頁內容，使得用戶體驗得到了很大的提升，但是爲了實現這一目的我們不得不利用媒體查詢寫很多冗餘的代碼，使整體網頁的體積變大，應用在移動設備上就會帶來嚴重的性能問題。

響應式佈局常用於企業的官網、博客、新聞資訊類型網站，這些網站以瀏覽內容爲主，沒有複雜的交互。

響應式開發

什麼是響應式開發

在移動互聯日益成熟的時候，桌面瀏覽器上開發的網頁已經不能滿足移動端的設備的展示和閱讀
之前，通常的做法是對移動端單獨開發一套特定的版本
但是，如果移動終端設備起來越多的時候賦發成本太大，是因爲需要做所有屏幕的適配
響應式開發的目的就是:一個網站能夠兼容多種終端
在新建的網站上一般都會使用響應式開發
移動web開發和響應式開發是必須具備的技能
演示響應者頁面

響應式開發的原理：媒體查詢：

查詢媒介，查詢到當前屏幕(媒介媒體)的寬度，針對不同的屏幕寬度設置不同的樣式來適應不同屏幕。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。簡單說，你可以設置不同屏幕下面的不同的樣式，達到適配不同的屏幕的目的。

實現方式：通過查詢screen的寬度來指定某個寬度區間的網頁佈局。

超小屏幕（移動設備） w<768px
小屏設備 768px-992px 768 <= w <992
中等屏幕 992px-1200px 992 =< w <1200
寬屏設備 1200px以上 w>=1200

@media mediatype and|not|only (media feature) {

    CSS-Code;

}

針對不同的媒體使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

媒體功能

值描述

device-height 定義輸出設備的屏幕可見高度。
device-width 定義輸出設備的屏幕可見寬度。
max-device-height 定義輸出設備的屏幕可見的最大高度。
max-device-width 定義輸出設備的屏幕最大可見寬度。
min-device-width 定義輸出設備的屏幕最小可見寬度。
min-device-height 定義輸出設備的屏幕的最小可見高度。
max-height 定義輸出設備中的頁面最大可見區域高度。
max-width 定義輸出設備中的頁面最大可見區域寬度。
min-height 定義輸出設備中的頁面最小可見區域高度。
min-width 定義輸出設備中的頁面最小可見區域寬度。

eg:控制不同屏幕尺寸下的屏幕背景色

<style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒體查詢：注意and後面空格的添加*/
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*中等屏幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: pink;
        }
    }
</style>

CSS框架

隨着Web應用變的越來越複雜，在大量的開發過程中我們發現有許多功能模塊非常相似，比如輪播圖、分頁、選項卡、導航欄等，開發中往往會把這些具有通用性的功能模塊進行一系列封裝，使之成爲一個個組件應用到項目中，可以極大的節約開發成本，將這些通用的組件縮合到一起就形成了前端框架。

Bootstrap框架：提高web開發效率

Bootstrap簡介：當前最流行的前端UI框架(有預製界面組件), Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目

Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷
Bootstrap是基於HTML5和CSS3開發的，它在jQuery的基礎上進行了更爲個性化和人性化的完善，形成一套自己獨有的網站風格，併兼容大部分jQuery插件

爲什麼使用Bootstrap:

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

BootStrap的版本瞭解

2.x.x:兼容性好 / 代碼不夠簡潔，功能不夠完善
3.x.x:穩定性好,放棄了IE6-IE7,對IE8的支持一般 /偏向於響應式佈局開發，移動設備優先的web項目開發
4.x.x:測試階段，偏向於響應式，移動設備

BootStrap基本模板

<!--說明頁面是html5頁面-->
<!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,user-scalable=0">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap核心樣式文件 -->
    <link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries: 這兩個文件的引入是爲了支持IE8下面的html5元素和媒體查詢：因爲在IE8下面默認不支持HTML5和媒體查詢，所以需要引入兩個插件-->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// 如果通過file://來查看文件，那麼respond.js文件不能正常工作，說明必須在http://形式下訪問纔有用-->
    <!--html5shiv.min.js：爲了在IE8下面支持HTML標籤
    respond.min.js：爲了在IE8下面支持媒體查詢-->
    <!--[if lt IE 9]> <!--只有IE9之前纔會加載這兩個文件  lt:less than-->
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond.js/respond.js"></script>
    <![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

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

Bootstarp全局css樣式

HTML5 文檔類型

<!DOCTYPE html>

<html lang="zh-CN">

 ...

</html>

移動設備優先
Normalize.css:爲了增強跨瀏覽器表現的一致性，使用了 Normalize.css

BootStrap版心容器—佈局容器.

分類：

.container 類用於固定寬度並支持響應式佈局的容器。
.container-fluid 類用於 100% 寬度，佔據全部視口（viewport）的容器。

針對.container,當屏幕寬度>992px的時候，佈局容器寬度爲1170px
否則，當寬度>768px的時候，佈局容器寬度爲970px
當寬度<768px的時候，佈局容器寬度爲100%(750px)

BootStrap柵格系統

概念：Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分爲最多12列。柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面佈局，你的內容就可以放入這些創建好的佈局中
“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。
你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作爲行（row）”的直接子元素。
類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速創建柵格佈局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的佈局。
通過爲“列（column）”設置 padding 屬性，從而創建列與列之間的間隔（gutter）。通過爲 .row 元素設置負值 margin 從而抵消掉爲 .container 元素設置的 padding，也就間接爲“行（row）”所包含的“列（column）”抵消掉了padding。
柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創建。
如果一“行（row）”中包含了的“列（column）”大於 12，多餘的“列（column）”所在的元素將被作爲一個整體另起一行排列。

eg：從堆疊到水平排列: 使用單一的一組 .col-md-* 柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變爲水平排列。所有“列（column）必須放在 ” .row 內。

<div class="row">
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
</div>
------------------------------------------------
<div class="row">
   <div class="col-md-8">.col-md-8</div>
   <div class="col-md-4">.col-md-4</div>
</div>
------------------------------------------------
<div class="row">
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4">.col-md-4</div>
</div>
------------------------------------------------
<div class="row">
   <div class="col-md-6">.col-md-6</div>
   <div class="col-md-6">.col-md-6</div>
</div>

簡單說：柵格系統就是規範了你的column佔據的寬度，只不過這個寬度是bootstrap事先規範好了。
柵格系統的意義：移動設備和桌面屏幕：它可以規範在不同尺寸的屏幕下，當前的列佔據的寬度。或者說一行可以放置幾個列。

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
     <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 </div>
 <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
     <div class="col-xs-6">.col-xs-6</div>
     <div class="col-xs-6">.col-xs-6</div>
</div>

柵格系統是往上兼容的：意味着小屏幕上的效果在大屏幕上也是可以正常顯示的人，但是大屏幕上的設置在小屏幕上卻無法正常顯示。
Row可以再次嵌套在列中。如果不能填滿整列，則默認從左排列，如果超出，則換行展示

響應式佈局與bootstrap框架

網頁佈局方式

響應式佈局

CSS框架

CSS樣式部分總結

vue-cli項目中使用mui配置（自測成功）

swiper自動無限輪播（複習01）

webpack安裝

Vue路由基礎

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

linux以太網驅動總結