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