前期準備

1.1 響應式概念

響應式網站是一個多項技術構成的設計理念，實現利用一套代碼，實現網站對不同分辨率，不同尺寸，不同類型的瀏覽終端自適應適配，並且在不同類型的終端上顯示不同風格的設計。

1.2 響應式技術構成

flexible grid layout 彈性網格佈局
flexible image 彈性圖片
media queries 媒體查詢

1.3 響應式網站的優點

1.減少工作量

網站、設計、代碼、內容只需要一份
多出來的工作量只是JS腳本、CSS樣式做一些改動

2.節省時間

3.每個設備都有正確的設計

4.搜索優化

5.更好的用戶體驗

1.4 響應式網站的缺點

1.會加載更多的樣式和腳本

2.設計比較難精確定位和控制

3.老版本的瀏覽器兼容性不好

1.5 瀏覽器兼容

PC端國內主流瀏覽器：

Chrome瀏覽器
IE瀏覽器 8+ / Edge瀏覽器
Firefox瀏覽器
Safari瀏覽器

移動端國內主流瀏覽器：

Android Browser
Chrome瀏覽器
UC瀏覽器
騰訊X5內核瀏覽器（如微信、QQ、QQ空間、QQ瀏覽器）
iOS Safari瀏覽器

1.6 媒體查詢

@media all and(min-width:800px) and (orientation:landscape){
    ......
    //@media申明類型
    //all代表媒體類型，可爲print(打印)或者是screen（屏幕顯示）
    //and（邏輯操作符）
}

一個媒體查詢由一個可選的媒體類型和零個或多個使用媒體功能的限制了樣式表範圍的表達式組成，例如寬度、高度和顏色。媒體查詢，添加自CSS3，允許內容的呈現針對一個特定範圍的輸出設備而進行裁剪，而不必改變內容本身。

1.邏輯操作符

and ‘與’ 操作符左右都正確爲真
or ‘或’ 操作符左右有一個正確爲真，可用 ‘ ，’逗號代替
not ‘非’ 只對逗號前面的表達式起作用 例如：@media (not(screen and(colod))),print and (color){}
only ‘只有’ 防止老舊瀏覽器不兼容，在老版本中only後面的代碼皆不執行

例如：@media = "only screen and（min-width:401px）and (max-width:600px)

等效於 @media = "only" //only後跟的所有樣式都會失效，都不會顯示
@media = "screen and（min-width:401px）and (max-width:600px)

等效於 @media = "screen" //screen後跟的所有邏輯操作符失效，都會顯示該媒體查詢內的樣式

因爲老版沒有only這個屬性所以它看到only會自動忽略後面的語句，但是screen老版瀏覽器看的懂所以會在以後的每一個媒體查詢中應用

2.媒體查詢屬性

可添加min或max來作爲以下部分屬性的前綴

width：視口寬度
height：視口高度
device-width：渲染表面的寬度，就是設備屏幕的寬度
device-width：渲染表面的高度，就是設備屏幕的高度
orientation：檢查設備處於橫向還是縱向
aspect-ratio：基於視口寬度和高度的寬高比，width/height，如16:9,4:3
device-aspect-ratio：定義輸出設備的屏幕可見寬度與高度的比率。
color：每種顏色的位數bits，如min-color:16位,8位
resolution：檢測屏幕或打印機的分辨率，如min-resolution：300dpi

1.7 viewport視口

在PC端視口代表着整個可顯示屏幕的大小

而在移動端視口卻有三個不同的視口概念

1.佈局視口

佈局視口爲網頁PC端版式，爲默認佈局模式下的頁面顯示大小

2. 可視視口

可視視口爲手機端能看見PC端網頁的顯示大小，根據屏幕大小不同，顯示大小也會不同

3.理想視口

理想視口就是佈局視口在一個設備上的最佳顯示大小，根據屏幕大小自動修改佈局視口的尺寸

用代碼來實現：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

其中：
width=device-width，指將視口寬度定義爲設備寬度
minimum-scale=1.0，最小的縮放比例爲1倍
maximum-scale=1.0，最大的縮放比例爲1倍
user-scalable=no，禁止用戶縮放

