重學前端之移動端網(wǎng)頁開發(fā)
時間：2023-05-27 22:30:01 | 來源：網(wǎng)站運營
時間：2023-05-27 22:30:01 來源：網(wǎng)站運營
重學前端之移動端網(wǎng)頁開發(fā)：前端學習路徑及基礎(chǔ)學習教程目錄
一、移動端開發(fā)基礎(chǔ) 1、移動web開發(fā)基礎(chǔ) 瀏覽器現(xiàn)狀
PC端常見瀏覽器 谷歌瀏覽器、360瀏覽器、火狐瀏覽器、QQ瀏覽器、百度瀏覽器、搜狗瀏覽器、IE瀏覽器
移動端常見瀏覽器 UC瀏覽器、QQ瀏覽器、谷歌瀏覽器、Opera瀏覽器、百度手機瀏覽器、搜狗手機瀏覽器、獵豹瀏覽器，以及其他手機自帶瀏覽器。
國內(nèi)的UC和QQ、百度等手機瀏覽器都是根據(jù)webkit修改過來的內(nèi)核，國內(nèi)沒有自主研發(fā)的內(nèi)核，就像國內(nèi)的手機操作系統(tǒng)都是基于Android修改開發(fā)一樣。
總結(jié)：兼容移動端主流瀏覽器，處理webkit內(nèi)核瀏覽器即可。
手機屏幕現(xiàn)狀
移動端設(shè)備屏幕尺寸非常多，碎片化嚴重。
Android設(shè)備有多種分辨率：480*800,480*854,540*960,720*1280,1080*1920等，還有傳說中的2K，4K屏。
近年來iphone的碎片化也加劇了，其設(shè)備的主要分辨率有：640*960，640*1136，750*1334，1242*2280等。
我們開發(fā)中常用的尺寸單位是px。
常見移動端屏幕尺寸
移動端調(diào)試方法
Chrome DevTools（谷歌瀏覽器）的模擬手機調(diào)試
搭建本地web服務(wù)器，手機和服務(wù)器一個局域網(wǎng)內(nèi)，通過手機訪問服務(wù)器
使用外網(wǎng)服務(wù)，直接IP或域名訪問
總結(jié)
移動端瀏覽器主要對webkit內(nèi)核進行兼容
現(xiàn)在開發(fā)的移動端主要針對手機端開發(fā)
移動端分辨率和屏幕尺寸大小不一，主要關(guān)注開發(fā)尺寸 用谷歌瀏覽器模擬手機界面以及調(diào)試
2、視口 視口（viewport）就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域。
視口可以分為布局視口、視覺視口和理想視口。
布局視口layout viewport
一般移動設(shè)備的瀏覽器都默認設(shè)置了一個布局視口，用于解決早期的PC端頁面在手機上顯示的問題。
IOS,Android基本都將這個視口分辨率設(shè)置為980px，所以PC上的網(wǎng)頁大多都能在手機上呈現(xiàn)，只不過元素看上去很小，一般默認可以通過手動縮放網(wǎng)頁。
視覺視口visual viewport
它是用戶正在看到的網(wǎng)站的區(qū)域。 我們可以通過縮放去操作視覺視口，但不會影響布局視口，布局視口仍保持原來的寬度。
理想視口ideal viewport
為了使網(wǎng)站在移動端有最理想的瀏覽和閱讀寬度而設(shè)定
理想視口，對設(shè)備來講，是最理想的視口尺寸
需要手動填寫<meta>視口標簽通知瀏覽器操作
<meta>視口標簽的主要目的：布局視口的寬度應(yīng)該與理想視口的寬度一致，簡單理解就是設(shè)備有多寬，我們的布局視口就多寬。
<meta>視口標簽
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> 標準的viewport參數(shù)設(shè)置
視口寬度與設(shè)備保持一致 視口的默認縮放比例1.0 不允許用戶自行縮放
最大允許的縮放比例1.0 最小允許的縮放比例1.0
總結(jié)
視口就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域 視口分為布局視口，視覺視口和理想視口
移動端布局想要的是理想視口就是手機屏幕有多寬，我們的布局視口就有多寬 想要理想視口，需要給移動端頁面添加<meta>視口標簽
3、物理像素和物理像素比 物理像素點指的是屏幕顯示的最小顆粒，是物理真實存在的。這是廠商在出廠時就設(shè)置好了，比如蘋果6、7、8是750*1334
我們開發(fā)時候的1px不是一定等于1個物理像素的
PC端頁面，1個px等于1個物理像素，但是移動端就不盡相同
一個px的能顯示的物理像素點的個數(shù)，稱為物理像素比或屏幕像素比
物理像素和物理像素比
PC端和早前的手機屏幕/普通手機屏幕：1CSS像素=1物理像素
Retina（視網(wǎng)膜屏幕）是一種顯示技術(shù)，可以將更多的物理像素點壓縮至一塊屏幕里， 從而達到更高的分辨率，并提高屏幕顯示的細膩程度。
4、二倍圖
多倍圖
對于一張50px*50px的圖片，在手機Retina屏中打開，按照物理像素比會放大倍數(shù)，這樣會造成圖片模糊。
在標準的viewport設(shè)置中，使用倍圖來提高圖片質(zhì)量，解決在高清設(shè)備中的模糊問題。
通常使用二倍圖，因為iphone6/7/8的影響，但是現(xiàn)在還存在3倍圖4倍圖的情況，這個看實際開發(fā)公司需求
背景圖也需要用高倍圖，注意縮放問題，background-size
解決方法：使用本身是100*100的圖片替換原來50*50的圖片，設(shè)置圖片尺寸為50*50
//圖片本身是100px*100px img{width:50px;height:50px;} .box{background-size:50px 50px} 多倍圖切圖 @3X 3倍圖 @2X 2倍圖 @1X 1倍原圖
5、移動端開發(fā)選擇 移動端主流方案
單獨制作移動端頁面（主流）
京東商城手機版
淘寶觸屏版
蘇寧易購手機版
攜程網(wǎng)手機版 等
響應(yīng)式頁面兼容移動端（其次）
三星手機官網(wǎng) 等
單獨制作移動端頁面（主流）
通常情況下，網(wǎng)址域名前加m（mobile）可以打開移動端。通過判斷設(shè)備，如果是移動設(shè)備打開，則跳到移動端頁面。
響應(yīng)式頁面兼容移動端（其次）
響應(yīng)式網(wǎng)站：即PC和移動端共用一套網(wǎng)站，只不過在不同寬度的屏幕下，樣式會自動適配。 三星電子官網(wǎng):
http://www.samsung.com/cn/，通過判斷屏幕寬度來改變樣式，以適應(yīng)不同終端。
缺點：制作麻煩，需要花很大精力去調(diào)兼容性問題。
6、移動端常見問題解決方案 瀏覽器
移動端瀏覽器基本以webkit內(nèi)核為主，因此我們就考慮webkit兼容性問題。 可以放心使用html5的標簽和CSS3樣式。 瀏覽器的私有前綴只需要考慮添加-webkit-即可。
CSS初始化normalize.css
移動端CSS初始化推薦使用normalize.css。是一個可以定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一，是一種現(xiàn)代的、為HTML5準備的優(yōu)質(zhì)替代方案。
優(yōu)點： 保護了有價值的默認值 修復(fù)了瀏覽器的bug，解決了瀏覽器的不一致的默認樣式 normalize.css是模塊化的，提高了易用性 normalize.css擁有詳細的文檔
官網(wǎng)地址：
http://necolas.github.io/normalize.css/ CSS3盒子模型box-sizing
傳統(tǒng)模式寬度計算：盒子的寬度=CSS中設(shè)置的width+border+padding
CSS3盒子模型：盒子的寬度=CSS中設(shè)置的寬度width里面包含了border和padding 也就是說，CSS3中的盒子模型，padding和border不會撐大盒子。
CSS3盒子模型 box-sizing:border-box; 傳統(tǒng)盒子模型 box-sizing:content-box; 特殊樣式 //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;} 7、移動端技術(shù)選型 單獨制作移動端頁面（主流）
流式布局（百分比布局）
flex彈性布局（強烈推薦）
less+rem+媒體查詢布局 混合布局
響應(yīng)式頁面兼容移動端（其次） 媒體查詢 bootstrap
二、流式布局-京東項目1、流式布局原理 流式布局（百分比布局）
流式布局，就是百分比布局，也稱非固定像素布局。 通過將盒子的寬度設(shè)置成百分比，從而根據(jù)屏幕的寬度來進行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。 流式布局方式是移動web開發(fā)使用的比較常見的布局方式。
<style> section{width:100%;height:100px;background:pink} div{float:left;width:50%; height:80px;border:10px solid #0f0f;box-sizing: border-box;} </style> <section> <div>1</div> <div>2</div> </section> 注意事項 需要定義頁面的最大和最小支持寬度。 max-width最大寬度（max-height最大高度） min-width最小寬度（min-height最小高度）
2、京東移動端首頁準備工作 地址：
http://m.jd.com 方案：采取單獨制作移動頁面方案
技術(shù)：布局采取流式布局 搭建相關(guān)文件夾結(jié)構(gòu)
設(shè)置視口標簽以及引入初始化樣式
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum=1.0,minimum=1.0"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/index.css"> 常用初始化樣式 body{min-width:320px;max-width:540px;margin:0 auto;background:#fff;font:14px/1.5 "-apple-system","Helvetica","sans-serif";color:#666} 特殊樣式 /*清除點擊高亮*/ *{-webkit-tap-highlight-color: transparent;} /*ios下可以給按鈕和輸入框自定義樣式*/ input{-webkit-appearance: none;} /*禁用長按頁面時的彈出菜單*/ img,a{-webkit-touch-callout: none;} 3、京東首頁-tips區(qū)域布局 4、京東首頁-tips區(qū)域內(nèi)容填充 5、京東首頁-搜索框布局 6、京東首頁-搜索框內(nèi)容填充 7、二倍精靈圖做法 在fireworks里面把精靈圖等比例縮放為原來的一半 之后根據(jù)新的大小，測量坐標 background-size要寫成精靈圖原來寬度的一半
8、京東首頁-焦點圖布局 9、線形漸變背景 在MDN文檔里搜索相關(guān)用法 developer.mozilla.org/zh-CN/ 搜索框里輸入相關(guān)關(guān)鍵詞，查找用法
10、京東首頁-滑動輪播圖布局 圖片格式
DPG圖片壓縮技術(shù)
京東自主研發(fā)推出DPG圖片壓縮技術(shù)，經(jīng)測試該技術(shù)，可直接節(jié)省用戶近50%的瀏覽器流量，極大的提升了用戶的網(wǎng)頁打開速度。通過兼容jpg，實現(xiàn)全平臺、全部瀏覽器的兼容支持，經(jīng)過內(nèi)部和外部上萬張圖片的人眼瀏覽測試后發(fā)現(xiàn)，壓縮后的圖片和webp的清晰度對比沒有差距
webp圖片格式
谷歌開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有jpg的2/3，并能節(jié)省大量的服務(wù)器寬帶資源和數(shù)據(jù)空間。
11、京東首頁-優(yōu)惠活動布局 12、京東首頁-超市導航布局 13、京東首頁-新人專享 14、京東移動端首頁-結(jié)束 三、flex布局-攜程網(wǎng)項目 1、flex布局體驗 傳統(tǒng)布局
兼容性好 布局繁瑣 局限性，不能在移動端很好的布局
flex布局
操作方便，布局極為簡單，移動端應(yīng)用廣泛 PC端瀏覽器支持情況差 IE11或更低版本，不支持或部分支持
<style> section{width:800px;height:100px;background:pink;display:flex;justify-content: space-around;;} span{width:150px; height:80px;background:#666;margin-right:10px;flex:1;} </style> <section> <span>1</span><span>2</span><span>3</span> </section> 2、flex布局原理 flex是flexible Box的縮寫，意為“彈性布局”，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為flex布局。 當為父盒子設(shè)為flex布局以后，子元素的float，clear和vertical-align屬性將失效。 伸縮布局=彈性布局=伸縮盒布局=彈性盒布局=flex布局 采用flex布局的元素，稱為flex容器（flex container），簡稱”容器“。它的所有子元素自動成為容器成員，稱為flex項目（flex item），簡稱”項目“。
flex布局原理：就是通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式。
flex布局父項常見屬性
以下6個屬性是對父元素設(shè)置的
flex-direction:設(shè)置主軸的方向
justify-content:設(shè)置主軸上的子元素排列方式
flex-wrap:設(shè)置子元素是否換行
align-content:設(shè)置側(cè)軸上的子元素的排列方式（多行）
align-items:設(shè)置側(cè)軸上的子元素排列方式（單行）
flex-flow:復(fù)合屬性，相當于同時設(shè)置了flex-direction,flex-wrap
3、flex-direction 設(shè)置父容器主軸方向 主軸與側(cè)軸 在flex布局中，是分為主軸和側(cè)軸兩個方向， 同時的叫法有：行和列，x軸和y軸 默認的主軸方向是x軸方向，水平向右 默認的側(cè)軸方向是y軸方向，垂直向下
flex-direction屬性決定主軸的方向（即項目的排列方向）
注意：主軸和側(cè)軸是會變化的，就看flex-direction設(shè)置誰為主軸，剩下的就是側(cè)軸。而我們的子元素是跟著主軸來排列的。
4、justify-content 設(shè)置主軸上子項目對齊 justify-content 屬性定義了項目在主軸上的對齊方式 注意：使用這個屬性之前一定要確定好主軸是哪個
5、flex-wrap設(shè)置子項目是否換行 默認情況下，項目都排在一條線（軸線）上。 flex-wrap屬性定義flex布局中默認是不換行。
6、align-items 設(shè)置側(cè)軸單行子項目對齊 該屬性是控制子項在側(cè)軸（默認是Y軸）上的排列方式 在子項為單項（單行）的時候使用
7、align-content設(shè)置側(cè)軸多行子項目對齊 設(shè)置子項在側(cè)軸上的排列方式，并且只能用于子項出現(xiàn)換行的情況（多行），在單行下是沒有效果的。
align-content和align-items區(qū)別
align-items適用于單行情況下，只有上對齊、下對齊、居中和拉伸 align-content適用于多行情況下（單行無效），可以設(shè)置上對齊、下對齊、居中、拉伸以及平均分配剩余空間等屬性值。 總結(jié)就是單行找align-items，多行找align-content
8、flex-flow 復(fù)合屬性 flex-flow屬性是flex-direction和flex-wrap屬性的復(fù)合屬性
flex-flow:row nowrap;
9、flex 設(shè)置子項的份數(shù) flex布局子項常見屬性
flex子項目占的份數(shù)
align-self控制子項自己在側(cè)軸的排列方式
order屬性定義子項的排列順序（前后順序）
flex屬性 flex屬性定義子項目分配父盒子的剩余空間，用flex來表示占多少份數(shù)。 屬性值為數(shù)字，數(shù)字為1，表示占總份數(shù)中的1份。默認值為0. .item{flex:<number>;/*default 0*/}
10、子項的align-self和order屬性 align-self控制子項自己在側(cè)軸上的排列方式 align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。
默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。 span:nth-child(2){align-self:flex-end;}
order屬性定義項目的排列順序 數(shù)值越小，排列越靠前，默認為0，想往前移可以為負，想往最后，比其他都大 注意：和z-index不一樣。
item{order:<number>;}
11、攜程網(wǎng)首頁-初始設(shè)置 官網(wǎng)：
http://m.ctrip.com 方案：單獨制作移動頁面
技術(shù)：布局采取flex布局 搭建文件夾結(jié)構(gòu)
初始的頁面結(jié)構(gòu)和CSS樣式
12、攜程網(wǎng)首頁-模塊分析和命名 常見模塊命名
13、攜程網(wǎng)首頁-搜索框布局 14、攜程網(wǎng)首頁-搜索框內(nèi)容填充 15、攜程網(wǎng)首頁-login登錄內(nèi)容 常見flex布局思路
16、攜程網(wǎng)首頁-焦點圖布局 17、攜程網(wǎng)首頁-local-nav布局 18、攜程網(wǎng)首頁-nav公共結(jié)構(gòu)布局 19、攜程網(wǎng)首頁-nav特殊結(jié)構(gòu)布局 20、攜程網(wǎng)首頁-subnav-evtry布局 21、攜程網(wǎng)首頁-熱門活動頂部布局 22、攜程網(wǎng)首頁-熱鬧活動底部布局 23、攜程網(wǎng)首頁-總結(jié) 1、flex布局原理：通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式。
2、flex布局常用父項、子項屬性。
四、rem布局-蘇寧項目 1、rem適配布局導讀 2、rem單位 思考 1、頁面布局文字能否隨著屏幕大小變化而變化？
2、流式布局和flex布局主要針對于寬度布局，那高度如何設(shè)置?
3、怎樣讓屏幕發(fā)生變化的時候元素高度和寬度等比例縮放？
rem單位 rem(root em)是一個相對單位，類似于em，em是父元素字體大小。
不同的是rem的基準是相對于<html>元素的字體大小。 比如，根元素（html）設(shè)置font-size:12px;非根元素設(shè)置width:2rem; 轉(zhuǎn)換成px表示就是24px。
rem的優(yōu)勢：父元素文字大小可能不一致，但是整個頁面只有一個<html>，可以很好的來控制整個頁面的元素大小比例。
<style> *{margin:0;padding:0;} html{font-size:20px} .box{width:10rem;height:10rem;background:pink;} .box1{width:5rem;height:5rem;background:skyblue} </style> <div class="box"> <div class="box1"></div> </div> 3、媒體查詢書寫語法 媒體查詢是CSS3新增語法。 使用@media查詢，可以針對不同的媒體類型定義不同的樣式。 @media可以針對不同的屏幕尺寸設(shè)置不同的樣式。 重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬高重新渲染 目前很多蘋果手機、安卓手機，平板等設(shè)置都可以用媒體查詢
語法規(guī)范
用@media開頭 注意@符號 mediatype媒體類型 關(guān)鍵字 and not only media feature媒體特性，必須有小括號包含
@media mediatype and|not|only (media feature){csscode}
mediatype媒體類型 將不同的終端設(shè)備劃分成不同的類型，稱為媒體類型。
關(guān)鍵字
關(guān)鍵字將媒體類型或多個媒體特性連接到一起做為媒體查詢的條件。
and:可以將多個媒體特性連接到一起，相當于“且”的意思。
not:排除某個媒體類型，相當于“非”的意思，可以省略。
or:可以測試多個媒體查詢的條件，只要有一個條件成立，就執(zhí)行，"或“的意思。
only:指定某個特定的媒體類型，可以省略。 媒體特性 每種媒體類型都具體各自不同的特性，根據(jù)不同媒體類型的媒體特性設(shè)置不同的展示風格。
先介紹三個。 注：要加小括號進行包含。
@media screen and (min-width:800px){ body{background:pink} } @media screen and (max-width:600px){ body{background:forestgreen} } 4、媒體查詢案例-背景變色 案例：根據(jù)頁面寬度改變背景顏色
實現(xiàn)思路：
1、按照從大到小的或者從小到大的思路
2、注意我們有最大值max-width和最小值min-width都是包含等于的
3、當屏幕小于540像素，背景顏色為藍色（x<=539）
4、當屏幕大于等于540像素，并且小于等于969像素的時候背景顏色為綠色（540=<x<=969）
5、當屏幕大于等于970像素的時候，背景顏色為紅色（x>=970） 媒體查詢從小到大優(yōu)勢代碼分析
5、媒體查詢和rem實現(xiàn)元素變化 媒體查詢+rem實現(xiàn)元素動態(tài)大小變化 rem單位是跟著<html>來走的，有了rem頁面元素可以設(shè)置不同大小尺寸
媒體查詢可以根據(jù)不同設(shè)備寬度來修改樣式 媒體查詢+rem就可以實現(xiàn)不同設(shè)備寬度，實現(xiàn)頁面元素大小的動態(tài)變化
<style> *{margin:0;padding:0;} html{font-size:20px;} @media screen and (min-width:639px) { html{font-size:30px;} } .box{width:100%;height:3rem;line-height:3rem;background:skyblue;font-size:1.5rem;color:#fff;text-align:center;font-weight: bold;} </style> <div class="box">購物車</div> 6、媒體查詢引入資源方法 當樣式比較繁多的時候，我們可以針對不同的媒體使用不同的stylesheets（樣式表）. 原理，就是直接在<link>中判斷設(shè)備的尺寸，然后引用不同的css文件。 1、語法規(guī)范 <link rel="stylesheet" media="mediatype and | not | only (media feature)" href="mystylesheet.css"> 2、示例 <link rel="stylesheet" href="style.css" media="screen and (min-width:400px)"> <style> *{margin:0;padding:0;} @media screen and (min-width:320px) { html{font-size:30px;} div{width:100%;height:100px;} .box1{background:pink} .box2{background:skyblue} } @media screen and (min-width:640px) { html{font-size:30px;} div{float:left;width:50%;height:100px;} .box1{background:pink} .box2{background:skyblue} } </style> <div class="box1">1</div> <div class="box2">2</div>
7、CSS的弊端 CSS是一門非程序式語言，沒有變量、函數(shù)、SCOPE（作用域）等概念 CSS需要書寫大量看似沒有邏輯的代碼，CSS冗余度是比較高的。 不方便維護及擴展，不利于復(fù)用。 CSS沒有很好的計算能力。 非前端工程師，很難寫出組織良好且易于維護的CSS代碼。
8、LESS簡介和安裝 Less介紹
Less（Leaner Style Sheets的縮寫）是一門CSS擴展語言，也稱為CSS預(yù)處理器。 做為CSS的一種形式的擴展，它并沒有減少CSS的功能，而是在現(xiàn)有的CSS語法上，為CSS加入程序式語言的特性。 它在CSS的語法基礎(chǔ)之上，引入了變量，Mixin（混入），運算以及函數(shù)等功能，大大簡化了CSS的編寫，并且降低了CSS的維護成本，就像它的名稱，Less可以讓我們用更少的代碼做更多的事情。
Less中文網(wǎng)址：
http://lesscss.cn/ 常見的CSS預(yù)處理器：Sass,Less,Stylus
Less是一門CSS預(yù)處理語言，它擴展了CSS的動態(tài)特性。
Less安裝
1、安裝nodejs，可選擇最新版本，網(wǎng)址：
http://nodejs.org/en/download/ 2、檢查是否安裝成功，使用cmd命令，輸入 node -v查看版本
3、基于node.js在線安裝Less，使用cmd命令 npm install -g less即可
4、檢查是否安裝成功，使用cmd命令lessc -v查看版本即可
9、LESS變量 Less使用
首先新建一個后綴名為.less的文件，在這個.less文件里面書寫Less語句。
Less變量 Less編譯 Less嵌套 Less運算 Less變量
變量是指沒有固定的值，可以動態(tài)改變的。因為我們CSS中的一些顏色和數(shù)值等經(jīng)常會變化。 @變量名:值;
1、變量命名規(guī)范 必須有@為前綴 不能包含特殊字符 不能以數(shù)字開頭 大小寫敏感 @color:pink;
2、變量使用規(guī)范 body{color:@color;} a:hover{color:@color;}
10、LESS編譯和VS CODE 插件 Less編譯
本質(zhì)上，Less包含一套自定義的語法及一個解析器，用戶根據(jù)這些語法定義自己的樣式規(guī)則，這些規(guī)則最終會通過解析器，編譯生成對應(yīng)的CSS文件。 所以，我們需要把.less文件，編譯生成為.css文件，這樣HTML頁面才能用。
推薦方法（nodejs）：在當前文件夾，使用CMD命令lessc style.less>style.css
VScode Less插件
Easy LESS插件用來把less文件編譯為css文件 安裝完插件，重新加載一下vscode 只要保持一下Less文件，會自動生成CSS文件。
11、LESS嵌套 我們經(jīng)常用的選擇器
#header .logo{width:300px;}
#header{ .logo{width:300px;} }
如果遇見（交集|偽類|偽元素選擇器）
內(nèi)層選擇器的前面沒有&符號，則它被解析為父選擇器的后代。 如果有&符合，它就被解析為父元素自身或父元素的偽類。
我們常用的選擇器 a:hover{color:red}
less嵌套寫法 a{ &:hover{color:red} }
.header{ width:200px; height:200px; background:pink; .logo{ width:100px; height:100px; background:green; } } .nav{ width:200px; a{ display:block; &:hover{color:pink} &.box{background:yellowgreen;} } } 12、LESS運算 任何數(shù)字、顏色或者變量都可以參與運算。Less提供了加（+）、減（-）、乘（*）、除（/）算術(shù)運算。
@widthh:10px+5; div{border:@widthh solid red;} width:(@width+5)*2;
注意： 參與運算的兩個數(shù)字，一個可以有單位，一個可以沒單位，最后為有單位的 參與運算的兩個數(shù)字，都有單位，最終取第一個的單位 less的運算符左右要加空格 乘號*和除號/的寫法，除法要用（）括號括起來，否則可能不起作用
@basefont:50px; html{font-size:50px;} div{ width : (200rem / @basefont); background:#999-666; } 13、rem適配原理 思考
我們適配的目標是什么？ 怎么去達到這個目標的？ 在實際的開發(fā)當中使用？
答案
讓一些不能等比自適應(yīng)的元素，達到當設(shè)備尺寸發(fā)生改變的時候，等比例適配當前設(shè)備。 使用媒體查詢根據(jù)不同設(shè)備按比例設(shè)置html的字體大小，然后頁面元素使用rem做尺寸單位，當html字體大小變化元素尺寸也會發(fā)生變化 ，從而達到等比縮放的適配。
rem實際開發(fā)適配方案
1、按照設(shè)計稿與設(shè)備寬度的比例，動態(tài)計算并設(shè)置html根標簽的font-size大小；（媒體查詢）
2、CSS中，設(shè)計稿元素的寬、高、相對位置等取值，按照同等比例換算為rem為單位的值。 rem適配方案技術(shù)使用（市場主流）
技術(shù)方案1 less 媒體查詢 less
技術(shù)方案2（推薦） flexible.js rem
總結(jié): 1、兩種方案現(xiàn)在都存在。 2、方案2更簡單。
14、rem適配方案1-實現(xiàn)技巧rem實際開發(fā)適配方案1
rem+媒體查詢+less技術(shù)
1、設(shè)計稿常見尺寸寬度
一般情況下，我們以一套或兩套效果圖適應(yīng)大部分的屏幕，放棄極端屏或?qū)ζ鋬?yōu)雅降級，犧牲一些效果，現(xiàn)在基本以750為準。
具體方案：
動態(tài)設(shè)置html標簽font-size大小
1、假設(shè)設(shè)計稿是750px
2、假設(shè)我們把整個屏幕劃分為15等份（劃分標準不一，可以是20等份，也可以是10等份）
3、每一份作為html字體大小，這里就是50px
4、那么在320px設(shè)備的時候，字體大小為320/15就是21.33px
5、用我們頁面元素的大小除以不同的html字體大小會發(fā)現(xiàn)他們比例還是相同的
比如我們以750為標準設(shè)計稿：
1、一個100*100像素的頁面元素在750屏幕下，就是100/50轉(zhuǎn)換為rem是2rem*2rem比例是1:1
2、320屏幕下，html字體大小為21.33則2rem=42.66px，此時寬和高都是42.66，但是寬和高的比例還是1:1
3、已經(jīng)能實現(xiàn)不同屏幕下，頁面元素盒子等比例縮放的效果
元素大小取值方法
1、最后的公式：頁面元素的rem值=頁面元素值（px）/(屏幕寬度/劃分的份數(shù))
2、屏幕寬度/劃分的份數(shù)，就是html font-size的大小
3、頁面元素的rem值=頁面元素值（px）/ html font-size
<style> @media screen and (min-width:320px) { html{font-size:21.33px} } @media screen and (min-width:750px) { html{font-size:50px} } /*寬高為100px*/ .box{width:2rem;height:2rem;background:pink;} </style> <div class="box">1</div>15、蘇寧首頁-公共common.less文件制作官網(wǎng)：
http://m.suning.com方案：單獨制作移動頁面
技術(shù)：布局采取rem適配布局（less+rem+媒體查詢）
設(shè)計圖：采用750px設(shè)計尺寸
搭建相關(guān)文件夾結(jié)構(gòu)
頁面初始的結(jié)構(gòu)和樣式
設(shè)置公共common.less文件
1、新建common.less設(shè)置好最常見的屏幕尺寸，利用媒體查詢設(shè)置不同的html字體大小，因為除了首頁其他頁面也需要。
2、蘇寧網(wǎng)站首頁的開發(fā)尺寸有320px,360px,375px,384px,400px,414px,424px,480px,540px,720px,750px等。
3、劃分的份數(shù)我們定為15等份。
4、默認html大小為50px
@no:15;html{ font-size:50px;}//320px@media screen and (min-width:320px) { html{ font-size:(320px/@no); }}//360px@media screen and (min-width:360px) { html{ font-size:(360px/@no); }}16、蘇寧首頁-@import導入less文件1、新建index.less文件，寫首頁的樣式
2、將剛才設(shè)置好的common.less引入到index.less里面
語法如下：
//在index.less中導入common.less文件
@import "common"
3、生成index.css引入到index.html里面
17、蘇寧首頁-body樣式18、蘇寧首頁-top-banner區(qū)域19、蘇寧首頁-header結(jié)構(gòu)布局20、蘇寧首頁-header-top區(qū)域內(nèi)容21、蘇寧首頁-search部分22、蘇寧首頁-banner區(qū)域23、蘇寧首頁-nav區(qū)域24、適配方案2-flexible.js介紹簡潔高效的rem適配方案flexible.js
手機淘寶團隊出的移動端適配庫
不需要寫不同屏幕的媒體查詢，在js里做了處理
它的原理是把當前設(shè)備劃分為10等份，但是不同設(shè)備下，比例還是一致的。
我們要做的，就是確定好我們當前設(shè)備的html文字大小。
比如當前設(shè)計稿是750px，我們只需要把html文字大小設(shè)置為75px(750px/10)就可以。
頁面元素rem值：頁面元素的px值/75
剩余的，讓flexible.js來算
下載地址：
http://github.com/amfe/lib-flexible25、適配方案2-更改flexible.js默認字號26、適配方案2-制作蘇寧首頁和cssrem插件官網(wǎng)：m.suning.com
方案：單獨制作移動頁面
技術(shù)：布局采取rem適配布局2（flexible.js+rem）
設(shè)計圖：采用750px設(shè)計尺寸
初始結(jié)構(gòu)和樣式
vscode px轉(zhuǎn)換rem插件 cssrem
27、rem適配方案總結(jié)五、響應(yīng)式布局-阿里百秀項目1、移動web響應(yīng)式開發(fā)導讀知道響應(yīng)式原理
使用媒體查詢完成響應(yīng)式導航
使用Bootstrap的柵格系統(tǒng)
使用Bootstrap的響應(yīng)式工具
完成阿里百秀首頁
2、響應(yīng)式開發(fā)布局原理使用媒體查詢針對不同寬度的設(shè)備進行布局和樣式的設(shè)置，從而適配不同設(shè)備。
3、響應(yīng)式布局容器響應(yīng)式需要一個父級做為布局容器，來配合子級元素來實現(xiàn)變化效果。
原理就是在不同屏幕下，通過媒體查詢來改變這個布局容器的大小，再改變里面子元素的排列方式和大小，從而實現(xiàn)不同屏幕下，看到不同的頁面布局和樣式變化。
平時我們的響應(yīng)式尺寸劃分
超小屏幕 （手機，小于768px）：設(shè)置寬度為100%
小屏幕（平板，大于等于768px）：設(shè)置寬度為750px
中等屏幕（桌面顯示器，大于等于992px）：寬度設(shè)置為970px
大屏幕（大桌面顯示器，大于等于1200px）：寬度設(shè)置為1170px
也可以根據(jù)實際情況自定義劃分。
<style> *{margin:0;padding:0} .box{height:100px;margin:0 auto;} @media screen and (max-width:767px) { .box{width:100%;background:pink;} } @media screen and (min-width:768px) { .box{width:750px;background:blue;} } @media screen and (min-width:992px) { .box{width:970px;background:green;} } @media screen and (min-width:1200px) { .box{width:1170px;background:yellowgreen;} } </style> <div class="box">1</div>4、響應(yīng)式導航案例需求分析
1、當我們屏幕大于等于800像素，我們給nav寬度為800px，因為里面子盒子需要浮動，所以nav需要清除浮動。
2、nav里面包含8個小li盒子，每個盒子的寬度定為100px，高度為30px，浮動一行顯示。
3、當我們屏幕縮放，寬度小于800像素的時候，nav盒子寬度修改為100%寬度。
4、nav里面的8個小li，寬度修改為33.33%，這樣一行就只能顯示3個小li，剩余下行顯示。
<style> *{margin:0;padding:0} .nav{width:800px;margin:0 auto;background:green;overflow:hidden;list-style:none;} .nav li{float:left;width:100px;height:30px;font-size:16px;text-align: center;line-height:30px;color:#fff;} @media screen and (max-width:799px) { .nav{width:100%} .nav li{width:33.33%} } </style> <ul class="nav"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>5、Bootstrap簡介Bootstrap來自Twitter（推特），是目前最受歡迎的前端框架。Bootstrap是基于HTML,CSS和JS的，它簡潔靈活，使得WEB開發(fā)更加快捷。
中文官網(wǎng)：
http://www.bootcss.com官網(wǎng)：
http://getbootstrap.com框架：就是一套架構(gòu)，它有一套比較完整的網(wǎng)頁功能解決方案，而且控制權(quán)在框架本身，有預(yù)制樣式庫、組件和插件。使用者要按照框架所規(guī)定的某種規(guī)范進行開發(fā)。
Bootstrap優(yōu)點
標準化的html+css編碼規(guī)范
提供了一套簡潔、直觀、強悍的組件
有自己的生態(tài)圈，不斷的更新迭代
讓開發(fā)更簡單，提高了開發(fā)的效率
Bootstrap版本
2.x.x:停止維護，兼容性好，代碼不夠簡潔，功能不夠完善。
3.x.x:目前使用最多，穩(wěn)定，但是放棄了對IE6,7,8的支持。偏向用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的WEB項目。
4.x.x:最新版，目前還不是很流行。
6、Bootstrap的使用方法要按照框架所規(guī)定的規(guī)范進行開發(fā)。
Bootstrap使用四步曲：
1、創(chuàng)建文件夾結(jié)構(gòu)
2、創(chuàng)建html骨架結(jié)構(gòu)
3、引入相關(guān)樣式文件
4、書寫內(nèi)容
1、創(chuàng)建文件夾結(jié)構(gòu)
2、創(chuàng)建html骨架結(jié)構(gòu)
在官方文檔起步里找到基本模板做為初始結(jié)構(gòu)
<!--要求當前網(wǎng)頁使用IE瀏覽器最高版本的內(nèi)核來渲染--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--視口的設(shè)置：視口的寬度和設(shè)備一致，默認的縮放比例和PC端一致，用戶不能自行縮放--> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0"> <!--[if lt IE 9]> 解決IE9以下瀏覽器對HTML5新增標簽的不識別，并導致CSS不起作用的問題 <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> 解決IE9以下瀏覽器對CSS3 Media Query的不識別 <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head>3、引入相關(guān)樣式文件
<!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">4、書寫內(nèi)容
直接拿Bootstrap預(yù)先定義好的樣式來使用
修改Bootstrap原來的樣式，注意權(quán)重問題
學習Bootstrap的關(guān)鍵在于知道它定義了哪些樣式，以及能實現(xiàn)什么效果
7、Bootstrap布局容器
Bootstrap需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個.container容器，它提供了兩個作此用處的類。
.container類
響應(yīng)式布局的容器，固定寬度
大屏（>=1200px）寬度定為1170px
大屏（>=992px）寬度定為970px
大屏（>=768px）寬度定為750px
超小屏（100%）
.container-fluid類
流式布局容器，百分百寬度
占據(jù)全部視口(viewport)的容器
適合于制作移動端頁面
8、Bootstrap柵格系統(tǒng)簡介柵格系統(tǒng)英文為"grid systems"，也有人翻譯為”網(wǎng)格系統(tǒng)“，它是指將頁面布局劃分為等寬的列，然后通過列數(shù)的定義來模塊化頁面。
Bootstrap提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。
9、Bootstrap柵格系統(tǒng)使用方法柵格選項參數(shù)
柵格系統(tǒng)用于通過一系列的行和列的組合來創(chuàng)建頁面布局，內(nèi)容可以放下這些創(chuàng)建好的布局中。
按照不同的屏幕劃分1-12等份
行可以去除父容器作用15px的邊距
xs-extra small：超小；sm-small：小；md-medium：中；lg-large：大；
列大于12，多余的列所在的元素將被作為一個整體另起一行排列
每一列默認有左右15像素的padding
可以同時為一列指定多個設(shè)備的類名，以便劃分不同份數(shù) 例如class="col-md-4 col-sm-6"
<div class="container"> <div class="row"> <div class="col-lg-3 col-md-6"></div> <div class="col-lg-3 col-md-6">12</div> <div class="col-lg-3 col-md-6">12</div> <div class="col-lg-3 col-md-6">12</div> </div> <div class="row"> <div class="col-lg-6">12</div> <div class="col-lg-2">12</div> <div class="col-lg-2">12</div> <div class="col-lg-2">12</div> </div> </div>10、Bootstrap柵格系統(tǒng)-列嵌套柵格系統(tǒng)內(nèi)置的柵格系統(tǒng)將內(nèi)容再次嵌套。簡單理解就是一個列內(nèi)再分成若干份小例。我們可以通過添加一個新的.row元素和一系列.col-sm-*元素到已經(jīng)存在的.col-sm-*元素內(nèi)。
<div class="row"> <div class="col-lg-3 col-md-6 row"> <p class="col-lg-6">1</p> <p class="col-lg-6">2</p> </div> <div class="col-lg-3 col-md-6">12</div> <div class="col-lg-3 col-md-6">12</div> <div class="col-lg-3 col-md-6">12</div> </div>11、Bootstrap柵格系統(tǒng)-列偏移使用.col-md-offset-*類可以將列向右側(cè)偏移。這些類實際是通過使用*選擇器為當前元素增加了左側(cè)的邊距（margin）
<div class="container"> <div class="row"> <div class="col-lg-4">12</div> <div class="col-lg-4 col-lg-offset-2">34</div> <div class="col-lg-8 col-lg-offset-2">12</div> </div> </div>12、Bootstrap柵格系統(tǒng)-列排序通過使用.col-md-push-*往右推和.col-md-pull-*往左拉兩個類就可以很容易的改變列（column）的順序。
<div class="container"> <div class="row"> <div class="col-lg-4 col-lg-push-8">12</div> <div class="col-lg-8 col-lg-pull-4">34</div> <div class="col-lg-8 col-lg-push-2">56</div> </div> </div>13、Bootstrap響應(yīng)式工具為了加快對移動設(shè)備友好的頁面開發(fā)工作，利用媒體查詢功能，并使用這些工具類可以方便的針對不同設(shè)備展示或隱藏頁面內(nèi)容。
與之相反的，visible-xs,visible-sm,visible-md,visible-lg是針對不同設(shè)備顯示某個內(nèi)容。
<div class="container"> <div class="row"> <div class="col-lg-4 col-lg-push-8 hidden-sm">12</div> <div class="col-lg-8 col-lg-pull-4">34</div> <div class="col-lg-8 col-lg-push-2 visible-lg">56</div> </div> </div>Bootstrap其他（按鈕、表單、表格）請參考Bootstrap文檔。
14、阿里百秀-屏幕劃分分析方案：采取響應(yīng)式頁面開發(fā)方案
技術(shù)：Bootstrap框架
設(shè)計圖：采用1280px設(shè)計尺寸
屏幕劃分分析：
1、屏幕縮放發(fā)現(xiàn)中屏幕和大屏幕布局是一致的。因此列定義為col-md-就可以了，md是大于等于970以上的。
2、屏幕縮放發(fā)現(xiàn)小屏幕布局發(fā)生變化，因此需要為小屏幕根據(jù)需求改變布局
3、屏蔽縮放發(fā)現(xiàn)超小屏幕布局又發(fā)生變化，因此需要為超小屏蔽根據(jù)需求改變布局
4、策略：先布局md以上的pc端布局，最后根據(jù)實際需求再修改小屏幕和超小屏幕的特殊布局樣式。
15、阿里百秀-網(wǎng)頁制作準備工作Bootstrap使用四步曲：
1、創(chuàng)建文件夾結(jié)構(gòu)
2、創(chuàng)建html骨架結(jié)構(gòu)
3、引入相關(guān)樣式文件
4、書寫內(nèi)容
16、阿里百秀-container容器寬度修改因為效果圖采取了1280的寬度，而Bootstrap里面container寬度最大為1170px，因此需要手動修改container寬度
@media screen and (min-width:1280px) { .container{width:1280px;}}17、阿里百秀-主體結(jié)構(gòu)搭建18、阿里百秀-logo區(qū)域19、阿里百秀-nav導航區(qū)域20、阿里百秀-news區(qū)域21、阿里百秀-publish區(qū)域22、阿里百秀-aside區(qū)域23、阿里百秀-header區(qū)域響應(yīng)式制作24、阿里百秀-main區(qū)域響應(yīng)式制作25、移動web開發(fā)總結(jié)移動端技術(shù)選型
流式布局（百分比布局）
flex彈性布局（推薦）
rem適配布局（推薦）
響應(yīng)式布局
建議：選取一種主要技術(shù)選型，其他技術(shù)做為輔助，這種混合技術(shù)開發(fā)。
在線咨詢
