移動Web - 基礎&流式布局

目標

• 了解移動端主要瀏覽器的內核
• 掌握用谷歌瀏覽器調試移動端頁面（重要）
• 了解布局視口、視覺視口、理想視口
• 使用mate標簽設置理想視口（重要）
• 了解視網膜屏、物理像素、二倍圖
• 會使用background-size設置二倍精靈圖（重要）
• 掌握圣杯布局的兩種方法（border-box & margin）（重要）
• 了解移動端兩類開發方案
• 知道什么是流式布局（重要）
• 能夠獨立完成京東移動端首頁（重要）

1、移動端瀏覽器和屏幕現狀

目標：了解移動端主要瀏覽器的內核、掌握用谷歌瀏覽器調試移動端頁面

1.1 瀏覽器現狀

- pc端：谷歌瀏覽器（Blink）、火狐瀏覽器（Gecko）、IE瀏覽器（Trident）、360瀏覽器、QQ瀏覽器、百度瀏覽器、搜狗瀏覽器

- 移動端：歐朋瀏覽器（Presto），UC瀏覽器，QQ瀏覽器，百度手機瀏覽器，360安全瀏覽器，谷歌瀏覽器，搜狗手機瀏覽器，獵豹瀏覽器，以及其他雜牌瀏覽器 ，內核大部分都是webkit

- 移動端瀏覽器內核：Webkit內核的適用范圍則較為廣泛，Android原生瀏覽器、蘋果的Safari、谷歌的Chrome(Android4.0使用)都是基于Webkit開源內核開發的

總結：兼容移動端主流瀏覽器，處理Webkit內核瀏覽器即可

1.2 手機屏幕現狀

移動端設備屏幕尺寸：非常多，碎片化嚴重。

Android設備有多種分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，還有傳說中的2K，4k屏。

iPhone主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。

查看手機屏幕尺寸網址：添加鏈接描述

總結：

• 作為開發者無需關注這些分辨率，因為我們常用的尺寸單位是 px 。
• 因此我們開發的網頁要做到適應各種手機屏幕尺寸

1.3 移動端頁面調試方法（重要）

Chrome DevTools（谷歌瀏覽器）的模擬手機調試

• 進入手機模式

• 選擇手機型號

  • 設置頁面百分比

• 搭建本地web服務器，手機和服務器一個局域網內，通過手機訪問服務器(后面課程掌握)

• 使用外網服務器，直接IP或域名訪問(后面課程掌握)

2. 視口

目標：了解布局視口、視覺視口、理想視口

視口（viewport）:就是瀏覽器顯示頁面內容的屏幕區域, 視口可以分為布局視口、視覺視口和理想視口

2.1 布局視口 layout viewport

- 概念: 為了解決早期pc端頁面在移動端的顯示問題，一般移動端的瀏覽器設置的默認視口，稱為布局視口

- 大白話：瀏覽器默認的窗口寬度

- 布局視口大小：iOS, Android基本都將這個視口設置為 980px，所以PC上的網頁大多都能在手機上呈現，只不過元素看上去很小（把瀏覽器整體壓縮在一個小屏幕里面），一般默認可以通過手動縮放網頁

2.2 視覺視口 visual viewport

- 概念：字面意思，它是用戶正在看到的網站的區域。注意：是網站的區域。
我們可以通過縮放去操作視覺視口，但不會影響布局視口，布局視口仍保持原來的寬度

2.3 理想視口 ideal viewport+

- 概念：布局視口的一個理想尺寸，只有當布局視口（瀏覽器）的尺寸等于設備屏幕的尺寸時，才是理想視口
- 設置理想視口方法：mate標簽 （重要）

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

最標準的viewport設置

• 視口寬度和設備保持一致
• 視口的默認縮放比例1.0
• 不允許用戶手動自行縮放
• 最大允許的縮放比例1.0
• 最小允許的縮放比例1.0

3. 二倍圖

目標：了解屏幕分辨率、了解圖片分辨率、了解視網膜屏、會使用background-size設置背景圖的大小、會使用二倍精靈圖設置元素背景

3.1 手機屏幕

• 通常我們所指的屏幕尺寸，實際上指的是屏幕對角線的長度（一般用英寸來度量）如下圖所示
• 1英寸 = 2.54cm 絕對單位；（到哪都不會變的值）
  

3.2 物理像素（采光點）

