開發移動端頁面

1、像素 - 什麼是像素

在web前端開發領域，像素有如下兩層含義：

1. 設備像素：設備屏幕的物理像素，對於任何設備來說物理像素的數量是固定的。

2. CSS像素：這是一個抽象的像素概念，它是爲web開發者創造的。

總結

1. web前端領域，像素分爲設備像素和CSS像素

2. 一個CSS像素的大小是可變的，好比用後縮放頁面的時候，實際上就是在縮小或放大CSS像素，而設備像素不管大小仍是數量都是不變的。

2、移動端的三個視口

佈局視口：移動端CSS佈局的依據視口，即CSS佈局會根據佈局視口來計算。

能夠經過如下JavaScript代碼獲取佈局視口的寬度和高度：

1. document.documentElement.clientWidth

2. document.documentElement.clientHeight

第二個視口：視覺視口

能看到的部分就是視覺視口

第三個視口：理想視口

理想視口，這是咱們最須要關注的視口，如今咱們來回顧一下咱們知道了哪些視口，有兩個，分別是：佈局視口，視覺視口。

手機瀏覽器要把佈局視口設爲理想視口：

1. <meta name="viewport" content="width=device-width" />

上面那段代碼告訴瀏覽器：將佈局視口的寬度設爲理想視口。

移動端的三個視口介紹完了，讓咱們總結一下：

1. 在PC端，佈局視口就是瀏覽器窗口

2. 在移動端，視口被分爲兩個：佈局視口、視覺視口。

3. 移動端還有一個理想視口，它是佈局視口的理想尺寸，即理想的佈局視口。（注：理想視口的尺寸因設備和瀏覽器的不一樣而不一樣，但這對於咱們來講無所謂）

4. 能夠將佈局視口的寬度設爲理想視口

3、設備像素比(DPR)

1. 設備像素比(DPR) = 設備像素個數 / 理想視口CSS像素個數(device-width)

1. iPhone5的理想視口是：320*568 <==> device-width = 320，device-height = 568

2. iPhone5的設備像素比：2

設備像素比(DPR) = 設備像素個數 / 理想視口CSS像素個數(device-width)

縮放：縮小放大的是 CSS像素。

meta視口標籤存在的主要目的是爲了讓佈局視口和理想視口的寬度匹配

共有5個：

1. width：設置佈局視口的寬

2. init-scale：設置頁面的初始縮放程度

3. minimum-scale：設置了頁面最小縮放程度

4. maximum-scale：設置了頁面最大縮放程度

5. user-scalable：是否容許用戶對頁面進行縮放操做

媒體查詢是響應式設計的基礎，他有如下三點做用：

1. 檢測媒體的類型，好比 screen，tv等

2. 檢測佈局視口的特性，好比視口的寬高分辨率等

3. 特性相關查詢，好比檢測瀏覽器是否支持某某特性（這一點不討論，由於它被目前瀏覽器支持的功能對於web開發來說很無用）

css中使用媒體查詢的語法：

     @media 媒體類型 and (視口特性閥值){   

          // 知足條件的css樣式代碼

     }

 

適應全部的設備，咱們應該用javascript代碼動態生成meta標籤：

         let scale = 1 / window.devicePixelRatio;

        document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

 

rem是相對尺寸單位，相對於html標籤字體大小的單位：

若是html的font-size = 18px;

那麼1rem = 18px，須要記住的是，rem是基於html標籤的字體大小的。

一、將佈局視口大小設爲設備像素尺寸：

 

var scale = 1 / window.devicePixelRatio;

document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

 

二、動態設置html字體大小：

 

      document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

 

三、將設計圖中的尺寸換算成rem

 

元素的rem尺寸 = 元素的psd稿測量的像素尺寸 / 動態設置的html標籤的font-size值