H5第一天
移動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標簽 （重要）
最標準的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
- 步驟
- 利用background-image引入二倍精靈圖
- 將二倍精靈圖在fw軟件中縮小至一倍，查看此時圖片的寬度，利用background-size設置背景大小
- 利用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 準備工作
設置視口標簽、初始化樣式：
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 涉及舊知識
6.4 涉及舊知識
總結
- 上一篇： HTML入门第一和第二章
- 下一篇： H5的第二天