- 概念：客觀存在。指計算機顯示設備中的最小單位，即一個像素點的大小。每一個像素點可以理解為就是屏幕上的一個發光點。每個點可以發一個顏色，就是我們看到的畫面
- 發展：早期的屏幕，物理像素點（客觀的小燈泡）都比較大，比如玩游戲的超級瑪麗的畫面的顆粒感很強：隨著技術的進步，物理像素點會被做的越來越小；會被做小；

3.3 屏幕分辨率 & 視網膜屏 & css像素

屏幕分辨率：物理像素點的個數來衡量，表示屏幕水平和垂直方向的物理像素點的個數

• iPhone3和iPhone4是同一個屏幕尺寸下，比較分辨率：
  
  
• 分辨率高的優勢：直觀感受，畫面細膩，物理像素越小（屏幕發光點越小）
• Retina（視網膜屏幕）是一種顯示技術，可以將把更多的物理像素點壓縮至一塊屏幕里；從而達到更高的分辨率，并提高屏幕顯示的細膩程度，即1px代表更多的物理像素
• CSS像素 px ：1px代表的長度是固定的，因此屏幕分辨率越高，1px代表的物理像素就越多
  

3.4 圖片分辨率

• 概念：指圖片橫縱方向各有多少個物理像素（光點）

• 下圖：分辨率640*426 ，提供了多少個色彩發光點（迎合物理像素點）；
  

• 一個蘿卜一個坑：圖片在手機上展示時，圖片的光點會對應手機的光點（即物理像素點和物理像素點對接）

• 圖片的光點比作蘿卜，手機的采光點比作坑，光點是一一對應的，所以稱：一個蘿卜一個坑

• 假設：有200*200分辨率的圖片，在不設置圖片寬高的情況下，展示在寬度分別是320（iphone3）、640(iphone4)分辨率的手機上，展示的效果如下：
  

• 問題：相同的圖片不設置寬高，在不同的設備下，展示的大小不一樣

  • 寬度：第2個是第1個的0.5倍；
  • 面積：第2個是第1個的1/4倍；

• 原因：

  • 200*200分辨率的圖片：200個顏色發光點（蘿卜）；
  • 一個物理像素點發一個顏色：一個蘿卜一個坑，屏幕都需要200個物理像素點；
  • 坑的寬度大小：320（1）；640（0.5）；
  • 所以顯示為上圖。

• 目標：顯示大小一樣；

• 解決方法

  • 直接設置圖片寬高相同（不建議）：圖片在分辨率高的設備上會模糊
  • UI提供二倍圖

3.5 二倍圖-分辨率是尺寸2倍

• 概念：設置的圖片的分辨率和圖片的寬高是2倍的關系稱為二倍圖
• 大白話：設置CSS像素200px寬，320分辨率（200坑）,640分辨率（400坑）
  像針對640分辨率手機屏（iPhone4），要求設計給400*400圖，對應我們CSS設置200px,有二倍的關系
• 命名：
  • xxxxx@2x.png：二倍圖
  • xxxxx@3x.png：三倍圖

3.6 用二倍精靈圖做背景

使用核心：UI給出精靈圖的分辨率應該是psdUI稿上圖片尺寸的二倍，所以應該將精靈圖縮小到原來一半，再定位

• background-size

div {width: 500px;height: 500px;border: 2px solid red;background: url(images/dog.jpg) no-repeat;/* background-size: 圖片的寬度 圖片的高度; *//* background-size: 500px 200px; *//* 1.只寫一個參數 肯定是寬度 高度省略了  背景會等比例縮放 *//* background-size: 500px; *//* 2. 里面的單位可以跟%  相對于父盒子來說的 *//* background-size: 50%; *//* 3. cover 等比例拉伸 要完全覆蓋div盒子（以圖片寬高的最小值覆蓋全為準）  可能有部分背景圖片顯示不全關鍵詞：等比縮放，絕對沒有留白；*//* background-size: cover; *//* 4. contain 高度和寬度等比例拉伸 （以圖片寬高的最大值覆蓋全為準） 可能有部分空白區域 關鍵詞：等比縮放，顯示全面，可能留白 */background-size: contain;
}

• 步驟
  1. 利用background-image引入二倍精靈圖
  2. 將二倍精靈圖在fw軟件中縮小至一倍，查看此時圖片的寬度，利用background-size設置背景大小
  3. 利用fw軟件測量此時需要的圖標的定位，利用background-position設置背景定位
• 注意：
  • 非精靈圖的二倍圖，UI給我們，我們該怎么用就怎么用，和普通圖片沒有區別
  • 在用fw打開二倍精靈圖時，千萬不要保存圖片，會導致圖片變成一倍分辨率

