響應式

響應式網頁設計是什么？

定義：

響應式網頁設計就是讓網頁具備根據(jù)備設備應用css樣式的能力，這就是響應式網頁設計。

解釋：

• 響應式網頁設計：設想，計劃。設計就是把想法實現(xiàn)
• 網頁設計：按照一定的設計思路布局網頁內容。
• 傳統(tǒng)網頁設計都是針對pc端瀏覽器設計。
• 傳統(tǒng)網頁設計的弊端：不能根據(jù)備設備應用css樣式的能力，在移動互聯(lián)網時代。傳統(tǒng)網頁設計不適合小屏幕展示。響應式網頁設計應運而生。
• 響應式網頁設計是一種設計網頁的思想/方法
• 響應：指讓我們的網頁能夠自動查詢用戶的訪問設備，并根據(jù)查詢結果應用不同的CSS樣式。

實現(xiàn)響應式網頁設計的技術手段

第一種：通過CSS判斷用戶設備

1. 設置視口
2. 設置媒體查詢：使用Media Query判斷

第二種：通過js判斷用戶設備

1. 視口
2. 使用js判斷

實現(xiàn)響應式網頁設計的步驟

1. 設置視口

    <meta name="viewport" content="width=devise-width">

2. 設置媒體查詢

媒體查詢是什么？

• 媒體查詢是一種查詢用戶設備的技術

• 媒體查詢是由media屬性和media規(guī)則構成有以下三種用法，可以實現(xiàn)相同效果：

  • media屬性設置在<style>標簽上
  • media屬性設置在<link>標簽上
  • @media規(guī)則可以設置在樣式表里。

• 通過媒體查詢，我們可以查詢到用戶設備類型和設備特性。

• 常見設備類型

  • screen:屏幕設備
  • print:打印機
  • speech：閱讀器
  • handle：手持設備
  • all：所有設備

• 常見設備特性

  • width
  • height
  • orientation
  • hover
  • resolution
  • aspect-ratio

• 媒體查詢語法

  meida屬性

  <style media='查詢規(guī)則'>
  
  </style>
  

  media屬性

  <link href="print.css" media='查詢規(guī)則'>
  <link href="screen.css" media='查詢規(guī)則'>
  

  @media規(guī)則

  @media 查詢規(guī)則{
      /*這里寫代碼*/
  }
  

查詢規(guī)則

• 查詢規(guī)則由媒體類型+ 媒體特性表達式構成。
• 媒體類型和媒體特性表達式使用邏輯操作符鏈接操作符之間必須有空格
• 所有的媒體特性表達式必須用小括號括起來
• 不區(qū)分大小寫

示例

/*在橫向屏幕設備顯示紅色*/
/*在豎向屏幕設備顯示藍色*/
@media screen and (orientation:landscape){
    /*這里寫樣式代碼*/
}

案例：

非響應式網站：

• W3C
• 網易云音樂

響應式網站：(視口+媒體查詢+一個html+多套樣式)

• 極客公園
• 網易
• 北京政府網

響應式適配(視口+js判斷+多個html+一套樣式)

• 淘寶
• 京東

vieport是什么

定義；

viewport指移動端渲染網頁的區(qū)域、

解釋：

• view:是‘看’的意思

• Port是‘端口的意思’

• viewport：翻譯為‘視口’

• viewport是沒有大小的，viewport不等于網頁可見區(qū)域大小

• 視口可以通過meta標簽設置

設置viewport

可以通過meata標簽設置移動端視口的大小和縮放。他的語法是：

<meta name="viewport" content="寬度/高度 初始比例 最大比例 最小比例 是否縮放"

五個屬性值

width/height:設置視口的寬度或高度

示例：屬性值為數(shù)值，無單位。表示視口的寬度為375px

<meta name="viewport" content="width=375"

注意：如果不設置視口，那么iOS的視口默認為980px寬

示例：屬性值為device-width。表示把視口的寬度設置為設備可視區(qū)域寬

<meta name="viewport" content="width:device-width">

2.initial-scale：設置視口的初始比例

語法：

<meta name="viewport" content="width=device-width, initial-scale=1">

屬性值：0.1~10

默認值1

0.1-1：表示縮小

1-10：表示放大

復習

js的三個組成部分

• ECMAScript
• DOM:文檔對象模型
• BOM:瀏覽器對象模型

window.devicePixelRatio

定義：用于查詢設備像素比

devise：設備

pixel：像素

ratio：比例

devicePixelRatio：簡稱dpr

知識點

1. 什么是響應式網頁設計
2. 什么是響應式網頁
3. 物理像素是什么
4. 邏輯像素是什么
   1. 是信息
5. 像素比是什么（像素比=物理像素/邏輯像素）
6. 如何查詢像素比
7. 如何查詢屏幕的邏輯像素（邏輯像素 = 物理像素 / 像素比）
8. vieport是什么

響應式布局|適配布局|流式布局

響應式布局（RWD）：Respomsive Web Design

適配布局（AWD）：Adapt（適應的）Web Design

流式布局（LWD）：Liquid（液體）Web Design