2. 程式人生 > >所向披靡的響應式開發

所向披靡的響應式開發

阿新 • • 發佈：2018-11-09

前期準備

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 瀏覽器相容

  1. PC端國內主流瀏覽器：
  • Chrome瀏覽器
  • IE瀏覽器 8+ / Edge瀏覽器
  • Firefox瀏覽器
  • Safari瀏覽器
  1. 移動端國內主流瀏覽器：
  • 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 響應式網站設計實踐原則

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

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

  1. PC端和手機端的優先原則
  • 要根據網站的需求和性質來選擇，主要面向手機端使用者的網站要選擇手機端優先
  • 根據團隊或個人的習慣來選擇，沒有對錯，只有適合
  1. 瀏覽器適配原則（優先chrome上除錯）
  • PC端：Chrome、Firefox、IE8+、Safari
  • 手機端：Google Browas、Safari、QQ瀏覽器、UC瀏覽器、360瀏覽器
  1. 內容顯示原則
  • 不管裝置大小，內容可根據頁面排版做部分修改，選擇顯示或隱藏
  1. 斷點選擇原則

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

  • 0-480 小螢幕

481-800 中螢幕

801-1400 大螢幕

1400+ 巨螢幕

2 組織專案檔案目錄結構

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

  • css/*.css
  • jquery.js->jquery.min.js

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

2.1 基本目錄結構

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

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

    1.doc //文件目錄

  1. src //檔案資原始檔夾
  • css //樣式表文件夾
  • js //Javascript資料夾
  • img //圖片資料夾
  • tpl //模板資料夾
  • swf //Flash檔案
  • less //動態樣式表，或者sass
  • index.html
  • login.html

2.2 常規檔案

  1. CSS
  • main.css //通用樣式檔案
  • normalize.css //使標準化CSS樣式
  • page.css //獨立頁面對應的CSS檔案
  1. JS
  • main.js //通用JS檔案
  • vendor //網站引用的庫資料夾
  • vendor/jquery.min.js //jquery壓縮版js檔案

2.3 非常規檔案

     1.404.html

  • 錯誤檔案，在該頁面上進行錯誤的提醒，提高友好度
  1. robots.txt
  • 路徑：/src
  • 作用：用來告訴搜尋引擎爬蟲，該網站可訪問和不可訪問的頁面路徑，會被爬蟲第一時間訪問，並依據該檔案爬取網站頁面
  1. favicon.ico
  • 路徑：/src
  • 作用：用來被引用為網站縮略的圖示，可利用位元蟲等線上工具轉換。
  1. humans.txt
  • 路徑：/src
  • 作用：用來說明參加網站建立人員的資訊，如團隊成員、感謝和站點的技術資訊。
  1. .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的不同的計算單位，所以在選擇什麼單位做斷點時，就顯得尤其的重要。

  1. 針對不同寬度下頁面顯示大體相同，但功能上不同的頁面我們用絕對值px來設定。
  2. 針對不同寬度下頁面顯示不同，但功能大體相同的頁面我們用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;
    }
}

最新公告媒體查詢

@media only screen and (max-width: 30em) {
    .notice {
        width: 96%;
        margin: 1rem auto;
        font-size: 1.2rem;
    }

    .notice a {
        margin-left: 1rem;
    }

    .notice a span {
        display: none;
    }
}

產品板塊媒體查詢

@media only screen and (max-width: 50em) {
    .product h2 {
        float: none;
        width: 100%;
        margin-top: 2rem;
        font-size: 2.2rem;
    }

    .product h2 em:first-child {
        margin-top: 0;
    }

    .product h2 em {
        display: inline;
        font-size: 1.2rem;
    }

    .product .product-content {
        float: none;
        width: 100%;
    }

    .product .product-content .item h3 {
        margin-bottom: 0
    }

    .product .product-content .item h3 em {
        font-size: 2.4rem;
    }

    .product .product-content .item .info {
        padding: 1rem 1rem 0;
        font-size: 1.2rem;
    }

    .product .product-content .item .info p span {
        font-size: 2rem;
    }

    .product .product-content .item .buy a {
        margin: 0.5rem auto;
    }
}

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

    .product {
        width: 96%;
    }

    .product h2 em:first-child:before {
        content: " ";
        display: table;
    }

    .product .product-content .item h3 em {
        font-size: 2rem;
        margin-right: 0;
    }

    .product .product-content .item .info {
        float: right;
        width: 70%;
        padding: 1rem 0;
        border: none;
    }

    .product .product-content .item .info p span {
        font-size: 1.8rem;
    }

    .product .product-content .item .buy {
        clear: both;
        float: none;
        width: 100%;
        padding: 1rem 0 2rem;
    }

    .product .product-content .item .buy a {
        margin-top: 0;
        max-width: 26rem;
    }
}

底部導航的媒體查詢

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

    .footer-content .brand {
        display: none;
    }

    .footer-content ul {
        width: 20%;
    }

    .footer-content ul li {
        font-size: 1.2rem;
        line-height: 2rem;
    }

    .footer-content ul li.title {
        font-size: 1.4rem;
        line-height: 2.5rem;
    }
}

@media only screen and (max-width: 30em) {
    .footer-content {
        width: 98%;
    }

    .footer-content ul li.title {
        font-size: 1.2rem;
        line-height: 2rem;
    }
}

在這裡我們設定了底部導航列表的媒體查詢，但是在一些極小的螢幕寬度下，這樣顯示就顯得尤其的不好看，所以我們列下了幾種方法：

  1. 隱藏一些不重要的表格
  2. 把橫向的表格換成縱向的表格（行列轉制）
  3. 把表格的每一項作為列表來表現

列印樣式：在一些情況下，我們需要列印網頁的頁面，這樣一些底色比較淺的背景就會不好看，所以我們會用一個通用的樣式來表現。

作業：

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 響應式圖片

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

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

  1. 圖片的排版和佈局
  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的格式

響應式廣告具體實現

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

我們利用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

 

8 如何處理相容性

解決相容性問題是每一個前端人員的基本功，但相容性問題又是一個很大的方面，所以我們來列出解決相容性的一些方法。

  1. 確定要相容瀏覽器
  2. 用市面最新瀏覽器版本的除錯-自帶的開發者工具
  3. 如果有特殊需求要求對IE瀏覽器進行相容，那麼要單獨的用原生的IE進行除錯

桌面端如何除錯：我們可以就以上的方法利用開發者工具進行模擬除錯，也可以利用虛擬機器進行除錯，還可以利用線上的埠進行真機除錯

移動端如何除錯：相對於PC端，移動端分兩個方面。安卓和蘋果，又因為安卓使用廠家多，且每一家都有不同改進的安卓瀏覽器，所以會出現一些意想不到的相容性問題，

  • 真實測試：利用市面上熱度比較高的機型進行真機的除錯
  • 雲測試：利用一些廠家會，把一些真機聚合起來放在雲伺服器，來人工的進行測試，然後生成一個測試報告，來告訴你的相容問題
  • 安卓虛擬機器：下載一些常見的安卓虛擬機器，或利用Genymotion模擬器來除錯（可能需要翻牆）

對於蘋果，MAC有自帶的虛擬機器或除錯工具，也可以利用朋友的手機來真機除錯

處理相容性的方法：

css hack

CSS hack由於不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時相容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。

簡單的說，CSS hack的目的就是使你的CSS程式碼相容不同的瀏覽器。當然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定製編寫不同的CSS效果。

BROWSERHACKShttp://browserhacks.com  一個製作hack的工具

Polyfill     膩子，抹平一些不相容的問題

shiv        老版本瀏覽器不支援新的html標籤和特性，但我們又有這方面的需求，我們就可以使用shiv這個庫，來儘量的支援老版本對新標籤的支援

Respond     讓老版本的瀏覽器儘量支援一些媒體查詢特性的庫

Modernizr      自動的檢查相容性，並進行更改，這是一種防禦性的程式設計

.svg logo{
        background-image:url(logo.svg);
     }
.no-svg logo{
        background-image:url(logo.png);
    }

不過首先我們應該先在Can I use？網站上檢視瀏覽器的相容，然後再考慮是否有必要使用這些特性

如何在多個裝置上進行除錯：

我們除錯檔案，大概的流程是更改，重新整理，如果一旦有很多裝置那麼會浪費我大把的時間，所以有了一個工具可以是我們同步的更改所有的頁面瀏覽器，進行除錯。

工具：www.browsersync.com
安裝：npm install -g browser-sync

browser-sync start--server "src" -files "src" 後面的兩個引數分別是檔案的放置位置和更改檔案的同步重新整理，我們選擇了src全部檔案更改。只要有一個檔案更改了，就重新整理裝置，同步裝置修改，減少時間。

作業：使用CSS hacks 實現只有在Firefox瀏覽器下，且Firefox版本=》2時，box背景為紅

body:last-child .box, x:-moz-any-link { 
      background:red;  
       }

9 如何打包釋出

我們在釋出之前可以先對程式碼進行優化，以減少載入時間，為使用者減少一些頻寬。

  1. 壓縮
  2. 合併
  3. 增加版本號

可以使用線上的網站進行壓縮https://www.jb51.net/tools/cssyasuo.shtml，但更多是用工程化工具來進行構建釋出檔案

  • Grunt          自動化構建工具
  • Gulp           自動化構建工具
  • webpack    靜態資源打包工具

如何使用以上的工具，請自行去官網檢視中文文件，自動化工具建議使用gulp

10 課程擴充套件---選擇一個趁手的IDE

11 課程擴充套件---聊聊原型設計和切圖

12 課程大作業

設計圖

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相關推薦

所向披靡的響應式開發

前期準備 1.1 響應式概念 響應式網站是一個多項技術構成的設計理念，實現利用一套程式碼，實現網站對不同解析度，不同尺寸，不同型別的瀏覽終端自適應適配，並且在不同型別的終端上顯示不同風格的設計。 1.2 響應式技術構成 flexible grid layout

所向披靡的響應式開發——如何一招制勝？前端工程師必會技能

之前也接觸過響應式開發，大概就是下載一個響應式網站模板，然後替換圖片，哈哈！ 確實沒有系統的學習和了解過響應式開發。最近工作還蠻清閒，找出壓箱底很久的響應式開發教程，大概一月前看過一些，然後也忘得差不多la，從頭開始學習唄! 這套課程還是很基礎的，但越是基礎的東西，越

移動端使用rem同時適應安卓ios手機原理解析，移動端響應式開發

size screen bsp 應用 屏幕 來看 比例 忽略 基礎 rem單位大家可能已經很熟悉，rem是隨著html的字體大小來顯示代表寬度的方法，我們怎樣進行移動端響應式開發呢 瀏覽器默認的字體大小為16px 及1rem 等於 16px 如果我們想要使1rem等於 12

用rem來做響應式開發(轉)

獲取 1.4 字體大小 計算 solid 通過 分別是 什麽 介紹 由於最近在做公司移動項目的重構，因為要實現響應式的開發，所以大量使用到了rem的單位，覺得這個單位有點意思。但是現在貌似用他的人很少。上一篇文章我分享了淘寶寫的一篇rem的介紹，介紹的非常全面，但是

前端響應式開發

兼容問題 max 優點 瀏覽器 移動終端 大小 位圖 query 網頁 最近在工作中遇到一些讓人頭疼的問題——多媒體查詢，也就是大家所說的響應式布局（多終端適配）。在實際的開發過程中，響應式的設計使得多終端的適配變得非常方便，響應式展現的方式，更有一種組裝變形金剛的感覺，但

rem--來做響應式開發

外邊距 響應 單位 com 度量 family ont 換算 解釋 官方解釋：font size of the root element 就是根據跟元素來設置字體的大小，這裏的根元素指的是<html></html> rem作為度量單位，無疑是寫響應式

前端進階: 響應式開發與常用框架 [MP4]

進階 第四章 解壓 ebs 清除 標簽 sets 上進 html5 ├─第一章 前期準備│ │ └─第一章 前期準備│ │ │ │ 響應式1-1│ │ 響應式1-2│ │ 響應式1-3│

springboot 使用webflux響應式開發教程（二）

public src service stand jet ech mediatype event frame 本篇是對springboot 使用webflux響應式開發教程(一)的進一步學習。 分三個部分： 數據庫操作webservicewebsocket 創建項目，ar

響應式開發(1)

1. 響應式網際網路設計的三大技術成分： 流動網路（彈性網路佈局）、彈性圖片、媒體查詢 2. 如何分析設計圖： 分析結構和佈局。 3. 設局實踐原則：漸進增強，優雅降級。p2p 最好先設計大螢幕，再設計小螢幕。 這裡僅作參考，具體見UI 4. 三個視口  理想視口：佈局視口在可視

響應式開發——媒體查詢斷點設定例項

 關於媒體查詢中斷點的設定，有兩個點需要格外注意！ 如何選擇斷點 一般情況下，建議根據螢幕尺寸進行斷點分割，不要針對特定裝置分割。 根據設計稿選擇合適的斷點。 動態斷點設定 在實際應用過程中，使用者會根據需要改變瀏覽器預設文字大小 ，若讓斷點能夠隨著文字

前端進階響應式開發與常用框架

├─第一章 前期準備 │  │  └─第一章 前期準備 │  │           │  │          響應式1-1 │  │          響應式1-2 │  │          響應式1-3 │  │          響應式網站優點1-4 │  │   

RxAndroid響應式開發

Rx含義是響應式程式設計，其本質就是觀察者模式，以觀察者（Observer）和訂閱者（Subscriber）為基礎的非同步響應方式。 　　 Observables發出一系列事件，Subscribers處理這些事件。這裡的事件可以是任何你感興趣的東西（觸控事件，非同步介面呼叫返回的資料等）

響應式開發中的rem

用rem做為響應式開發中的單位（包括字型，寬度，高度），頁面的顯示可以自適應裝置寬高。比如我們的設計稿是根據iphone6（375 X 667）的尺寸設計的，我們用rem為單位，就按照inphone6的尺寸做好頁面就ok了，頁面在其他裝置裡就可以響應顯示。 1.設定rem;

用rem來做響應式開發

 由於最近在做公司移動專案的重構，因為要實現響應式的開發，所以大量使用到了rem的單位，覺得這個單位有點意思。但是現在貌似用他的人很少。上一篇文章我分享了淘寶寫的一篇rem的介紹，介紹的非常全面，但是他們似乎都把關注點放在了字型單位上了，其實rem不只是能應用到字型上面，

移動端響應式開發rem字型與頁面百分比設定

@media screen and (min-width:240px){body{font-size:10px}} @media screen and (min-width:320px){body{font-size:12px}} @media screen a

rem手機端響應式開發設定

@media screen and (min-width: 320px) {    html {        /* iPhone5的320px尺寸作為12px基準，以後所有型號按此比例縮放 */        font-size: calc(75%  +  (100vw -

Web前端響應式開發新寵兒 rem

        在Web開發中使用什麼單位來定義頁面的字型大小，至今天為止都還在激烈的爭論著，有人說px好，有人說em的優點多，,也有人說百分比方便，但說到底，都是各有利弊，但在開發中又不得不用。那麼有什麼好的解決方案呢，說到這就要進入本文的正題 CSS3中引入的單位rem

響應式開發架構

2014年我開始接觸響應式開發，現在我對自己所掌握的相關知識做個總結，搭建一個響應式開發的例子，這裡引用的是layui框架，圖示引用fontawesome. 1.建一個專案目錄：responsiveMode,我這裡用的開發工具是HBuilder，當然也可以自己手動建立專案。

Web前端面試指導(四十四)：什麼是響應式開發？

題目點評 響應式開發是前端開發工作比較常見的工作內容，隨著移動端的發展，網頁設計必須考慮到移動端的設計，同一個網站為了相容PC端和移動端顯示，響應式開發是前端開發人員必備的技術，所以響應式開發的技術必須掌握。 什麼是響應式 顧名思義，同一個網站相容不同的大小的裝置。如PC端

淺談響應式開發與自適應佈局！

談到響應式，大家不自覺的會想到什麼？ 首先映入眼簾的便是隨著網頁寬度變化而網頁內容呈現出不同內容的效果！那麼由來是什麼呢？ 2009時間段，網際網路發生了一件天大的事情！ 那就是在北京時間2009年6月9日凌晨2：48分，在美國舊金山MosconeWest