1.8 響應式網站設計實踐原則

開發模式

progressive enhancement 漸進增強：先從較低版本，兼容性較差的瀏覽器開始開發，實現“能用”，再逐漸往上開發，增加效果，實現“好看”，此觀念比較老舊
graceful degradation 優雅降級：直接從最新版本的瀏覽器入手開發，之後做老舊瀏覽器的兼容性適配

我習慣於先用新的瀏覽器做出好的效果，然後根據需求向後做出修改----也就是優雅降級

PC端和手機端的優先原則

要根據網站的需求和性質來選擇，主要面向手機端用戶的網站要選擇手機端優先
根據團隊或個人的習慣來選擇，沒有對錯，只有適合

瀏覽器適配原則（優先chrome上調試）

PC端：Chrome、Firefox、IE8+、Safari
手機端：Google Browas、Safari、QQ瀏覽器、UC瀏覽器、360瀏覽器

內容顯示原則

不管設備大小，內容可根據頁面排版做部分修改，選擇顯示或隱藏

斷點選擇原則

不要針對設備進行斷點,而是根據屏幕的大小上設置斷點

0-480 小屏幕

481-800 中屏幕

801-1400 大屏幕

1400+ 巨屏幕

2 組織項目文件目錄結構

約定大於配置：約定代碼結構或命名規範來減少配置的數量

