前端学习笔记 - 移动端Web开发
移動端基礎
瀏覽器現狀
PC端常見瀏覽器：360瀏覽器、谷歌瀏覽器、火狐瀏覽器、QQ瀏覽器、百度瀏覽器、搜狗瀏覽器、IE瀏覽器
移動端常見瀏覽器：UC瀏覽器，QQ瀏覽器，歐朋瀏覽器，百度手機瀏覽器，360安全瀏覽器，谷歌 瀏覽器，搜狗手機瀏覽器，獵豹瀏覽器，以及其他雜牌瀏覽器。
-
國內的UC和QQ，百度等手機瀏覽器都是根據Webkit修改過來的內核，國內尚無自主研發的內核，就像國內的手機操作系統都是基于Android修改開發的一樣
-
兼容移動端主流瀏覽器，處理Webkit內核瀏覽器即可
手機屏幕現狀
移動端設備屏幕尺寸非常多，碎片化嚴重。
-
Android設備有多種分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，還有傳說中的2K，4k屏。
-
近年來iPhone的碎片化也加劇了，其設備的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
-
作為開發者無需關注這些分辨率，因為常用的尺寸單位是px
常見移動端屏幕尺寸
| iphone3G | 3.5 | 320*480 | 1.0 |
| iphone4/4s | 3.5 | 320*480 | 2.0 |
| iphone5/5s/5c | 4.0 | 320*568 | 2.0 |
| HTC One M8 | 4.5 | 360*640 | 3.0 |
| iphone 6 | 4.7 | 375*667 | 2.0 |
| Nexus 4 | 4.7 | 384*640 | 2.0 |
| Nexus 5x | 5.2 | 411*731 | 2.3 |
| iphone6 Plus | 5.5 | 414*736 | 3.0 |
| Samsung Galaxy Note4 | 5.7 | 480*853 | 3.0 |
| Sony Xperia Z Ultra | 6.4 | 540*960 | 2.0 |
| Nexus 7('12) | 7.0 | 600*960 | 1.3 |
| iPad Mini | 7.9 | 768*1024 | 1.0 |
作為前端開發，不建議糾結dp，dpi，pt，ppi等單位。
移動端調試方法
-
Chrome DevTools（谷歌瀏覽器）的模擬手機調試
-
f12→左上角小圖標→可以選擇型號，也可以edit添加
-
-
搭建本地web服務器，手機和服務器一個局域網內，通過手機訪問服務器
-
使用外網服務器，直接IP或域名訪問
視口
視口（viewport）就是瀏覽器顯示頁面內容的屏幕區域。 視口可以分為布局視口、視覺視口和理想視口
-
布局視口 layout viewport：一般移動設備的瀏覽器都默認設置了一個布局視口，用于解決早期的PC端頁面在手機上顯示的問題
-
iOS, Android基本都將這個視口分辨率設置為 980px，所以PC上的網頁大多都能在手機上呈現，只不過元 素看上去很小，一般默認可以通過手動縮放網頁
-
-
視覺視口 visual viewport：是用戶正在看到的網站的區域
-
可以通過縮放去操作視覺視口，但不會影響布局視口，布局視口仍保持原來的寬度
-
-
理想視口 ideal viewport
-
使網站在移動端有最理想的瀏覽和閱讀寬度而設定
-
理想視口，對設備來講，是最理想的視口尺寸
-
需要手動添寫meta視口標簽通知瀏覽器操作
meta視口標簽的主要目的：布局視口的寬度應該與理想視口的寬度一致，簡單理解就是設備有多寬，布局的視口就多寬
-
meta視口標簽
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">| width | 寬度設置的是viewport寬度，可以設置device-width特殊值 |
| initial-scale | 初始縮放比，大于0的數字(頁面一打開按照幾倍打開) |
| maximum-scale | 最大縮放比，大于0的數字 |
| minimum-scale | 最小縮放比，大于0的數字 |
| user-scalable | 用戶是否可以縮放，yes或no（1或0） |
標準的viewport設置
-
視口寬度和設備保持一致 width=device-width
-
視口的默認縮放比例1.0 initial-scale=1.0
-
不允許用戶自行縮放 user-scalable=no
-
最大允許的縮放比例1.0 maximum-scale=1.0
-
最小允許的縮放比例1.0 minimum-scale=1.0
二倍圖
物理像素&物理像素比
物理像素點指的是屏幕顯示的最小顆粒，是物理真實存在的。
-
廠商在出廠時就設置好了,比如蘋果6\7\8 是 750* 1334
-
開發時候的1px 不是一定等于1個物理像素的
-
PC端頁面，1個px 等于1個物理像素的，但是移動端就不盡相同
-
PC端 和 早前的手機屏幕 / 普通手機屏幕: 1CSS像素 = 1 物理像素的
-
一個px的能顯示的物理像素點的個數，稱為物理像素比或屏幕像素比
-
iphone8的物理像素是750，1px開發像素等于2個物理像素(375寬的盒子就可以占滿了)
-
-
Retina（視網膜屏幕）是一種顯示技術，可以將把更多的物理像素點壓縮至一塊屏幕里，從 而達到更高的分辨率，并提高屏幕顯示的細膩程度
多倍圖
-
對于一張 50px * 50px 的圖片,在手機 Retina 屏中打開，按照剛才的物理像素比會放大倍數，這樣會造成圖片模糊
-
在標準的viewport設置中，使用倍圖來提高圖片質量，解決在高清設備中的模糊問題
-
通常使用二倍圖， 因為iPhone 6\7\8 的影響,但是現在還存在3倍圖4倍圖的情況，這個看實際開發公司需求
-
背景圖片 注意縮放問題
背景縮放 background-size
background-size 屬性規定背景圖像的尺寸
background-size: 背景圖片寬度 背景圖片高度;
-
單位： 長度|百分比|cover|contain;
-
cover把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。
-
contain把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域
-
只寫一個參數，算作寬度，高度會等比例縮放
移動端開發選擇
-
移動端主流方案
-
單獨制作移動端頁面（主流）
-
京東商城手機版、淘寶觸屏版、蘇寧易購手機版等
-
-
響應式頁面兼容移動端（其次）
-
三星手機官網等
-
-
單獨移動端頁面（主流）
通常情況下，網址域名前面加 m(mobile) 可以打開移動端。通過判斷設備，如果是移動設備打開，則跳到移動端頁面
響應式兼容PC移動端
三星電子官網： www.samsung.com/cn/ ，通過判斷屏幕寬度來改變樣式，以適應不同終端。
-
缺點：制作麻煩， 需要花很大精力去調兼容性問題
移動端技術解決方案
移動端瀏覽器
-
移動端瀏覽器基本以 webkit 內核為主，因此就考慮webkit兼容性問題。
-
可以放心使用 H5 標簽和 CSS3 樣式。
-
同時瀏覽器的私有前綴只需要考慮添加 webkit 即可
CSS初始化 normalize.css
移動端 CSS 初始化推薦使用 normalize.css/
Normalize.css：
-
保護了有價值的默認值
-
修復了瀏覽器的bug
-
是模塊化的
-
擁有詳細的文檔
-
官網地址： Normalize.css: Make browsers render all elements more consistently.
CSS3 盒子模型 box-sizing
CSS3盒子模型： 盒子的寬度 = CSS中設置的寬度width 里面包含了 border 和 padding，也就是說，CSS3中的盒子模型， padding 和 border 不會撐大盒子了
/*CSS3盒子模型*/ box-sizing: border-box; /*傳統盒子模型*/ box-sizing: content-box;-
移動端可以全部CSS3 盒子模型
-
PC端如果完全需要兼容，我們就用傳統模式，如果不考慮兼容性，我們就選擇 CSS3 盒子模型
特殊樣式
? ?<style>div {/*CSS3盒子模型*/box-sizing: border-box;-webkit-box-sizing: border-box;}img,a {/*需要清除點擊高亮,設置為transparent透明*/-webkit-tap-highlight-color: transparent;/*禁用長按頁面時的彈出菜單*/-webkit-touch-callout: none;}input {/*在移動端瀏覽器默認的外觀在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式*/-webkit-appearance: none;}</style> </head> ? <body><div></div><a href="#">鏈接</a><input type="button" value="按鈕"> </body>移動端常見布局
移動端技術選型
-
單獨制作移動端頁面（主流）
-
流式布局（百分比布局）
-
flex 彈性布局（強烈推薦）
-
less+rem+媒體查詢布局
-
混合布局
-
-
響應式頁面兼容移動端（其次）
-
媒體查詢
-
bootstrap
-
流式布局（百分比布局）
流式布局，就是百分比布局，也稱非固定像素布局
-
通過盒子的寬度設置成百分比來根據屏幕的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充
-
主要是看寬度，不看高度
-
流式布局方式是移動web開發使用的比較常見的布局方式
-
max-width 最大寬度 （max-height 最大高度）
-
min-width 最小寬度 （min-height 最小高度）
京東移動端首頁
-
訪問地址：m.jd.com
技術選型
-
方案：單獨制作移動頁面方案
-
技術：采取流式布局
搭建相關文件夾結構
設置視口標簽以及引入初始化樣式
常用初始化樣式
圣杯布局：左右固定，中間自適應
二倍精靈圖做法
-
在firework里面把精靈圖等比例縮放為原來的一半，之后再測量坐標
-
注意代碼里面background-size也要寫精靈圖原來寬度的一半
圖片格式
-
DPG圖片壓縮技術：京東自主研發推出DPG圖片壓縮技術，經測試，該技術可直接節省用戶近50%的瀏覽流量，極大的提升了用戶的網頁打開速度。能夠兼容jpeg，實現全平臺、全部瀏覽器的兼容支持，經過內部和外部上萬張圖片的人眼瀏覽測試后發現，壓縮后的圖片和webp的清晰度對比沒有差距。
-
webp 圖片格式：谷歌開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并 能節省大量的服務器寬帶資源和數據空間
flex彈性布局
傳統布局與flex布局
| 兼容性好 | 操作方便，布局極為簡單，移動端應用很廣泛 |
| 布局繁瑣 | PC端瀏覽器支持情況較差 |
| 局限性，不能再移動端很好的布局 | IE 11或更低版本，不支持或僅部分支持 |
-
建議：
-
如果是PC端頁面布局，我們還是傳統布局。
-
如果是移動端或者不考慮兼容性問題的PC端頁面布局，我們還是使用flex彈性布局布局原理
-
布局原理
<!DOCTYPE html> <html lang="en"> ? <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {display: flex;width: 80%;height: 300px;background-color: pink;justify-content: space-around;}div span {/* width: 150px; */height: 100px;background-color: purple;margin-right: 5px;flex: 1;}</style> </head> ? <body><div><span>1</span><span>2</span><span>3</span></div> </body> ? </html>flex 是 flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何一個容器都可以 指定為 flex 布局
-
當為父盒子設為 flex 布局以后，子元素的 float、clear 和 vertical-align 屬性將失效。
-
子元素會被轉換成塊級元素
-
伸縮布局 = 彈性布局 = 伸縮盒布局 = 彈性盒布局 =flex布局
采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成 員，稱為 Flex 項目（flex item），簡稱"項目"
-
體驗中 div 就是 flex父容器。
-
體驗中 span 就是 子容器 flex項目
-
子容器可以橫向排列也可以縱向排列
總結flex布局原理：就是通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式
常見父項屬性
以下由6個屬性是對父元素設置的
-
flex-direction：設置主軸的方向
-
justify-content：設置主軸上的子元素排列方式
-
flex-wrap：設置子元素是否換行
-
align-content：設置側軸上的子元素的排列方式（多行）
-
align-items：設置側軸上的子元素排列方式（單行）
-
flex-flow：復合屬性，相當于同時設置了 flex-direction 和 flex-wrap
flex-direction 設置主軸的方向
-
主軸與側軸：在 flex 布局中，是分為主軸和側軸兩個方向，同樣的叫法有 ： 行和列、x 軸和y 軸
-
默認主軸方向就是 x 軸方向，水平向右
-
默認側軸方向就是 y 軸方向，水平向下
-
-
屬性值
-
flex-direction 屬性決定主軸的方向（即項目的排列方向）
-
注意：
-
主軸和側軸是會變化的，就看 flex-direction 設置誰為主軸，剩下的就是側軸(如flex-direction: column;那么x軸就是側軸)。而子元素是跟著主軸來排列的
-
| row | 默認值從左到右 |
| row-reverse | 從右到左 |
| column | 從上到下 |
| column-reverse | 從下到上 |
justify-content 設置主軸上的子元素排列方式
justify-content屬性定義了項目在主軸上的對齊方式
-
注意： 使用這個屬性之前一定要確定好主軸是哪個
| flex-start | (默認值)從頭部開始；如果主軸是x軸，則從左到右 |
| flex-end | 從尾部開始排列 |
| center | 在主軸居中對齊（如果主軸是x軸則水平居中） |
| space-around | 平分剩余空間 |
| space-between | 先兩邊貼邊，再平分剩余空間（重要） |
flex-wrap 設置子元素是否換行
默認情況下，項目都排在一條線（又稱”軸線”）上
-
flex-wrap屬性定義，flex布局中默認是不換行的，如果裝不開，會縮小子元素
| nowrap | (默認值)不換行 |
| wrap | 換行 |
align-items 設置側軸上的子元素排列方式（單行）
控制子項在側軸（默認是y軸）上的排列方式，在子項為單項（單行）的時候使用
| flex-start | 從上到下 |
| flex-end | 從下到上 |
| center | 擠在一起居中（垂直居中） |
| stretch | 拉伸（默認值 ） |
讓子元素既水平居中對齊又垂直對齊：在主軸(justify-content)，再在側軸(align-items)
align-content 設置側軸上的子元素的排列方式（多行）
設置子項在側軸上的排列方式 并且只能用于子項出現換行的情況（多行）(必須設置了flex-wrap :wrap;)，在單行下是沒有效果的。
| flex-start | (默認值)在側軸的頭部開始排列 |
| flex-end | 在側軸的尾部開始排列 |
| center | 在側軸中間顯示 |
| space-around | 子項在側軸平分剩余空間 |
| space-between | 子項在側軸先分布在兩頭，再平分剩余空間 |
| stretch | 設置子項元素高度平分父元素高度 |
align-content 和 align-items 區別
-
align-items 適用于單行情況下， 只有上對齊、下對齊、居中和拉伸
-
align-content 適應于換行（多行）的情況下（單行情況下無效）， 可以設置 上對齊、 下對齊、居中、拉伸以及平均分配剩余空間等屬性值。
-
總結就是單行找 align-items 多行找 align-content
flex-flow
flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性
flex-flow:row wrap;
常見子項屬性
flex 屬性
定義子項目分配剩余空間，用flex來表示占多少份數，也可以寫百分比
.item {flex: <number>; /* default 0 */ } <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>section {display: flex;width: 60%;height: 150px;background-color: pink;margin: 0 auto;}section div:nth-child(1) {width: 100px;height: 150px;background-color: red;}section div:nth-child(2) {flex: 1;background-color: green;}section div:nth-child(3) {width: 100px;height: 150px;background-color: blue;}p {display: flex;width: 60%;height: 150px;background-color: pink;margin: 100px auto;}p span {flex: 1;}p span:nth-child(2) {flex: 2;background-color: purple;}</style> </head><body><section><div></div><div></div><div></div></section><p><span>1</span><span>2</span><span>3</span></p> </body></html>align-self 控制子項自己在側軸上的排列方式
align-self 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 align-items 屬性。
-
默認值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch。
order 屬性定義項目的排列順序
數值越小，排列越靠前，默認為0。
-
注意：和 z-index 不一樣
攜程網移動端首頁
訪問地址：m.ctrip.com
技術選型
-
方案：單獨制作移動頁面方案
-
技術：采取flex布局
搭建相關文件夾結構
設置視口標簽以及引入初始化樣式
常用初始化樣式
常見模塊命名
常見flex布局思路
背景線性漸變
-
背景漸變必須添加瀏覽器私有前綴
-
起始方向可以是： 方位名詞或者度數 ， 如果省略默認就是 top
rem適配布局
rem單位
rem (root em)是一個相對單位，類似于em，em是父元素字體大小
不同的是rem的基準是相對于html元素的字體大小
-
比如，根元素（html）設置font-size=12px; 非根元素設置width:2rem; 則換成px表示就是24px
-
rem的優勢：
-
父元素文字大小可能不一致， 但是整個頁面只有一個html，可以通過修改html里面的文字大小來改變頁面中元素的大小，可以整體控制
-
媒體查詢
媒體查詢（Media Query）是CSS3新語法
-
使用 @media 查詢，可以針對不同的媒體類型定義不同的樣式
-
@media 可以針對不同的屏幕尺寸設置不同的樣式
-
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面
-
目前針對很多蘋果手機、Android手機，平板等設備都用得到多媒體查詢
語法規范
@media mediatype and|not|only (media feature) {CSS-Code;}-
用 @media 開頭 注意@符號
-
mediatype 媒體類型
-
關鍵字 and not only
-
media feature 媒體特性 必須有小括號包含
mediatype 查詢類型
將不同的終端設備劃分成不同的類型，稱為媒體類型
| all | 用于所有設備 |
| 用于打印機和打印預覽 | |
| screen | 用于電腦屏幕，平板電腦，智能手機等 |
關鍵字
關鍵字將媒體類型或多個媒體特性連接到一起做為媒體查詢的條件
| and | 可以將多個媒體特性連接到一起，相當于“且”的意思 |
| not | 排除某個媒體類型，相當于“非”的意思，可以省略 |
| only | 指定某個特定的媒體類型，可以省略 |
媒體特性
每種媒體類型都具體各自不同的特性，根據不同媒體類型的媒體特性設置不同的展示風格。我們暫且了解三個。 注意他們要加小括號包含
| width | 定義輸出設備中頁面可見區域的寬度 |
| min-width | 定義輸出設備中頁面最小可見區域寬度 |
| max-width | 定義輸出設備中頁面最大可見區域寬度 |
根據頁面寬度改變背景變色
① 按照從大到小的或者從小到大的思路 ② 注意最大值 max-width 和最小值 min-width都是包含等于的 ③ 當屏幕小于540像素， 背景顏色變為藍色 （x <= 539） ④ 當屏幕大于等于540像素 并且小于等于 969像素的時候 背景顏色為 綠色 ( 540=<x <= 969） ⑤ 當屏幕大于等于 970像素的時候，背景顏色為紅色 （ x >= 970）
-
注意： 為了防止混亂，媒體查詢要按照從小到大或者從大到小的順序來寫,但推薦從小到大來寫，這樣代碼更簡潔
媒體查詢+rem實現元素變化
-
rem單位是跟著html來走的，有了rem頁面元素可以設置不同大小尺寸
-
媒體查詢可以根據不同設備寬度來修改樣式
-
媒體查詢+rem 就可以實現不同設備寬度，實現頁面元素大小的動態變化
引入資源
當樣式比較繁多的時候，可以針對不同的媒體使用不同 stylesheets（樣式表）。
-
原理：直接在link中判斷設備的尺寸，然后引用不同的css文件
-
語法規范：<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
-
示例
-
style320.css
-
style640.css
Less 基礎
維護 css 的弊端
CSS 是一門非程序式語言，沒有變量、函數、SCOPE（作用域）等概念。
-
CSS 需要書寫大量看似沒有邏輯的代碼，CSS 冗余度是比較高的。
-
不方便維護及擴展，不利于復用。
-
CSS 沒有很好的計算能力
-
非前端開發工程師來講，往往會因為缺少 CSS 編寫經驗而很難寫出組織良好且易于維護的 CSS 代碼項目
Less 介紹
Less （Leaner Style Sheets 的縮寫） 是一門 CSS 擴展語言，也成為CSS預處理器。
-
做為 CSS 的一種形式的擴展，它并沒有減少 CSS 的功能，而是在現有的 CSS 語法上，為CSS加入程序式語言的特性。
-
它在 CSS 的語法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，并且降低了 CSS 的維護成本，就像它的名稱所說的那樣，Less 可以讓我們用更少的代碼做更多的事情。
-
Less中文網址： Less 中文網
-
常見的CSS預處理器：Sass、Less、Stylus
-
Less 是一門 CSS 預處理語言，它擴展了CSS的動態特性
Less 安裝
-
如果使用vscode無需安裝less：安裝easy less插件
-
修改less自動生成的css的路徑：easy less插件的設置圖標，'擴展設置'，'在setting.json中編輯'，在''less.compile: {}''加上"out": "../css/"
-
-
未安裝Vscode：
① 安裝nodejs，可選擇版本(8.0)，網址：下載 | Node.js 中文網 ② 檢查是否安裝成功，使用cmd命令（win10 是 window +r 打開 運行輸入cmd） --- 輸入“ node –v ”查看版本即可 ③ 基于nodejs在線安裝Less，使用cmd命令“ npm install -g less ”即可 ④ 檢查是否安裝成功，使用cmd命令“ lessc -v ”查看版本即可
Less 變量
新建一個后綴名為less的文件， 在這個less文件里面書寫less語句
變量是指沒有固定的值，可以改變的。因為CSS中的一些顏色和數值等經常使用
@變量名:值;
-
變量命名規范
-
必須有@為前綴
-
不能包含特殊字符
-
不能以數字開頭
-
大小寫敏感
-
-
變量使用規范
Less 編譯
本質上，Less 包含一套自定義的語法及一個解析器，用戶根據這些語法定義自己的樣式規則，這些規則 最終會通過解析器，編譯生成對應的 CSS 文件。
-
所以，需要把less文件，編譯生成為css文件，這樣html頁面才能使用
-
vocode Less 插件
-
Easy LESS 插件用來把less文件編譯為css文件
-
安裝完畢插件，重新加載 vscode
-
只要保存Less文件，就會自動生成CSS文件(再保存，css文件也會自動更新)
-
Less 嵌套
經常用到選擇器的嵌套
#header .logo {width: 300px; }-
Less 嵌套寫法：子元素的樣式直接寫到父元素里面
-
如果有 （交集|偽類|偽元素選擇器）
-
內層選擇器的前面沒有&符號，則它被解析為父選擇器的后代；
-
如果有& 符號，它就被解析為父元素自身或父元素的偽類。
-
Less 運算
任何數字、顏色或者變量都可以參與運算。Less提供了加（+）、減（-）、乘（*）、除（/）算術運算。
-
注意：
-
乘號（*）和除號（/）的寫法
-
運算符中間左右有個空格隔開 如1px + 5
-
對于兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位
-
如果兩個值之間只有一個值有單位，則運算結果就取該單位
-
新版本除法需要加括號 如width: (44rem / @baseFont);
-
rem適配方案
-
適配的目標：讓一些不能等比自適應的元素，達到當設備尺寸發生改變的時候，等比例適配當前設備
-
達成目標的方法：使用媒體查詢根據不同設備按比例設置html的字體大小，然后頁面元素使用rem做尺寸單位，當html字體大小變化元素尺寸也會發生變化，從而達到等比縮放的適配
rem實際開發適配方案
① 按照設計稿與設備寬度的比例，動態計算并設置 html 根標簽的 font-size 大小（媒體查詢） ② CSS 中，設計稿元素的寬、高、相對位置等取值，按照同等比例換算為 rem 為單位的值；
rem適配方案技術使用（市場主流）
-
技術方案1
-
less
-
媒體查詢
-
rem
-
-
技術方案2（推薦）
-
flexible.js
-
rem
-
-
總結：
-
兩種方案現在都存在
-
方案2更簡單
-
方案1(rem + 媒體查詢 + less 技術)
設計稿常見尺寸寬度
| iphone 4/5 | 640px |
| iphone 6/7/8 | 750px |
| Android | 常見320px、360px、375px、384px、400px、414px、500px、720px；大部分4.7~5寸的安卓設備為720px |
一般情況下，以一套或兩套效果圖適應大部分的屏幕，放棄極端屏或對其優雅降級，犧牲一些效果，現在基本以750px為準
動態設置html標簽 font-size 大小
① 假設設計稿是750px ② 假設把整個屏幕劃分為15等份（劃分標準不一可以是20份也可以是10等份） ③ 每一份作為html字體大小，這里就是50px ④ 那么在320px設備的時候，字體大小為320/15 就是 21.33px ⑤ 用頁面元素的大小除以不同的html字體大小會發現他們比例還是相同的
-
比如以750為標準設計稿
-
一個100*100像素的頁面元素在750px屏幕下， 就是100/50轉換為rem， 2 rem * 2 rem，比例是1比1
-
320屏幕下， html字體大小為21.33，則2rem = 42.66px，此時寬和高都是 42.66，但是寬和高的比例還是1比1
-
但是已經能實現不同屏幕下頁面元素盒子等比例縮放的效果
-
元素大小取值方法
-
最后的公式： 頁面元素的rem值 = 頁面元素值(px) / (屏幕寬度 / 劃分的份數)
-
屏幕寬度/劃分的份數就是1rem，即html的font-size大小
-
或： 頁面元素的rem值 = 頁面元素值（px） / html font-size字體大小
-
方案2 flexible.js
手機淘寶團隊出的簡潔高效移動端適配庫
-
不需要在寫不同屏幕的媒體查詢，因為里面js做了處理
-
原理是把當前設備劃分為10等份，但是不同設備下，比例還是一致的。
-
確定好當前設備的html文字大小就可以了
-
比如當前設計稿是750px， 只需要把html文字大小設置為 75px(750px / 10) 就可以
-
里面頁面元素rem值： 頁面元素的px值 / 75
-
剩余的，讓flexible.js來去算
VSCode - px轉換rem插件：cssrem
插件默認的html文字大小 cssroot是16px
設置html字體大小基準值
打開 設置 快捷鍵是 ctrl + 逗號
或：右鍵插件，打開擴展設置，修改root font size
蘇寧網首頁案例
訪問地址：m.suning.com
技術選型
-
方案：采取單獨制作移動頁面方案
-
技術：采取rem適配布局（less + rem + 媒體查詢）
-
設計圖： 本設計圖采用 750px 設計尺寸
搭建相關文件夾結構
設置視口標簽以及引入初始化樣式
設置公共common.less文件
-
新建common.less 設置好最常見的屏幕尺寸，利用媒體查詢設置不同的html字體大小，因為除了首頁其他頁面也需要
-
常見的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
-
劃分的份數定為15等份
-
因為pc端也可以打開蘇寧移動端首頁，默認html字體大小為 50px，注意這句話寫到最上面
新建index.less文件
-
新建index.less 這里面寫首頁的樣式
-
將剛才設置好的 common.less引入到index.less里面 語法如下：
-
生成index.css 引入到 index.html 里面
body樣式
flexible方案(與上面不同的地方)
body {min-width: 320px;max-width: 750px;/* flexible劃分了10等份 */width: 10rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica;background: #f2f2f2; }@media screen and (min-width: 750px) {html {font-size: 75px!important;} }黑馬面面
一、目的
了解移動端頁面開發流程
掌握移動端常見布局思路
1.1 技術方案
1. 彈性盒子 + rem + LESS 4. 最小適配設備為iphone5 320px 最大設配設備為iphone8plus(ipad能正常查看內容即可)1.2 代碼規范
1. 類名語義化,盡量精短、明確，必須以字母開頭命名，且全部字母為小寫，單詞之間統一使用下劃線“_” 連接 2. 類名嵌套層次盡量不超過三層 3. 盡量避免直接使用元素選擇器 4. 屬性書寫順序布局定位屬性：display / position / float / clear / visibility / overflow尺寸屬性：width / height / margin / padding / border / background文本屬性：color / font / text-decoration / text-align / vertical-align其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow 5. 避免使用id選擇器 6. 避免使用通配符*和!important1.2 目錄規范
項目文件夾：heimamm樣式文件夾：css業務類圖片文件夾：images樣式類圖片文件夾： icons字體類文件夾： fonts二、流程開發
2.1 藍湖/摹客協作平臺
-
UI設計師 psd效果圖完成后，會上傳到藍湖//摹客里面，同時會拉前端工程師進入開發
-
大部分情況下，UI會把圖片按照前端設計要求給切好
-
UI設計師 上傳藍湖到或者/摹客（了解）
-
前端設計師可以直接/摹客/藍湖測量取值
2.2 適配方案
-
flex 布局
-
百分比布局
-
rem布局
-
vw/vh布局
-
響應式布局
-
本次案例 flex + rem + + flexible.js + LESS
2.3 初始化文件
-
引入 normalize.css
-
less 中 初始化body樣式
-
約束范圍
- @media screen and (min-width: 750px) {html {font-size: 37.5px !important;} }
2.4 布局模塊
頭部模塊 .header 高度為 80px
nav 模塊制作 多用 flex
充電學習 陰影
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1)2.5 swiper 插件使用
官網地址：Swiper中文網-輪播圖幻燈片js插件,H5頁面前端開發
-
下載需要的css和js文件 html頁面中 引入相關文件
-
官網找到類似案例，復制html結構，css樣式 js 語法
-
根據需求定制修改模塊
2.6 圖標字體上傳下載
上傳步驟：
讓UI美工準備好 圖標字體（必須是svg格式）
點上傳按鈕（保留顏色并提交）
生成之后加入購物車即可
點擊下載 --- 下載代碼
小技巧： 如何批量下載全部字體圖標呢？
var span = document.querySelectorAll('.icon-cover'); for (var i = 0, len = span.length; i < len; i++) {console.log(span[i].querySelector('span').click()); }2.7 上傳碼云并發布部署靜態網站
準備工作： 需要下載git軟件 需要碼云注冊賬號
git 可以把我們的本地網站提交上傳到遠程倉庫（碼云 gitee）里面 類似以前的 ftp
碼云 就是遠程倉庫， 類似服務器
碼云創建新的倉庫。 heimamm
利用git 提交 把本地網站提交到 碼云新建的倉庫里面
-
在網站根目錄右鍵-- Git Bash Here
-
如果是第一次利用git提交，請配置好全局選項
git config --global user.name "用戶名" git config --global user.email "你的郵箱地址" -
初始化倉庫
git init -
把本地文件放到暫存區
git add . -
把本地文件放到本地倉庫里面
git commit -m '提交黑馬面面網站' -
鏈接遠程倉庫
git remote add origin 你新建的倉庫地址 -
把本地倉庫的文件推送到遠程倉庫 push
git push -u origin master
碼云部署發布靜態網站
-
在當前倉庫中，點擊 “服務” 菜單
-
選擇 Gitee Pages
-
選擇 “啟動” 按鈕
-
稍等之后，會拿到地址，就可以利用這個地址來預覽網頁了
-
也可以繼續利用 草料二維碼 把網址生成二維碼 草料二維碼生成器
響應式布局
響應式開發
響應式開發原理
使用媒體查詢針對不同寬度的設備進行布局和樣式的設置，從而適配不同設備
| 超小屏幕（手機） | < 768px |
| 小屏設備（平板） | >= 768px ~ < 992px |
| 中等屏幕（桌面顯示器） | >= 992px ~ <1200px |
| 寬屏設備（大桌面顯示器） | >= 1200px |
響應式布局容器
響應式需要一個父級做為布局容器(一般叫做container)，來配合子級元素來實現變化效果
-
原理：在不同屏幕下，通過媒體查詢來改變這個布局容器的大小，再改變里面子元素的排列方式和大小，從而實現不同屏幕下，看到不同的頁面布局和樣式變化
-
響應式尺寸劃分：
-
超小屏幕（手機，小于 768px）：設置寬度為 100%
-
小屏幕（平板，大于等于 768px）：設置寬度為 750px
-
中等屏幕（桌面顯示器，大于等于 992px）：寬度設置為 970px
-
大屏幕（大桌面顯示器，大于等于 1200px）：寬度設置為 1170px
-
也可以根據實際情況自己定義劃分
-
響應式導航
① 當屏幕大于等于768像素，給container寬度為750px ②container里面包含8個小li盒子，每個盒子的寬度定為93.75(750/8)， 高度為30px，浮動一行顯示。 ③ 當屏幕縮放，寬度小于768像素的時候， container寬度修改為100%寬度。 ④container里面的8個小li，寬度修改為 33.33%，這樣一行就只能顯示3個小li ，剩余下行顯示
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}.container {width: 750px;margin: 0 auto;}.container ul li {float: left;width: 93.75px;height: 30px;background-color: green;}@media screen and (max-width: 767px) {.container {width: 100%;}.container ul li {width: 33.33%;}}</style> </head><body><div class="container"><ul><li>導航欄</li><li>導航欄</li><li>導航欄</li><li>導航欄</li><li>導航欄</li><li>導航欄</li><li>導航欄</li><li>導航欄</li></ul></div> </body></html>Bootstrap前端開發框架
Bootstrap 簡介
Bootstrap 來自 Twitter（推特），是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它簡潔靈活，使得Web開發更加快捷
-
網址
-
中文官網：Bootstrap中文網
-
官網：Bootstrap · The most popular HTML, CSS, and JS library in the world.
-
推薦使用：Bootstrap v3 中文文檔 · Bootstrap 是最受歡迎的 HTML、CSS 和 JavaScript 框架，用于開發響應式布局、移動設備優先的 WEB 項目。 | Bootstrap 中文網
-
-
框架：顧名思義就是一套架構，它有一套比較完整的網頁功能解決方案，而且控制權在框架本身，有預制樣式庫、組件和插件。使用者要按照框架所規定的某種規范進行開發
-
優點：
-
標準化的html+css編碼規范
-
提供了一套簡潔、直觀、強悍的組件
-
有自己的生態圈，不斷的更新迭代
-
讓開發更簡單，提高了開發的效率
-
-
版本：
-
2.x.x：停止維護,兼容性好,代碼不夠簡潔，功能不夠完善。
-
3.x.x：目前使用最多,穩定,但是放棄了 IE6-IE7。對 IE8 支持但是界面效果不好,偏向用于開發響應式布局、移動設備優先的 WEB 項目。
-
4.x.x ：最新版，目前還不是很流行
-
Bootstrap 使用
控制權在框架本身，使用者要按照框架所規定的某種規范進行開發
-
Bootstrap 使用四步曲：
創建文件夾結構：新建bootstrap文件夾，把下載下來的里面三個文件夾復制進去
-
bootstrap.min.css：經過壓縮的
創建 html 骨架結構
-
基本模板
引入相關樣式文件
書寫內容
-
直接拿Bootstrap 預先定義好的樣式來使用
-
通過類來控制，可以把類添加到想要效果的元素上
-
-
修改Bootstrap 原來的樣式，注意權重問題
-
自己寫一個新的類名，寫樣式，覆蓋原來的
-
-
學好Bootstrap 的關鍵在于知道它定義了哪些樣式，以及這些樣式能實現什么樣的效果
布局容器
Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器，它提供了兩個作此用處的類
-
container類
-
響應式布局的容器 固定寬度
-
大屏 ( >=1200px) 寬度定為 1170px
-
中屏 ( >=992px) 寬度定為 970px
-
小屏 ( >=768px) 寬度定為 750px
-
超小屏 (100%)
-
-
container-fluid類
-
流式布局容器 百分百寬度
-
占據全部視口（viewport）的容器
-
Bootstrap柵格系統
柵格系統簡介
柵格系統英文為“grid systems”,也有人翻譯為“網格系統”，它是指將頁面布局劃分為等寬的列，然后通過列數 的定義來模塊化頁面布局。
-
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列
-
rem是把整個屏幕(window)分成多少等份，而柵格系統是把頁面分成等份，即把container分成12等份
-
Bootstrap里面container是固定的，但是在不同屏幕下，container的寬度不同，再把container分為12等份
柵格選項參數
柵格系統用于通過一系列的行（row）與列（column）的組合來創建頁面布局，內容就可以放入這些創建好的布局中
| .container 最大寬度 | 自動(100%) | 750px | 970px | 1170px |
| 類前綴 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列(column)數 | 12 | 12 | 12 | 12 |
-
按照不同屏幕劃分為1~12 等份
-
每一個元素占了幾份
-
-
行（row）必須放到container布局容器里
-
行（row）可以去除父容器作用15px的邊距
-
想實現列的平均劃分，需要給列添加類前綴
-
xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
-
-
列（column）大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列
-
每一列默認有左右15像素的padding
-
可以同時為一列指定多個設備的類名，以便劃分不同份數 例如 class="col-md-4 col-sm-6"
列嵌套
柵格系統內置的柵格系統將內容再次嵌套。簡單理解就是一個列內再分成若干份小列。可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內
-
列嵌套最好加1個行row，這樣可以取消父元素的padding值，而且高度自動和父級一樣高
列偏移
使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><!-- 一定不要忘記引入bootstrap 的樣式文件 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><title>Document</title><style>.row div {height: 50px;background-color: pink;}</style> </head><body><div class="container"><div class="row"><div class="col-md-3">左側</div><!-- 偏移的份數就是(12 - 兩個盒子的份數 = 6) --><div class="col-md-3 col-md-offset-6">右側</div></div><div class="row"><!-- 如果只有一個盒子，那么就偏移 = (12 - 8) /2 --><div class="col-md-8 col-md-offset-2">中間盒子</div></div></div> </body></html>列排序
通過使用 .col-md-push-(往右推)* 和 .col-md-pull-(往左拉)* 類就可以很容易的改變列（column）的順序
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><!-- 一定不要忘記引入bootstrap 的樣式文件 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><title>Document</title><style>.row div {height: 50px;background-color: pink;}</style> </head><body><div class="container"><div class="row"><div class="col-md-4 col-md-push-8">左側</div><div class="col-md-8 col-md-pull-4">右側</div></div></div> </body></html>響應式工具
為了加快對移動設備友好的頁面開發工作，利用媒體查詢功能，并使用這些工具類可以方便的針對不同設備展示 或隱藏頁面內容
| .hidden-xs | 隱藏 | 可見 | 可見 | 可見 |
| .hidden-sm | 可見 | 隱藏 | 可見 | 可見 |
| .hidden-md | 可見 | 可見 | 隱藏 | 可見 |
| .hidden-lg | 可見 | 可見 | 可見 | 隱藏 |
-
與之相反的是visible-xs visible-sm visible-md visible-lg是顯示某個頁面的內容
Bootstrap 其他（按鈕、表單、表格） 請參考Bootstrap文檔
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><!-- 一定不要忘記引入bootstrap 的樣式文件 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><title>Document</title><style>.row div {height: 300px;background-color: purple;}.row div:nth-child(3) {background-color: pink;}span {font-size: 50px;color: #fff;}</style> </head><body><div class="container"><div class="row"><div class="col-xs-3"><!-- 僅在大屏幕才顯示 --><span class="visible-lg">我會顯示哦</span></div><div class="col-xs-3">2</div><div class="col-xs-3 hidden-md hidden-xs">我會變魔術哦</div><div class="col-xs-3">4</div></div></div> </body></html>阿里百秀移動端首頁
技術選型
-
方案：響應式頁面開發方案
-
技術：bootstrap框架
-
設計圖： 本設計圖采用 1280px 設計尺寸
頁面布局分析
屏幕劃分分析
① 通過屏幕縮放發現，中屏幕和大屏幕布局是一致的。 因此列定義為 col-md- 就可以了，md 是大于等于970 以上的 ②通過屏幕縮放發現，小屏幕布局發生變化，因此需要為小屏幕根據需求改變布局 ③ 通過屏幕縮放發現， 超小屏幕布局又發生變化，因此需要為超小屏幕根據需求改變布局 ④ 策略： 先布局md以上的pc端布局，最后根據實際需求在修改小屏幕和超小屏幕的特殊布局樣式
container 寬度修改
因為本效果圖采取 1280的寬度， 而Bootstrap 里面 container寬度 最大為 1170px，因此需要手動改下container寬度
/* 修改container的最大寬度為 1280 (根據設計稿來走的) */@media screen and (min-width: 1280px) {.container {width: 1280px;} }輪播圖模塊
引入jquery的js文件和bootstrap的js文件
2. 復制結構進去
3. 把復制進去的盒子和里面的圖片的高和寬設置成與父盒子一致
4. 把下面的caption文字寫進去并修改樣式
5. 把mothods里面的定時播放js復制進去
vw/vh移動端布局
移動端布局主要使用flex布局，為了實現可以適配移動端，頁面元素的寬度和高度可以等比例縮放，需要溪東段適配有如下方案：
-
rem(市場比較常見)
-
需要不斷修改html文字大小
-
需要媒體查詢media
-
需要flexible.js
-
-
vw/vh(未來趨勢)
-
省去各種判斷和修改
-
如b站等
-
vw/vh簡介
-
是一個相對單位(類似于em和rem相對單位)
-
vw是viewport width 視口寬度單位
-
vh是viewport height 視口高度單位
-
-
相對視口的尺寸計算結果
-
1vw = 1/100視口寬度
-
1vh = 1/100視口高度
-
例如，當前屏幕視口是375像素，則1vw就是3.75像素，如果當前視口為414，則1vw就是4.14像素
-
-
與百分比有區別，百分比%是相對于父元素來說的，而vw和vh總是針對于當前視口來說的
vw/vh使用
-
元素單位直接使用新單位vw/vh即可
-
vw/vh是相對單位，所以不同視口(屏幕)下，寬高一起變化完成適配
-
還原設計稿：如果設計稿按照iPhone6/7/8來設計，有個盒子是50px*50px
-
美工是按照750px做的設計稿，做vw的時候是按照視口寬度來做的(iPhone6/7/8是375px)
-
Pxcook切換到'2x'模式，把它當做一個二倍圖，然后選'vw/vh'
-
那么1vw就是375/100=3.75px
-
盒子寬高50/3.75=13.3333vw
-
-
注意：
-
因為涉及到大量的除法，所以常搭配less使用
-
本質是根據視口寬度來等比例縮放頁面元素高度和寬度的，所以開發中使用vw就基本夠了，vh很少使用
-
兼容性：網站 Can I use... Support tables for HTML5, CSS3, etc
-
-
Vscode插件：px2vw
-
點設置圖標，'拓展設置'，修改design width至我們需要的數值(這里是375)
-
移動端網頁特效(JavaScript)
觸屏事件
觸屏事件概述
移動端瀏覽器兼容性較好，我們不需要考慮以前 JS 的兼容性問題，可以放心的使用原生 JS 書寫效果，但是移動 端也有自己獨特的地方。比如觸屏事件 touch（也稱觸摸事件），Android 和 IOS 都有
-
touch 對象代表一個觸摸點。觸摸點可能是一根手指，也可能是一根觸摸筆。觸屏事件可響應用戶手指（或觸控筆）對屏幕或者觸控板操作
| touchstart | 手指觸摸到一個DOM元素時觸發 |
| touchmove | 手指在一個DOM元素上滑動時觸發 |
| touchend | 手指從一個DOM元素上移開時觸發 |
觸摸事件對象（TouchEvent）
TouchEvent 是一類描述手指在觸摸平面（觸摸屏、觸摸板等）的狀態變化的事件。這類事件用于描述一個或多 個觸點，使開發者可以檢測觸點的移動，觸點的增加和減少，等等
-
touchstart、touchmove、touchend 三個事件都會各自有事件對象
| touches | 正在觸摸屏幕的所有手指的一個列表 |
| targetTouches | 正在觸摸當前DOM元素的手指列表(如果偵聽的是一個DOM元素，與touches是一樣的) |
| changedTouches | 手指狀態發生了改變的列表，從無到有，或從有到無變化 |
因為平時都是給元素注冊觸摸事件，所以重點記住 targetTocuhes
<style>div {width: 100px;height: 100px;background-color: pink;}</style> </head><body><div></div><script>// 觸摸事件對象// 1. 獲取元素// 2. 手指觸摸DOM元素事件var div = document.querySelector('div');div.addEventListener('touchstart', function(e) {// console.log(e);// touches 正在觸摸屏幕的所有手指的列表 // targetTouches 正在觸摸當前DOM元素的手指列表// 如果偵聽的是一個DOM元素，他們兩個是一樣的// changedTouches 手指狀態發生了改變的列表 從無到有 或者 從有到無// 因為一般都是觸摸元素，所以最經常使用的是 targetTouchesconsole.log(e.targetTouches[0]);// targetTouches[0] 就可以得到正在觸摸dom元素的第一個手指的相關信息，比如手指的坐標等});// 3. 手指在DOM元素身上移動事件div.addEventListener('touchmove', function() {});// 4. 手指離開DOM元素事件div.addEventListener('touchend', function(e) {// console.log(e);// 當手指離開屏幕的時候，就沒有了 touches 和 targetTouches 列表// 但是會有 changedTouches});</script> </body>移動端拖動元素
touchstart、touchmove、touchend 可以實現拖動元素，但是拖動元素需要當前手指的坐標值，可以使用 targetTouches[0] 里面的pageX和pageY
-
移動端拖動的原理： 手指移動中，計算出手指移動的距離。然后用盒子原來的位置 + 手指移動的距離
-
手指移動的距離： 手指滑動中的位置 減 手指剛開始觸摸的位置
-
拖動元素三步曲： （1） 觸摸元素 touchstart： 獲取手指初始坐標，同時獲得盒子原來的位置 （2） 移動手指 touchmove： 計算手指的滑動距離，并且移動盒子 （3） 離開手指 touchend
-
注意： 手指移動也會觸發滾動屏幕所以這里要阻止默認的屏幕滾動e.preventDefault();
classList 屬性
classList屬性是HTML5新增的一個屬性，返回元素的類名。但是ie10以上版本支持。該屬性用于在元素中添加，移除及切換 CSS 類
-
查看元素所有類名：console.log(element.classList);
-
查看元素的第一個類名：console.log(element.classList[0]);
-
添加類：element.classList.add(’類名’); 在后面追加類名，不會覆蓋以前的類名
-
移除類：element.classList.remove(’類名’);
-
切換類：element.classList.toggle(’類名’);原來有這個類名，就刪掉；原來沒有這個類名，就加上
-
注意：以上方法里面，所有類名都不帶點
移動端輪播圖
移動端輪播圖功能和基本PC端一致。
-
可以自動播放圖片
-
手指可以拖動播放輪播圖
自動播放功能
-
開啟定時器
-
移動端移動，可以使用translate移動
-
想要圖片優雅地移動，要添加過渡效果(移動端不需要考慮兼容性，所以用css3的transform來做)
-
和pc端輪播圖相同，先復制第一張圖片到最后一個
-
移動端手指右滑會劃出東西，所以也要把最后一張圖片復制到第一個
自動播放功能-無縫滾動
-
注意，判斷條件是要等圖片滾動完畢再去判斷，就是過渡完成后判斷
-
此時需要添加檢測過渡完成事件transitionend
-
-
判斷條件： 如果索引號等于3說明走到最后一張圖片，此時索引號要復原為 0
-
此時圖片去掉過渡效果，然后移動
-
-
如果索引號小于0， 說明是倒著走， 索引號等于2
-
此時圖片，去掉過渡效果，然后移動
-
小圓點跟隨變化效果
-
把ol里面li帶有current類名的選出來去掉類名(remove)
-
讓當前索引號的小li 加上 current (add)
-
但是，是等著過渡結束之后變化，所以這個寫到 transitionend事件里面
手指滑動輪播圖
-
本質就是ul跟隨手指移動，簡單說就是移動端拖動元素
-
觸摸元素 touchstart： 獲取手指初始坐標
-
移動手指 touchmove： 計算手指的滑動距離，并且移動盒子
-
離開手指 touchend: 根據滑動的距離分不同的情況
-
如果移動距離小于 某個像素(這里是50px) 就回彈原來位置
-
如果移動距離大于某個像素就上一張下一張滑動。
-
滑動也分為左滑動和右滑動 判斷的標準是 移動距離正負 如果是負值就是左滑 反之右滑
-
如果是左滑 就播放下一張 （index++）
-
如果是右滑 就播放上一張 (index--)
click 延時解決方案
移動端 click 事件會有 300ms 的延時，原因是移動端屏幕雙擊會縮放(double tap to zoom) 頁面。
-
解決方案：
-
禁用縮放。 瀏覽器禁用默認的雙擊縮放行為并且去掉 300ms 的點擊延遲：<meta name="viewport" content="user-scalable=no">
-
利用touch事件自己封裝這個事件解決 300ms 延遲
-
原理：
-
當手指觸摸屏幕，記錄當前觸摸時間
-
當手指離開屏幕， 用離開的時間減去觸摸的時間
-
如果時間小于150ms，并且沒有滑動過屏幕， 那么我們就定義為點擊
-
-
-
使用插件： fastclick 插件解決 300ms 延遲
移動端常用開發插件
JS 插件是js文件，它遵循一定規范編寫，方便程序展示效果，擁有特定功能且方便調用。如輪播圖和瀑布流插件。
-
特點：它一般是為了解決某個問題而專門存在，其功能單一，并且比較小。
-
以前寫的animate.js 也算一個最簡單的插件
-
-
使用：
-
引入 js 插件文件
-
按照規定語法使用
fastclick插件
解決 300ms 延遲。 使用延時
-
GitHub官網地址： GitHub - ftlabs/fastclick: Polyfill to remove click delays on browsers with touch UIs
-
引入
-
在body里使用
Swiper 插件
-
中文官網地址： Swiper中文網-輪播圖幻燈片js插件,H5頁面前端開發
-
使用：
-
下載Swiper壓縮包
-
引入css文件和js文件(帶min的是壓縮過的，一般引入這個即可)(先引入swiper的js再引入自己的js)
-
打開Swiper演示，找到想要的輪播圖樣式，在下載的文件里的demos文件里找到，打開html文件
-
查看網頁源代碼，復制body里的結構部分到需要的地方，注意不要更改里面的結構和類名
-
把里面的“silde1”等文字替換成我們所需的img
-
繼續復制html文件里style里有關silde的css樣式部分到自己的index.css里
-
繼續復制html文件里body里面的script部分到自己的index.js里
-
自行修改css樣式或根據官網API文檔可以按照需求修改js的參數
-
zy.media.js 移動端視頻插件
-
H5提供了 video 標簽，但是瀏覽器的支持情況不同。
-
不同的視頻格式文件，可以通過source 解決。
-
但是外觀樣式，還有暫停，播放，全屏等功能只能自己寫代碼解決。這個時候可以使用插件方式來制作。
其他移動端常見插件
superslide： SuperSlide | TouchSlide 官方網站 大話主席
iscroll： GitHub - cubiq/iscroll: Smooth scrolling for the web
插件的使用總結
確認插件實現的功能
去官網查看使用說明
下載插件
打開demo實例文件，查看需要引入的相關文件，并且引入
復制demo實例文件中的結構html，樣式css以及js代碼
移動端常用開發框架
框架，顧名思義就是一套架構，它會基于自身的特點向用戶提供一套較為完整的解決方案。框架的控制權在框架 本身，使用者要按照框架所規定的某種規范進行開發。
-
前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能開發PC端，也能開發移動端
-
前端常用的移動端插件有swiper、superslide、iscroll等。
-
插件一般是為了解決某個問題而專門存在，其功能單一，并且比較小。
-
框架： 大而全，一整套解決方案
-
插件： 小而專一，某個功能的解決方案
Bootstrap(見響應式布局里)
Bootstrap 是一個簡潔、直觀、強悍的前端開發框架，它讓 web 開發更迅速、簡單。它能開發PC端，也能開發移動端
-
Bootstrap JS插件使用步驟：
引入相關js 文件
復制HTML 結構
修改對應樣式
修改相應JS 參數
本地存儲
隨著互聯網的快速發展，基于網頁的應用越來越普遍，同時也變的越來越復雜，為了滿足各種各樣的需求，會經 常性在本地存儲大量的數據，HTML5規范提出了相關解決方案
-
本地存儲特性
-
數據存儲在用戶瀏覽器中
-
設置、讀取方便、甚至頁面刷新不丟失數據
-
容量較大，sessionStorage約5M、localStorage約20M
-
只能存儲字符串，可以將對象JSON.stringify() 編碼后存儲
-
window.sessionStorage
-
生命周期為關閉瀏覽器窗口
-
在同一個窗口(頁面)下數據可以共享
-
以鍵值對的形式存儲使用
-
查看：f12，點擊"application"，"Storage"，"Session Storage"
存儲數據：sessionStorage.setItem(key, value);
獲取數據：sessionStorage.getItem(key);
刪除數據：sessionStorage.removeItem(key);
刪除所有數據：sessionStorage.clear();
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><input type="text"><button class="set">存儲數據</button><button class="get">獲取數據</button><button class="remove">刪除數據</button><button class="del">清空所有數據</button><script>console.log(localStorage.getItem('username'));var ipt = document.querySelector('input');var set = document.querySelector('.set');var get = document.querySelector('.get');var remove = document.querySelector('.remove');var del = document.querySelector('.del');set.addEventListener('click', function() {// 點擊了之后，就可以把表單里面的值存儲起來var val = ipt.value;sessionStorage.setItem('uname', val);sessionStorage.setItem('pwd', val);});get.addEventListener('click', function() {// 點擊了之后，就可以把表單里面的值獲取過來console.log(sessionStorage.getItem('uname'));});remove.addEventListener('click', function() {// sessionStorage.removeItem('uname');});del.addEventListener('click', function() {// 點擊了之后，清除所有的sessionStorage.clear();});</script> </body></html>window.localStorage
-
生命周期永久生效，除非手動刪除，否則關閉頁面也會存在
-
可以多窗口（頁面）共享（同一瀏覽器可以共享）
-
以鍵值對的形式存儲使用
存儲數據：localStorage.setItem(key, value)
獲取數據：localStorage.getItem(key)
刪除數據：localStorage.removeItem(key)
刪除所有數據：localStorage.clear()
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><input type="text"><button class="set">存儲數據</button><button class="get">獲取數據</button><button class="remove">刪除數據</button><button class="del">清空所有數據</button><script>var ipt = document.querySelector('input');var set = document.querySelector('.set');var get = document.querySelector('.get');var remove = document.querySelector('.remove');var del = document.querySelector('.del');set.addEventListener('click', function() {var val = ipt.value;localStorage.setItem('username', val);})get.addEventListener('click', function() {console.log(localStorage.getItem('username'));})remove.addEventListener('click', function() {localStorage.removeItem('username');})del.addEventListener('click', function() {localStorage.clear();})</script> </body></html>記住用戶名
如果勾選記住用戶名， 下次用戶打開瀏覽器，就在文本框里面自動顯示上次登錄的用戶名
① 把數據存起來，用到本地存儲 ② 關閉頁面，也可以顯示用戶名，所以用到localStorage ③ 打開頁面，先判斷是否有這個用戶名，如果有，就在表單里面顯示用戶名，并且勾選復選框 ④ 當復選框發生改變的時候 change事件 ⑤ 如果勾選，就存儲，否則就移除
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><input type="text" id="username"> <input type="checkbox" name="" id="remember"> 記住用戶名<script>var username = document.querySelector('#username');var remember = document.querySelector('#remember');if (localStorage.getItem('username')) {username.value = localStorage.getItem('username');remember.checked = true;}remember.addEventListener('change', function() {if (this.checked) {localStorage.setItem('username', username.value);} else {localStorage.removeItem('username');}})</script> </body>總結
以上是生活随笔為你收集整理的前端学习笔记 - 移动端Web开发的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 硅谷课堂笔记（中）
- 下一篇： linux centos 网易云音乐,C