移動(dòng)端開發(fā)
- 學(xué)會(huì) media query
- 學(xué)會(huì)要設(shè)計(jì)圖（沒圖不做）實(shí)在要做也行，丑可別怪我
- 學(xué)會(huì)隱藏元素
- 手機(jī)端要加一個(gè) meta
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
//meta:vp
//如果css樣式是專門針對(duì)手機(jī)端做的,就加這個(gè)標(biāo)簽不讓頁面按照980自動(dòng)縮放
媒體查詢
- 媒體,媒介,要查詢些什么,就是媒體查詢
代碼
<script>
@meta (max-width:800){
body{
background:red;
}
}//當(dāng)有讀好個(gè)@meta的時(shí)候,要注意互相覆蓋,優(yōu)先級(jí)的問題
當(dāng)檢測(cè)到是在屏幕小于800的屏幕上,就顯示紅色
</script>
<script>
@meta (max-width:800){
body{
background:red;
}
}
@meta (max-width:500){
body{
background:red;
}
}
@meta (max-width:300){
body{
background:red;
}
}
</script>
注意事項(xiàng):
- 當(dāng)要適配多個(gè)不同屏幕的設(shè)備時(shí),就要用到多個(gè)媒體查詢,這里就會(huì)出現(xiàn)一個(gè)問題,下面的代碼會(huì)覆蓋前面的效果,所以要1000-10 這樣由大到小的順序?qū)懘a
- 此外,還可以用importen重要屬性來提高權(quán)重,不過不建議,還是用具體的范圍標(biāo)示是最好的1000-800 700-500 -400 -200 這樣子
@meta (min-width:300)and(max-width:400){
body{
background:red;
}
}//這樣就規(guī)定了300-400之間的屏幕了
-還有,如果在同一個(gè)css文件里面是不是顯得太亂了?我們可不可以用引入的文件來媒體查詢?可以的 ,在link標(biāo)簽的media屬性里面設(shè)置就行了,這里還有一點(diǎn),只要link標(biāo)簽的東西都是會(huì)下載進(jìn)來頁面,最終顯示不一定;也就是說,一定會(huì)下載,但是究竟會(huì)不會(huì)顯示是另外一回事 - 移動(dòng)端和pC端的前端知識(shí)是一樣的,只不過移動(dòng)端多個(gè)媒體查詢而已
- 有了媒體查詢,你可以做任何設(shè)備上的頁面,無非就是多做幾套CSS//響應(yīng)式頁面就是媒體查詢做的,響應(yīng)式就是隨著窗口大小變化的頁面而已
- 前端就是web網(wǎng)頁頁面的,我管你在哪里~!!! atm機(jī)上的頁面都是前端做
在調(diào)試媒體查詢代碼的時(shí)候,只要是學(xué)會(huì)隱藏元素就是利用chorme開發(fā)者工具在兩個(gè)打小的屏幕之間來回切換,看有沒有bug , 通常就是效果出來了,收不回去, 所以整個(gè)利用媒體查詢功能來調(diào)試CSS移動(dòng)端開發(fā)的時(shí)候,最多的工作就是隱藏元素
- css的調(diào)試過程就是麻煩,因?yàn)椴徽?各種元素之間影響,甚至覆蓋,會(huì)衍生出bug
- 響應(yīng)式的本質(zhì)就是利用媒體查詢功能來檢測(cè)出,用戶設(shè)備的屏幕寬度,并且為之提供相應(yīng)的頁面CSS代碼,這種開發(fā)模式導(dǎo)致開發(fā)人員為了完美呈現(xiàn)效果,不得寫多套CSS樣式,增加了開發(fā)難度,這就是不受歡迎的原因
//因此工程師說:我就開發(fā)2套樣式,PC+移動(dòng)就兩套,不管什么屏幕是pc就顯示pc樣式,是移動(dòng)端就顯示移動(dòng)端樣式,不管移動(dòng)端有多個(gè)屏幕尺寸都顯示同一套樣式//這樣做很方便,也是目前主流的做法,京東淘寶的網(wǎng)上商城就是這樣子的~~~ 因?yàn)樗麄児緝?nèi)部,pc和移動(dòng)是兩個(gè)部門互不干涉,而且后端用幾行代碼就可以實(shí)現(xiàn)了,很輕松//但是知乎就是做響應(yīng)式的,因?yàn)閜c和移動(dòng)端都是同一個(gè)部門開發(fā)的,所以用了響應(yīng)式//檢測(cè)到用戶用的是pc就顯示pc樣式,否則就顯示移動(dòng)端樣式 - 最后有個(gè)小問題meta標(biāo)簽,這是歷史遺留問題,當(dāng)初手機(jī)顯示的頁面就是pc端的頁面,為了方便當(dāng)時(shí)的用戶,就用了自動(dòng)縮放的做法,meta標(biāo)簽就是來限制他.不讓他自動(dòng)縮放//因?yàn)槟菚r(shí)候pc頁面普遍是980寬度,手機(jī)只有300-400,為了看見頁面只能縮放了~~~
前端工程師是根據(jù)圖來做頁面的,當(dāng)一個(gè)設(shè)計(jì)只給你一張pc頁面,不給移動(dòng)端就叫你全做,就懟他
- 前端因?yàn)橐苿?dòng)端+pc端之間的先手開發(fā)順序,起了一個(gè)modle first的名詞,很蛋疼,其實(shí)就是媒體查詢而已,不過老師建議先開發(fā)移動(dòng)端的,因?yàn)?現(xiàn)在都是用手機(jī)的用戶多啊~~~
- 手機(jī)是沒有hover的,所以都是給某個(gè)屬性2個(gè)css效果,如:a.active{},然后利用js來進(jìn)行切換,這樣就不會(huì)干涉到樣式了/
- 切換的代碼:xx.onclick=function(){
yy.classList.toggle('active')
} - 最后我們發(fā)現(xiàn),用媒體查詢的后果就是我們寫了多套CSS
移動(dòng)端的特點(diǎn),或者說是移動(dòng)端開發(fā)的注意事項(xiàng)
手機(jī)端的交互方式不一樣
沒有 hover
有 touch 事件
沒有 resize
沒有滾動(dòng)條
那么我們會(huì)發(fā)覺一個(gè)問題,這樣寫的代碼很亂~~~為什么不干脆來兩套呢?分離開呢?
//這樣的話就需要后端代碼,來檢測(cè)用戶用的是什么手機(jī),或者電腦,來登錄這個(gè)網(wǎng)站,后端來選擇發(fā)送相應(yīng)設(shè)備的頁面代碼,完全沒有響應(yīng)式這回事~~現(xiàn)在整個(gè)中國(guó)都是這樣做的,中國(guó)根本沒有什么響應(yīng)式的頁面,京東淘寶都是這樣做的~!!!!用后端來解決這個(gè)問題,響應(yīng)式只是面試用一下
- REM和EM的區(qū)別:rem是根元素html的font-size;em是自己的font-size
- 不同的設(shè)備有不同的樣子就是響應(yīng)式
當(dāng)老板提出需求,這個(gè)頁面給我做移動(dòng)端~~~~
那你要問他要2分設(shè)計(jì)圖,如果沒有就不干~~~~
手機(jī)有多個(gè)牌子,有多個(gè)屏幕分辨率,//手機(jī)其實(shí)是做不了響應(yīng)式的
-百分比
- 整體縮放
后來發(fā)現(xiàn):
- 一切以寬度做,就能保證完美還原設(shè)計(jì)
總結(jié):淘寶工程師最后rem=font-size=page weigh @@@@!!!! 這是用JavaScript實(shí)現(xiàn)的
- 首先rem這個(gè)長(zhǎng)度單位是根元素的font-size也就是<html>元素的font-size大小
- 前端遇到不同屏幕的小設(shè)備,太多了,難以統(tǒng)一,有等比例縮放就太好了~~~
- 所以淘寶工程師想到了一個(gè)方法:用js獲取設(shè)備屏幕的寬度,讓它等長(zhǎng)于rem這個(gè)長(zhǎng)度;然后把頁面的font-size讓 body標(biāo)簽來限制,不讓字體受html的rem影響;
- 然后頁面上所有的寬度都用rem的比例,字體卻不收到影響,完美
// 可是隨之而來又出現(xiàn)了新問題,所有大小都是小數(shù),而且很多不足要微調(diào)
這屆就是講微調(diào)
- 為了舒服,不總是用小數(shù)就用十分之一的pageweight,注意小心十分之一太小,小過12px,這是瀏覽器默認(rèn)臨界點(diǎn),默認(rèn)最小的font-size,如果小過他就出bug
- 還有,1像素最小的,不可能最小的了
可是終究是麻煩,最終辦法用sass
-
其實(shí)less sass是一種變相的門檻,因?yàn)槟銜?huì)了,你就是懂一點(diǎn)英文,會(huì)看文檔,會(huì)用命令