css/*.css

jquery.js->jquery.min.js

沒有最好的組織方式，只有最適合的。

2.1 基本目錄結構

在不復雜的結構中，我們採用扁平化的結構，結構簡單

在複雜的結構中，我們通常用模塊，組件的就夠來具體劃分每一個模塊的功能

1.doc //文檔目錄

src //文件資源文件夾

css //樣式表文件夾
js //Javascript文件夾
img //圖片文件夾
tpl //模板文件夾
swf //Flash文件
less //動態樣式表，或者sass
index.html
login.html

2.2 常規文件

main.css //通用樣式文件
normalize.css //使標準化CSS樣式
page.css //獨立頁面對應的CSS文件

main.js //通用JS文件
vendor //網站引用的庫文件夾
vendor/jquery.min.js //jquery壓縮版js文件

2.3 非常規文件

1.404.html

錯誤文件，在該頁面上進行錯誤的提醒，提高友好度

robots.txt

路徑：/src
作用：用來告訴搜索引擎爬蟲，該網站可訪問和不可訪問的頁面路徑，會被爬蟲第一時間訪問，並依據該文件爬取網站頁面

favicon.ico

路徑：/src
作用：用來被引用爲網站縮略的圖標，可利用比特蟲等在線工具轉換。

humans.txt

路徑：/src
作用：用來說明參加網站創建人員的信息，如團隊成員、感謝和站點的技術信息。

.editorconfig

路徑：根目錄
作用：用來使不同的代碼編輯根據根據該文件顯示相同的代碼風格，便於程序員在不同IDE中維護，包括縮進格式、編碼格式、換行規格。

格式：

#editorconfig.org 註釋說明此文檔爲editorconfig文件 

root = true 最頂層的配置文件，之後再不會查找其他的editorconfig文件 

[*] 以下規則應用於所有文件 
charset = utf-8 所有文件的編碼格式爲utf-8 
indent_size = 4 代碼縮進的空格數，可爲tab 
indent_style = space代碼縮進的樣式，爲空格 
insert_final_newline = true 每個文件以空白行結尾 
trim_trailing_whitespace = true 去除換行行首的空白字符 

[*.md] 
以下規則引用與markdown文件 
trim_trailing_whitespace = false //在md文件中，不去除換行行首的空白字符

5. .gitignore

路徑：根目錄
作用：告訴Git版本工具，哪些文件不需要添加到版本管理中，包括操作系統生成文件、IDE產生的臨時文件、日誌文件、工具自動化生成的文件等

6.LICENSE.txt

路徑：根目錄
作用：用來存放許可協議，名稱爲大寫，包括版權聲明，開源協議：有些工具你用了，它是開源的，所以你也是開源了，所以你要說明一下

7.README.md

路徑：根目錄
作用：用來存放項目簡介、使用方式、相關連接

Markdown的一些簡單語法：

# 標題1
## 標題2
###### 標題6

無序列表：
*列表項
*列表項
*列表項
*列表項

有序列表：
1.列表項
2.列表項
3.列表項
4.列表項

引用
> 活着或者死去，這是個問題

鏈接
[百度](http://www.baidu.com)

圖片
![百度Logo（鏈接不存在時的顯示）](圖片的URL)

*斜體*
**粗體**
***粗體帶斜體***

表格
|coso|coso|coso|
|----|:----:|----|   （這裏的：：是兩邊對齊）
|aaa|aaa|aaa|aaa|

代碼
...html    使用html的規則實現語法高亮
<head>
    <body>
    </body>
</head>
...

`<script>` 變爲代碼格式

8.CHANGLOG.md

路徑：根目錄
作用：用來存放項目每個版本的更新，以及說明版本號、更新內容、修復了哪些問題等

3

4 5 如何實現移動端的樣式

5-1 響應式佈局調試工具

一般是先實現移動端的樣式然後實現PC端的樣式

實現媒體查詢一般有兩種方法：1.寫在樣式的最低端

2.寫在要更改的樣式旁邊

斷點的設定：一般根據用戶的來源和設計圖來設置斷點

@media only screen and (max-width:800px){
    header .top{
        background-color: green;
    }
}

@media only screen and (min-width:481px) and (max-width: 800px) {
    header .top ul li a{
        color: red;
    }
}

@media only screen and (max-width:480px) {
    header .top ul li a{
        color: blue;
    }
}

注意：不管用什麼方法加載媒體查詢，一定要做要設置的元素的後面，維護起來也方便。

使用谷歌WEB工具進行調試

谷歌有專門的響應式工具來調整各個斷點下的元素展現。

5-2 如何選擇媒體查詢單位

因爲px和rem的不同的計算單位，所以在選擇什麼單位做斷點時，就顯得尤其的重要。

針對不同寬度下頁面顯示大體相同，但功能上不同的頁面我們用絕對值px來設置。
針對不同寬度下頁面顯示不同，但功能大體相同的頁面我們用rem來設置斷點。

但使用rem也帶來了一些問題需要我們解決：

rem和px的轉換

因爲我們的設計圖全是用px來設定的，所以以我們在書寫頁面時，我們先需要轉換px和rem。

媒體查詢的級別很高，並且·它不是HTML的子元素，所以它對應的不是HTML的font-size而是瀏覽器默認的font-size，所以我們用

px/16來得到rem的值。

rem和em

雖然我們可以使用rem來設定相對位置，但是rem對舊版本的瀏覽器兼容不好，所以我們用兼容性更好的em來代替rem。

css選擇器

我們使用CSS強大的選擇器來根據設計圖設定媒體查詢

我們利用先前設置好的斷點來佈局

@media only screen and (max-width:50em){
    header .top ul li a{
        padding:0 1rem; //在50em的寬度下，縮小頭部a標籤的間隙
    }
}

@media only screen and (min-width: 30.0625em) and (max-width: 50em) {
}

@media only screen and (max-width: 30em){
    header .top .tel,
    header .top ul li:nth-child(3),
    header .top ul li:nth-child(4){
        display: none;
    }
}
//在30em的寬度下，隱藏熱線電話，和關於幫助的a標籤

CSS選擇器：

1.基本選擇器：* E .class #id

(E F)後代選擇器，全部選中包括孫元素

(E>F)子元素選擇器，只選中子元素不包括子元素中的孫子元素

（E + F）兄弟選擇器，選擇當前元素後的所有兄弟元素

  <style type="text/css">
    .a p+p{
      color: red;
    }
  </style>
</head>
<body>
    <div class="a">
    <p>a</p>
    <p>b</p>
    <p>c</p>
  </div>
</body>

（E ~ F）通用選擇器，選擇所有的兄弟元素

2. 屬性選擇器

E[attr]

E[attr="value"]

E[attr^="value"] 開頭相等

E[attr$="value"] 結尾相等例：img[href$=".png"]

E[attr*="value"] 所有相等的元素

E[attr~="value"] 模糊選擇，空格開頭 <a title="Hello World"></a> a[title~="World"]

E[attr|="value"] 模糊選擇，從-開頭 <div lang="zh-cn"></div> div[lang|="cn"]

3 僞類選擇器

僞類選擇器有很多，有以前css的僞類，也有現在CSS3新特性的僞類

:link :visited :hover :first-child :nth-child()

:first-child和:nth-child()的區別

.nth p:first-child 必須是p標籤下的第一個元素：

如果是這樣就不會生效,因爲第一個元素不是p元素

<div class="nth">
    <div>hi</div>
    <p>one</p>
    <p>two</p>
</div>

我們用.nth p:nth-child(2){}這樣我們就選擇了第一個p元素.

:nth-child(2n)選擇所有的偶數，或者使用（even）

:nth-child(odd)選擇所有的奇數

2n-1.或者2n+1都可以選擇奇數，不管如何加減計算方式都是一樣的。

:nth-last-child() 從最後開始這樣

:nth-of-type()

:nth-last-of-type()

這兩個選擇器是和:nth-child()類似，不過它們的選擇順序不一樣。.nth p:nth-of-type()是先選擇相同的p標籤然後進行排序

比如：.nth p:nth-of-type(2)和 .nth p:nth-child(2)是不一樣的，第一個選擇的是整個標籤的第二個元素，第二個是選擇p標籤列表中的第二個元素，也就是整個標籤中的第三個元素。

:first-of-type 等同於 :nth-of-type(1)

:last-of-type

這裏的CSS選擇器不同於數組都是從1開始的，-1和0都沒有意義

:only-child 當只有一個p標籤的時候樣式生效 .nth p:only-child{}

:only-of-type 只有一個類型

:empty 元素沒有任何顯示，包括空白符也沒有

:not 否定選擇器 .nth not(p){color:red}選擇所有不是p標籤的元素

老的選擇器

:first-line :first-letter :before :after

新的瀏覽器是用::來進行標籤僞類書寫，但爲了兼容一些老的瀏覽器我們往往使用:來進行書寫規範

樣式書寫

頭部的媒體查詢

@media only screen and (max-width: 50em) {

    header .main .brand {
        float: none;
        display: block;
        padding: 0;
        margin: 1.5rem auto 0.5rem;
        text-align: center;
    }

    header .main ul {
        text-align: center;
    }

    header .main ul li {
        border: none;
    }

    header .main ul li a {
        padding: 0 1.5rem;
    }
}

@media only screen and (max-width: 30em) {

    header .main ul li {
        line-height: 3rem;
    }

    header .main ul li:first-child {
        display: none;
    }

    header .main ul li a {
        font-weight: normal;
        padding: 0 0.5rem;
    }
}

交易信息媒體查詢

@media only screen and (max-width: 50em) {

    .trans-data {
        padding: 1rem 0.5rem;
    }

    .trans-data span {
        font-size: 1.2rem;
    }

    .trans-data span.trans-money {
        font-size: 1.6rem;
        margin: 0;
        padding: 0;
        letter-spacing: inherit;
        box-shadow: none;
        background: transparent;
    }

    .trans-report a {
        font-size: 1.2rem;
    }
}

@media only screen and (max-width: 30em) {

    .transaction {
        padding: 0.5rem 0;
    }

    .trans-data, .trans-report {
        float: none;
        text-align: center;
    }

    .trans-data, .trans-report a {
        padding: 0;
    }
}

平臺公告媒體查詢

@media only screen and (min-width: 30.0625em) and (max-width: 50em) {

    .feature .item h3,
    .feature .item p {
        display: block;
        /*在這裏吧display設置成block是因爲block的獨佔一行的特性*/
        width: 100%;
        font-size: 2.6rem;
        text-align: center;
    }

    .feature .item p {
        font-size: 1.2rem;
    }
}

