移動web開發（一）基礎知識

移動端web開發（一）基礎知識

文章目錄

• 移動端web開發（一）基礎知識
• • • 一、移動端基礎
    • • 1.1 移動端調試方法
      • 1.2 視口
      • • 1.2.1 理想視口（ideal viewpoint）
        • 1.2.2 meta 視口标簽
        • 1.2.3 标準的viewport
    • 二、二倍圖
    • • 2.1 實體像素和實體像素比
      • 2.2 二倍圖
      • 2.3 背景縮放 background-size
    • 三、移動端主流開發方案
    • • 3.1 單獨制作移動端頁面（主流）
      • 3.2 響應式頁面相容移動端（其次）
    • 四、移動端技術解決方案
    • • 4.1 CSS初始化 normoalize.css
      • 4.2 CSS3盒子模型 box-sizing
      • • 4.2.1 特殊樣式
    • 五、 移動端常見布局
    • • 5.1 單獨制作移動端頁面（主流）
      • 5.1.1 流式布局（百分比布局/非固定像素布局）
      • 5.1.2 flex彈性布局
      • 5.1.3 less+rem+媒體查詢布局
      • 5.1.4 混合布局
      • 5.2 響應式頁面相容移動端（其次）

一、移動端基礎

1.1 移動端調試方法

• Chrome DevTools（谷歌浏覽器）的模拟手機調試
• 搭建本地web伺服器，手機和伺服器在一個區域網路内，通過手機通路伺服器
• 使用外網伺服器，直接ip或域名通路

1.2 視口

視口（viewpoint）即浏覽器顯示頁面内容的螢幕區域，視口可以分為布局視口、視覺視口和理想視口。

1.2.1 理想視口（ideal viewpoint）

• 為使網站在移動端有最理想的浏覽和閱讀寬度而設定
• 最理想的視口尺寸
• 需要手動填寫meta視口标簽通知浏覽器
• meta視口标簽的主要作用：布局視口的寬度應該與理想視口的寬度一緻，簡單了解就是裝置有多寬，布局視口就有多寬

1.2.2 meta 視口标簽

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

1.2.3 标準的viewport

• 視口寬度與裝置保持一緻
• 不允許使用者縮放
• 視口預設縮放比1.0
• 最大允許縮放比例1.0
• 最小允許縮放比例1.0

二、二倍圖

2.1 實體像素和實體像素比

• 實體像素點：螢幕顯示的最小顆粒，是實體真實存在的，廠商出廠時就設定好了。如蘋果6/7/8是750*1334
• 開發時1px不是一定等于一個實體像素的
• PC端頁面，1px=1個實體像素，移動端就不盡相同
• 實體像素比/螢幕像素比：1個px能顯示的實體像素的個數

注意：

1、實體像素就是分辨率

在iphone8 裡面 1px開發像素 = 2個實體像素

2.2 二倍圖

背景：我們需要一個 50×50 （css像素）的圖檔直接放到iphone8裡面會放大兩倍變成100×100。解決方式是放一個100×100的圖檔，然後手動把該圖檔縮小到50×50

二倍圖定義：我們準備的圖檔實際需要的大小要大兩倍

工具：cutterman

2.3 背景縮放 background-size

background-size：背景圖檔寬度 背景圖檔高度
background-size：500px;
/*隻寫一個參數，表示的是寬度，高度等比例縮放*/
           

機關可以跟百分比（相對于父盒子來說）

• 機關：長度|百分比|cover|contain;
• cover：把背景圖像擴充至足夠大，使背景圖像完全覆寫背景區域
• contain：把背景圖像擴充至最大尺寸，使其寬度和高度完全适應内容區域

注意：

1. cover等比例拉伸，高度和寬度都要滿足要求，是以可能導緻部分圖檔顯示不全
2. contain 是隻要寬度或者高度滿足要求，就不再進行拉伸，可能有部分空白區域

三、移動端主流開發方案

3.1 單獨制作移動端頁面（主流）

3.2 響應式頁面相容移動端（其次）

如：三星電子官網（www.samsung.com/cn/），通過判斷螢幕寬度來改變樣式，以适應不同終端。

缺點：制作麻煩，需要花很大精力去調相容性問題

四、移動端技術解決方案

移動端浏覽器基本以webkit核心為主，是以我們就考慮webkit相容性問題

4.1 CSS初始化 normoalize.css

移動端CSS初始化推薦使用normalize.css/

Normalize.css優點：

• 保護了有價值的預設值
• 修複了浏覽器的bug
• 子產品化的
• 有詳細的文檔

官網位址：http://necolas.github.io/normalize.css/

4.2 CSS3盒子模型 box-sizing

• 傳統模式寬度計算：盒子的寬度= width + border + padding
• CSS3盒子模型： 盒子的寬度 = width （包含了border+padding，即border和padding不會撐大盒子）

注意：沒有說外邊距

/*CSS3盒子模型*/
box-sizing: border-box;
/*傳統盒子模型*/
box-sizing: content-box;
           

4.2.1 特殊樣式

/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*點選高亮需要清除*/
-webkit-tap-highlight-color: transparent;
/*移動端浏覽器預設的外觀在ios上加上這個屬性才能給按鈕和輸入框自定義樣式*/
-webkit-appearance: none;
/*禁用長按頁面時彈出菜單*/
img a{
    -webkit-touch-callout: none;
}
           

五、 移動端常見布局

5.1 單獨制作移動端頁面（主流）

• 流式布局（百分比布局）
• flex彈性布局（強烈推薦）
• less+rem+媒體查詢布局
• 混合布局

5.1.1 流式布局（百分比布局/非固定像素布局）

• 通過把盒子的寬度設定成百分比來達到根據螢幕的寬度進行伸縮，不受固定像素的限制，内容向兩側填充
• 是移動web開發使用的比較常見的布局方式
• max-width
• min-width

5.1.2 flex彈性布局

5.1.3 less+rem+媒體查詢布局

5.1.4 混合布局

5.2 響應式頁面相容移動端（其次）

• 媒體查詢
• bootstrap