4. 移動端布局現狀

目標：了解目前移動端頁面開發的主流方法

• 響應式：三星電子官網。添加鏈接描述 ；特點：可兼容PC 移動端，一個頁面多個端適配顯示；制作起來要考慮到兼容性的樣式
  • 媒體查詢
  • bootstarp
• 單獨制作(主流)：淘寶、京東、蘇寧手機端都是單獨制作的，流式、flex、rem布局、專門針對各種手機屏幕進行開發
  • 流式布局（百分比布局）：移動web開發使用的比較常見的布局方式，不改變文字和圖片的大小（看情況而定）
  • flex 彈性布局（強烈推薦）
  • less+rem+媒體查詢布局
  • 混合布局

5. 移動端技術方案

目標：會使用-webkit-前綴解決webkit的兼容性問題 、移動端公共樣式的引用、圣杯布局

5.1 移動端瀏覽器兼容問題&特殊樣式設置

移動端瀏覽器基本以 webkit 內核為主，因此我們就考慮webkit兼容性問題。

我們可以放心使用 H5 標簽和 CSS3 樣式。

同時我們瀏覽器的私有前綴我們只需要考慮添加 webkit 即可

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

5.2 移動端公共樣式

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

Normalize.css：保護了有價值的默認值

Normalize.css：修復了瀏覽器的bug

Normalize.css：是模塊化的

Normalize.css：擁有詳細的文檔

官網地址：添加鏈接描述

5.3 大量使用 box-sizing: border-box

/* 傳統：盒子的總寬度 = CSS中設置的 width + border + padding */
box-sizing: content-box;/* CSS3盒子模型:盒子的寬度：就是設置的寬度，且寬度width 里面包含了 border 和 padding */
box-sizing: border-box;

解決問題：

• 流式布局百分比設置寬高時，給盒子添加邊框或者內邊距，導致盒子掉下來
• 圣杯布局

5.4 圣杯布局（左右兩側固定，中間自適應）兩種方法

box-sizing: border-box

<head>
<style>.warp{position: relative;width: 100%;height: 200px;box-sizing: box-border;padding: 0 200px;}.right,.left{position: absolute;width: 200px;height: 100%;background-color: blue;}.right {right: 0;top: 0;}.left{left: 0;top: 0;}.mid{width: 100%;height: 100%;background-color: blueviolet;}</style>
</head>
<body><div class='warp'><div class='left'></div><div class='mid'>111111</div><div class='right'></div></div>
</body>

margin : 中間盒子不設置寬，設置margin：0 200px; 左右兩邊固定寬高，定位

<head>
<style>.warp{position: relative;width: 100%;height: 200px;}.right,.left{position: absolute;width: 200px;height: 100%;background-color: blue;}.right {right: 0;top: 0;}.left{left: 0;top: 0;}.mid{margin: 0 200px;height: 100%;background-color: blueviolet;}</style>
</head>
<body><div class='warp'><div class='left'></div><div class='mid'>111111</div><div class='right'></div></div>
</body>

6. 京東案例

目標: 掌握視口標簽設置、二部圖使用（圖片、精靈圖）、流式布局的特點；

6.1 準備工作

設置視口標簽、初始化樣式：

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

body樣式的初始化設置：

body {width: 100%;min-width: 320px;max-width: 640px;margin: 0 auto;font-size: 14px;color: #666;
}

6.2 整體布局

• 設置body
• 布局劃分
  

6.3 dpg 、 webp

• dpg：京東自主研發推出DPG圖片壓縮技術，經測試該技術，可直接節省用戶近50%的瀏覽流量，極大的提升了用戶的網頁打開速度。全部瀏覽器的兼容支持，壓縮后的圖片和webp的清晰度對比沒有差距。
• webp：谷歌開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并能節省大量的服務器寬帶資源和數據空間；

6.4 涉及舊知識

1. 先看這個盒子要不要設置高度；沒有高度的時候，一般是靠內部子元素撐起來的。
2. 偽元素：左側或右側的線、簡單的圖標采用偽元素進行設置；
3. 結構偽類選擇：n 作為參數，一定要放在前面
4. 清除浮動：

6.4 涉及舊知識

1. 先看這個盒子要不要設置高度；沒有高度的時候，一般是靠內部子元素撐起來的。
2. 偽元素：左側或右側的線、簡單的圖標采用偽元素進行設置；
3. 結構偽類選擇：n 作為參數，一定要放在前面
4. 清除浮動：

/* 必須指定寬度*/
div {width: 100%;overflow: hidden;
}