@media only screen and (max-width: 30em) {

    .feature {
        width: 96%;
        margin: 1rem auto;
    }

    .feature .item {
        display: block;
        width: auto;
    }

    .feature .item + .item {
        margin: 1rem 0 0;
    }
}

6 如何實現響應式廣告及響應式圖片

6-1響應式廣告

其實我們不用每一個組件都自己創建，反而我們可以去用別人已經打包好的組件，其中的許多問題我們也可以避免。

一個好的滾動廣告組件

支持不同的圖片數量

支持響應式佈局

具有良好的兼容性

如何選擇組件

使用人數

是否開源

文檔是否齊全

活躍性

小巧夠用的組件（輕量級）

我們這裏採用的第三方組件是：http://owlcarousel2.github.io/OwlCarousel2/

在js/vendor下添加owlcarousel2的庫文件夾和需要的依賴庫jquery，在index中引入文件

JS：其中創建了一個main.js來引用方法和控制一些自配項

<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/owl.carousel.2.1.0/owl.carousel.min.js"></script>
<script src="js/main.js"></script>

CSS：引入主樣式和主題樣式

<link rel="stylesheet" href="js/vendor/owl.carousel.2.1.0/assets/owl.carousel.min.css">
<link rel="stylesheet" href="js/vendor/owl.carousel.2.1.0/assets/owl.theme.default.min.css">

