學(xué)習(xí)目標(biāo)
- 能夠使用rem單位
- 能夠使用媒體查詢的基本語法
- 能夠使用Less的基本語法
- 能夠使用Less的嵌套
- 能夠使用Less中的運(yùn)算
- 能夠使用2種rem適配方案
- 能夠獨(dú)立完成蘇寧移動(dòng)端首頁
思考
- 頁面布局文字能否隨著屏幕大小變化而變化王污？
- 流式布局和flex布局主要針對(duì)寬度布局读跷，那高度如何設(shè)置叫挟？
- 怎么樣讓屏幕發(fā)生變化的時(shí)候元素的高度和寬度等比例縮放？
1. rem基礎(chǔ)
rem 單位
rem(root em)是一個(gè)相對(duì)單位埃儿，類似于em，em是父元素字體大小。
不同的是rem的基準(zhǔn)是相對(duì)于html元素的字體大小践险。
比如，根元素（html)設(shè)置font-size=12px吹菱；非根元素設(shè)置width:2rem;換算成px表示就是24px巍虫。
2. 媒體查詢
2.1 什么是媒體查詢
媒體查詢（Media Query）是CSS3新語法。
- 使用@media查詢鳍刷，可以針對(duì)不同的媒體類型定義不同的樣式
- @media可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式
- 當(dāng)你重置瀏覽器大小的過程中占遥，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面
- 目前針對(duì)很多蘋果手機(jī)、Andriod手機(jī)输瓜，平板等設(shè)備都用得到多媒體查詢
2.2 語法規(guī)范
@media mediatype and|not|only(media feature) {
CSS-Code;
}
- 用@media開頭 注意@符號(hào)
- mediatype媒體類型
- 關(guān)鍵字and no only
- media feature 媒體特性 必須有小括號(hào)包含
1. mediatype 查詢類型
將不同的終端設(shè)備劃分成不同的類型瓦胎，稱為媒體類型。
- all:用于所有設(shè)備
- print:用于打印機(jī)和打印預(yù)覽
- screen:用于電腦屏幕尤揣、平板電腦搔啊、智能手機(jī)等
2. 關(guān)鍵字
關(guān)鍵字將媒體類型或多個(gè)媒體特性連接到一起做為媒體查詢的條件。
- and:可以將多個(gè)媒體特性連接到一起北戏，相當(dāng)于“且”的意思负芋。
- not:排除某個(gè)媒體類型，相當(dāng)于“非”的意思嗜愈，可以省略旧蛾。
- only:指定某個(gè)特定的媒體類型莽龟，可以省略。
3. 媒體特性
每種媒體類型都具有各自不同的特性蚜点，根據(jù)不同媒體類型的媒體特性設(shè)置不同的展示風(fēng)格轧房。我們暫且了解三個(gè)。注意他們要加小括號(hào)绍绘。
- width:定義輸出設(shè)備中頁面可見區(qū)域的寬度
- min-width:定義輸出設(shè)備中頁面最小可見區(qū)域?qū)挾?/li>
- max-width:定義輸出設(shè)備中頁面最大可見區(qū)域?qū)挾?/li>
注意：為了防止混亂奶镶，媒體查詢我們要按照從小到大或者從大到小的順序來寫，但是我們最喜歡的還是從小到大來寫陪拘，這樣代碼更簡(jiǎn)潔厂镇。
2.3 媒體查詢 + rem實(shí)現(xiàn)元素動(dòng)態(tài)大小變化
rem單位是跟著html來走的，有了rem頁面元素可以設(shè)置不同大小尺寸媒體查詢可以根據(jù)不同設(shè)備寬度來修改樣式左刽。
媒體查詢 + rem 就可以實(shí)現(xiàn)不同設(shè)備寬度捺信，實(shí)現(xiàn)頁面元素大小的動(dòng)態(tài)變化。
2.4 引入資源（理解）
當(dāng)樣式比較繁多的時(shí)候欠痴，我們可以針對(duì)不同的媒體使用不同stylesheet（樣式表）迄靠。
原理，就是直接在link中判斷設(shè)備的尺寸喇辽，然后引用不同的css文件掌挚。
1. 語法規(guī)范
<link rel="stylesheet" media="mediatype and|not|only(media feature)" href="mystylesheet.css">
3. Less 基礎(chǔ)
3.1 維護(hù)css的弊端
css是一門非程序式語言，沒有變量菩咨，函數(shù)吠式，SCOPE（作用域）等概念。
- CSS需要書寫大量看似沒有邏輯的代碼抽米，CSS冗余度是比較高的特占。
- 不方便維護(hù)及擴(kuò)展，不利于復(fù)用
- CSS沒有很好的計(jì)算能力
- 非前端開發(fā)工程師來講云茸，往往會(huì)因?yàn)槿鄙貱SS編寫經(jīng)驗(yàn)而很難寫出組織良好且易于維護(hù)的CSS代碼項(xiàng)目是目。
3.2 Less 介紹
Less(Leaner Style Sheet的縮寫）是一門CSS擴(kuò)展語言，也成為CSS預(yù)處理器标捺。
做為CSS的一種形式的擴(kuò)展胖笛，它并沒有減少CSS的功能，而是在現(xiàn)有的CSS語法上宜岛，為CSS加入程序式語言的特性长踊。
它在CSS的語法基礎(chǔ)之上，引入了變量萍倡，Mixin（混入）身弊，運(yùn)算以及函數(shù)等功能，大大簡(jiǎn)化了CSS的編寫，并且降低了CSS的維護(hù)成本阱佛，就像它的名稱所說的那樣帖汞，Less可以讓我們用更少的代碼做更多的事情。
Less中文網(wǎng)址：lesscss.cn
常見的CSS預(yù)處理器：Sass凑术、Less翩蘸、Stylus
一句話：Less是一門預(yù)處理語言，它擴(kuò)展了css的動(dòng)態(tài)特性淮逊。
3.3 Less使用
我們首先新建一個(gè)后綴名為less的文件催首，在這個(gè)文件里面書寫less語句。
- Less變量
- Less編譯
- Less嵌套
- Less運(yùn)算
3.4 Less變量
變量指的是沒有固定的值泄鹏，可以改變的郎任。因?yàn)槲覀僀SS中的一些顏色和數(shù)值等經(jīng)常使用。
@變量名：值备籽；
1. 變量命名規(guī)范
- 必須有@為前綴
- 不能包含特殊字符
- 不能以數(shù)字開頭
- 大小寫敏感
3.5 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文件。
3.6 Less嵌套
我們經(jīng)常用到選擇器的嵌套
#header .logo {
width:300px;
}
Less嵌套寫法
#header {
.logo {
width:300px;
}
}
如果遇見（交集|偽類|偽元素選擇器）
- 內(nèi)層選擇器的前面沒有&符合弧械，則它被解析為父選擇器的后代八酒；
- 如果有&符號(hào)，它就被解析為父元素自身或父元素的偽類刃唐。
a:hover{
color:red;
}
Less嵌套寫法
a{
&:hover{
color:red;
}
}
3.7 Less運(yùn)算（重點(diǎn)）
任何數(shù)字羞迷、顏色或者變量都可以參與運(yùn)算。就是Less提供了加（+）画饥、減（-）衔瓮、乘（*）、除（/）算術(shù)運(yùn)算抖甘。
// Less里面寫
@width:10px + 5;
div{
border: @width solid red;
}
// 生成的css
div{
border: 15px solid red;
}
// Less甚至還可以這樣寫
width:(@width + 5) * 2;
注意:
乘號(hào)（*）和除號(hào)（/）的寫法
運(yùn)算符中間左右有個(gè)空格隔開1px + 5
對(duì)于兩個(gè)不同單位的值之間的運(yùn)算热鞍，運(yùn)算結(jié)果的值取第一個(gè)值的單位
如果兩個(gè)值之間只有一個(gè)值有單位，則運(yùn)算結(jié)果就取該單位
rem適配方案
- 我們適配的目標(biāo)是什么?
- 怎么去達(dá)到這個(gè)目標(biāo)？
- 在實(shí)際的開發(fā)當(dāng)中使用薇宠？
- rem 適配方案
- 讓一些不能等比自適應(yīng)的元素偷办，達(dá)到當(dāng)設(shè)備尺寸發(fā)生改變的時(shí)候，等比例適配當(dāng)前設(shè)備澄港。
- 使用媒體查詢根據(jù)不同設(shè)備按比例設(shè)置html的字體大小椒涯，然后頁面元素使用rem做尺寸單位，當(dāng)html字體大小變化元素尺寸也會(huì)發(fā)生變化回梧，從而達(dá)到等比縮放的適配废岂。
4.1 rem實(shí)際開發(fā)適配方案
- 按照設(shè)計(jì)稿與設(shè)備寬度的比例，動(dòng)態(tài)計(jì)算并設(shè)置html根標(biāo)簽的font-size大衅泪喊；（媒體查詢）
- CSS中，設(shè)計(jì)稿元素的寬髓涯、高袒啼、相對(duì)位置等取值，按照同等比例換算為rem單位的值纬纪；
4.2 rem適配方案技術(shù)使用（市場(chǎng)主流）
技術(shù)方案1
- less
- 媒體查詢
- rem
技術(shù)方案2（推薦）
- flexible.js
- rem
總結(jié)：
- 兩種方案現(xiàn)在都存在蚓再。
- 方案2更簡(jiǎn)單，現(xiàn)階段大家無需了解里面的js代碼包各。
4.3 rem實(shí)際開發(fā)適配方案1
rem + 媒體查詢 + less技術(shù)
1. 設(shè)計(jì)稿常見尺寸寬度
- iphone4.5 : 640px;
- iphone678:750px;
- Android:常見320px摘仅、360px、375px问畅、384px娃属、400px、414px护姆、500px矾端、720px
大部分4.7~5寸的安裝設(shè)備為720px
一般情況下，我們以一套或兩套效果圖適應(yīng)大部分的屏幕卵皂，放棄極端屏或?qū)ζ鋬?yōu)雅降級(jí)秩铆，犧牲一些效果，現(xiàn)在基本以750為準(zhǔn)灯变。
2. 動(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像素的頁面在 750屏幕下添祸，就是100/50 轉(zhuǎn)換為rem是2rem * 2rem比例是1比1
- 320屏幕下滚粟，html字體大小為21.33 則2rem = 42.66px此時(shí)寬和高都是42.66但是寬和高的比例還是1比1
- 但是已經(jīng)能實(shí)現(xiàn)不同屏幕下 頁面元素盒子等比例縮放的效果
3. 元素大小取值方法
- 最后的公式：頁面元素的rem值 = 頁面元素值（px）/（屏幕寬度/劃分的份數(shù)）
- 屏幕寬度/劃分的份數(shù) 就是html font-size的大小
- 或者：頁面元素的rem值 = 頁面元素值（px）/html font-size字體大小
