開發移動端頁面

標籤：使用者   一個   條件   list   字型大小   init   att   通過   開發人員   

一、像素 - 什麼是像素

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

1. 裝置像素：裝置螢幕的物理像素，對於任何裝置來講物理像素的數量是固定的。

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

總結

1. web前端領域，像素分為裝置像素和CSS像素

2. 一個CSS像素的大小是可變的，比如用後縮放頁面的時候，實際上就是在縮小或放大CSS像素，而裝置像素無論大小還是數量都是不變的。

二、移動端的三個視口

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

可以通過以下JavaScript代碼擷取布局視口的寬度和高度：

1. document.documentElement.clientWidth

2. document.documentElement.clientHeight

第二個視口：視覺視口

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

第三個視口：理想視口

理想視口，這是我們最需要關注的視口，現在我們來回顧一下我們知道了哪些視口，有兩個，分別是：布局視口，視覺視口。

手機瀏覽器要把布局視口設為理想視口：

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

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

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

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

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

3. 移動端還有一個理想視口，它是布局視口的理想尺寸，即理想的布局視口。（註：理想視口的尺寸因裝置和瀏覽器的不同而不同，但這對於我們來說無所謂）

4. 可以將布局視口的寬度設為理想視口

三、裝置像素比(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標籤的字型大小的。

1、將布局視口大小設為裝置像素尺寸：

 

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‘);

 

2、動態設定html字型大小：

 

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

 

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

 

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

 

開發移動端頁面