main.js的滾動組件方法引用：

$(document).ready(function () {
    $(".owl-carousel").owlCarousel({



    });
});

初步的廣告結構：

<div class="ad">
    <div class="owl-carousel owl-theme">
        <div class="item">
            <img sec="img/ad001.png">
        </div>
        <div class="item">
            <img sec="img/ad002.png">
        </div>
        <div class="item">
            <img sec="img/ad003.png">
        </div>
    </div>
</div>

在這裏我們需要控制一下JS的方法，我們可以添加組件自帶的配置項來控制。我們在main.js

文件裏在 $(".owl-carousel").owlCarousel方法中添加

$(document).ready(function () {
    $(".owl-carousel").owlCarousel({
        items: 1,
        loop: true,
        autoplay: true,
        autoplayTimeout: 3000,
        autoplayHoverPause: true
    });
});

autoplayTimeout爲自動滾動的時間，autoplayHoverPause爲當鼠標浮動其上時停止滾動

如果有需要可以去看官方的文檔，裏面有關於配置項的詳細說明，設置完畢變成了這樣。

6-2 響應式圖片

當在小屏幕時我們的圖片不管是寬度還是分辨率都很顯示很清晰，但當我們移動在大屏幕下分辨率就會很糟糕，一來是顯得很大，而來是顯得很模糊，所以我們就有了響應式圖片的需要。

響應式圖片應具有以下兩種特性：

圖片的排版和佈局

根據設備大小加載不同的圖片

如何實現響應式圖片

JS或服務器端

srcset

srcset和sizes

picture

svg

JS或服務器端的的實現方法（命令式）：

<script>
	$(document).ready(function() {
		
		function makeImageResponsive() {
			var width = $(window).width();
			var img = $('.content img');
			if(width <= 480) {
				img.attr('src','img/480.png')
			} else if(width <= 800){
				img.attr('src', 'img/800.png');
			} else{
				img.attr('src', 'img/1600.png');
			}
		}
	
		$(window).on('resize load', makeImageResponsive);
	})
</script>

srcset 標籤（申明式）：

<div class="contetn">
	<img class="images" src="img/480.png"
	 srcset="img/480.png 480w, img/800.png 800w,img/1600.png 1600w">
</div>

我們不用去了解，具體瀏覽器如何選擇圖片，我們知道這個方法就可以了。

sizes（sizes 解決 srcset坑）

但是當圖片爲width：50%，圖片還沒有到800時圖片就變換成了800就顯得有些問題，所以我們需要sizes來輔助使用

如果我們不去設置，那麼sizes自動爲 sezes=“100vw” vw爲視口寬度，100vw代表圖片的尺寸百分之百的等於視口的寬度

設置時我們會預估一個視口和圖片的比例，比如這裏我們預估 sizes=“50vw”那麼我們顯示的就是正常的。

我們也可以適應的用媒體查詢在什麼樣的寬度下，自動更改圖片。

<div class="contetn">
	<img class="images" src="img/480.png"
	 srcset="img/480.png 480w, img/800.png 800w,img/1600.png 1600w"
         sizes="(min-width:800px)" 800px, 100vw">
</div>

語句爲：當圖片最小爲800px時，顯示800px的圖片。

在這裏我們用了一個固定的值，但有時我們會加上邊距和一些其他的東西我們就需要去動態的計算。

<div class="contetn">
	<img class="images" src="img/480.png"
	 srcset="img/480.png 480w, img/800.png 800w,img/1600.png 1600w"
         sizes="(min-width:800px)" calc(100vw - 30em), 100vw">
</div>

在calc括弧的減號左右要各加上一個空格不然不會生效。

picture標籤

通過picture我們可以選擇媒體查詢和設置多種情況下的圖片的具體設置，也可以選擇不同的圖片格式下的高級顯示

<picture>
    
    <source media="max-width:36em"
        srcset="img/tiananmen-s.jpg 768w">
        <!-- 橫版的圖片設置 -->
    <source media="(orientation: landscape)"
        srcset="img/tiananmen-s.jpg 768w">
    <source  
        srcset="img/tiananmen.jpg 1800w">
        <!-- 針對不同版本的圖片的設置 -->
    <source type="image/svg+xml" srcset="logo.svg 480w, logo.svg 800w,logo.svg 1600w">
    <source type="image/webp" srcset="logo.webp 480w, logo-m.webp 800w,logo-l.webp 1600w">

</picture>

<picture>語法

由上面的示例代碼可知，在沒有引入js和第三方庫，CSS中沒有包含media queries的情況下，<picture>元素可以實現只用HTML來聲明響應式圖片；

<source>元素

<picture>標籤它本身沒有屬性。神奇的地方是<picture>被用來當做<source>的容器。
<source>元素，是用來加載多媒體的比如視頻和音頻，已經被更新用到圖片的加載並且一些新的屬性已經被添加：

srcset (必需)

接受單一的圖片文件路徑(如：srcset=”img/minpic.png”).
或者是逗號分隔的用像素密度描述的圖片路徑(如：srcset=”img/minpic.png,img/minpic_retina.png 2x”),1x 的描述是默認不使用的。

media (可選)

接受任何驗證的media query,你可以看到在CSS @media選擇器(如：media=”(min-width: 320px)”).
在之前的<picture>語法的例子裏已經用到了。

sizes（可選）

接收單一的寬度描述(如：sizes=”100vw”)或者單一的media query寬度描述(如：sizes=”(min-width: 320px) 100vw”).

或者逗號分隔的media query對寬度的描述(如：sizes=”(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw - 100px)”) 最後的一個被當做默認的。

type(可選)

接受支持的MIME類型(如: type=”image/webp” or type=”image/vnd.ms-photo”)

瀏覽器會根據這些提示和屬性來加載確切的圖片資源。根據標籤的列表順序。瀏覽器會使用第一個合適的<source>元素並忽略掉後面的<source>標籤。

添加最後的<img>元素

<img>元素在<picture>內部用來當瀏覽器不支持時或者沒有源標籤匹配時的顯示。在<picture>內使用<img>標籤是必須得，如果你忘記了，將不會有圖片顯示出來。

用<img>來聲明默認的圖片顯示。將<img>標籤放到<picture>內的最後，瀏覽器在找到<img>標籤之前會忽略<source>的聲明。這個圖片標籤也需要你寫上它的alt屬性。

svg

可縮放矢量圖形是基於可擴展標記語言（標準通用標記語言的子集），用於描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開放標準。不管如何的拉扯與變形都是不會失真，但很難顯示出豐富的色彩。

我們可以有兩種方法繪製svg圖片：

利用svg繪製軟件
利用在線的網站繪製 http://method.ac/ https://icomoon.io/

各大的瀏覽器都支持svg的格式

響應式廣告具體實現

談了那麼多，我們具體的來實現

我們利用picture和source，爲了提高兼容性我們使用polyfill，也就國人常稱的膩子，它可以解決我們的一些兼容問題

polyfill是一個腳本，對於響應式圖片polyfill是一個picturefill庫，我們只需要下載引用它，然後就可以儘管使用新特性

這就是我們組件的最終代碼實現

	<div class="ad">
        <div class="owl-carousel owl-theme">
            <div class="item">
                <picture>
                    <source srcset="img/ad001-l.png" media="(min-width:50em)">
                    <source srcset="img/ad001-m.png" media="(min-width:30em)">
                    <img src="img/ad001.png" alt="2015年度報告">
                </picture>
            </div>
            <div class="item">
                <picture>
                    <source srcset="img/ad002-l.png" media="(min-width: 50em)">
                    <source srcset="img/ad002-m.png" media="(min-width: 30em)">
                    <img srcset="img/ad002.png" alt="新年紅包">
                </picture>
            </div>
            <div class="item">
                <picture>
                    <source srcset="img/ad003-l.png" media="(min-width: 50em)">
                    <source srcset="img/ad003-m.png" media="(min-width: 30em)">
                    <img srcset="img/ad003.png" alt="新手祕籍">
                </picture>
            </div>
        </div>
    </div>

在png，svg等圖片太大的情況下，我們可以使用壓縮對圖片進行處理，提升網頁的加載速度。

作業：

實現一：利用srcset

<img src="img/Star.png" alt="Star"
	srcset="img/Star.png 345w, img/[email protected] 690w, img/[email protected] 1035w">

實現二：利用picture

<picture>
	<source  srcset="img/[email protected]" media="(min-width:1000px)">
	<source  srcset="img/[email protected]" media="(min-width:500px)">
	<img srcset="img/Star.png" alt="Star">
</picture>

7 node.js簡介

Node.js是一個基於Chrome V8引擎的JavacSript運行環境。Node.js使用了一個事件驅動，非阻塞式I/O的模型，使其輕量又高效。Node.js的包管理器npm，是全球最大的開源庫生態系統。

在官網進行安裝，安裝成功後打開命令行輸入node -v顯示以下輸出爲成功安裝：


C:\WINDOWS\system32>node -v
v10.7.0

Node.js是獨立於瀏覽器端的，所以我們可以獨立於瀏覽器端來運行js文件

console.log("Hello Node.js!");

輸入node test,js運行打印Hello Node.js在服務器端執行

在Node.js中異步的讀取文件

var fs= require("fs");
fs.readFile("readme.txt", "utf-8", function(erro,data){
    if(erro){
      console.error(err);
       }else {
       console.log(data);
        }
})

在Node.js中同步的讀取文件

var fs= require('fs');
var data= fs.readFileSync('readme.txt','utf-8')
console.log(data);

npm的使用

下載支持包的命令：

npm install jquery

下載的包默認都存儲到node_modules文件夾裏

Node.js是區分大小寫的，也就是說jquery和jQuery是不一樣的兩個包，但是又因爲存放在一個文件夾下，所以操作系統就會認爲是一個文件夾，就會出現錯誤，需要注意。

Package.json初步理解

1. npm安裝package.json時直接轉到當前項目目錄下用命令npm install 或npm install --save-dev安裝即可，自動將package.json中的模塊安裝到node-modules文件夾下

2. package.json 中添加中文註釋會編譯出錯

3. 每個項目的根目錄下面，一般都有一個package.json文件，定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數據）。npm install 命令根據這個配置文件，自動下載所需的模塊，也就是配置項目所需的運行和開發環境。

4. package.json文件可以手工編寫，也可以使用npm init命令自動生成。

管理理本地安裝 npm 包的最好方式就是創建 package.json 文件

使用npm創建package.json

Package.json的內容

{
    "name": "my-weex-demo",
    "version": "1.0.0",
    "description": "a weex project",
    "main": "index.js",
    "scripts": {
        "build": "weex-builder src dist",
        "build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color",
        "dev": "weex-builder src dist -w",
        "serve": "serve -p 8080"
    },
    "keywords": [
        "weex"
    ],
    "author": "[email protected]",
    "license": "MIT",
    "devDependencies": {
//開發環境所依賴的包
        "babel-core": "^6.14.0",
        "babel-loader": "^6.2.5",
        "babel-preset-es2015": "^6.18.0",
        "vue-loader": "^10.0.2",
        "eslint": "^3.5.0",
        "serve": "^1.4.0",
        "webpack": "^1.13.2",
        "weex-loader": "^0.3.3",
        "weex-builder": "^0.2.6"
    },
    "dependencies": {
//生產環境所依賴的包
        "weex-html5": "^0.3.2",
        "weex-components": "*"
    }
}

其中的 ^ 代表大於後面的版本號，並且大版本要一致並且還有其他的前綴，

“~6.14.0” ~表示前兩位需要一致，後一位可以不同，還可以寫<=.=> > <等，也不可以什麼都不寫代表精確匹配。

使用package.json來安裝依賴包：

node包的安裝分兩種：本地安裝、全局安裝。兩者的區別如下，後面會通過簡單例子說明

本地安裝：package會被下載到當前所在目錄，也只能在當前目錄下使用。
全局安裝：package會被下載到到特定的系統目錄下，安裝的package能夠在所有目錄下使用。

npm i //直接會根據文件安裝依賴包，也可以加上後綴，安上特定的包比如 --dev安裝開發時的包
npm install -g -express  -g爲全局安裝

更新Package.json

npm install gulp --save         //生產環境依賴包更新
nom install gulp --save-dev     //開發環境依賴包更新

卸載依賴包：

卸載依賴包與安裝依賴包的步驟都相同

npm uninstall gulp 
npm uninstall gulp --save
npm uninstall gulp --save-dev

幫助文檔：npm install -h

nodejs 啓動 server 服務

在上述我們都是用本地的服務來調試代碼，不能用其他的設備來調試，所以我們要用其他的設備就可以用基於Node.js的應用來進行服務器端的調試

我們使用Http-server來進行配置 https://www.npmjs.com/package/http-server

安裝

npm install http-server -g

使用

 http-server [path] [options]

//訪問: http://localhost:8080 or http://127.0.0.1:8080

具體的其他設置請訪問上述給出鏈接，其實我覺得還不如下一個wamp集成環境直接localhost運行，還不用這麼麻煩。

所向披靡的響應式開發

前期準備

1.1 響應式概念

1.2 響應式技術構成

1.3 響應式網站的優點

1.4 響應式網站的缺點

1.5 瀏覽器兼容

1.6 媒體查詢

1.7 viewport視口

1.8 響應式網站設計實踐原則

2 組織項目文件目錄結構

2.1 基本目錄結構

2.2 常規文件

2.3 非常規文件

3

4

5 如何實現移動端的樣式

5-1 響應式佈局調試工具

5-2 如何選擇媒體查詢單位

6 如何實現響應式廣告及響應式圖片

7 node.js簡介

關於接口協議，你必須要知道這些！

一鍵自動化博客發佈工具,用過的人都說好(頭條篇)

美團一面：項目中有 10000 個 if else 如何優化？想了半天，被問懵了！

京東面試：如何進行JVM調優？

01 穩定性（一）如何應對事故並做好覆盤？

線程池那些坑爹的參數-核心線程數&最大線程數&工作隊列

Stream流常用方法總結

手機和電腦咖啡網站——響應式網站星巴克咖啡模板

Vue核心技術 Vue+Vue-Router+Vuex+SSR實戰精講

西餐網站模板手機電腦皆可的響應式網站

Vue2.5開發去哪網App 從零基礎到入門到項目實戰

ES6 + 開發電商網站的賬號體系 JS SDk

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

linux以太網驅動總結