rem單位
- rem(root em)相對(duì)單位桂躏，類似于em膘融，em是父元素字體大小
.box {
width: 200px;
height: 200px;
background-color: pink;
font-size: 20px;
}
.box p {
width: 5em;
height: 4em;
background-color: skyblue;
}
<div class="box">
<p></p>
</div>
可以得到以下的結(jié)果：
- 不同的是rem的基準(zhǔn)是相對(duì)于<html>元素的字體大小
html {
font-size: 30px;
}
- rem的優(yōu)勢(shì)就在于父元素文字大小可能不一致孽锥，整個(gè)頁(yè)面只有一個(gè)<html>，可以很好的控制整個(gè)頁(yè)面的元素大小比例
媒體查詢
- 媒體查詢(Media Query)是CSS3新語(yǔ)法
- 使用@media查詢租幕，可以針對(duì)不同的媒體類型定義不同的樣式
- @media可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式
- 當(dāng)你重置瀏覽器大小的過(guò)程中，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面
- 目前針對(duì)很多蘋(píng)果手機(jī)轰枝，Android手機(jī)，平臺(tái)等設(shè)備都可以用到媒體查詢
語(yǔ)法規(guī)范
- 用@media開(kāi)頭
- mediatype媒體類型
- 關(guān)鍵字and not only
- media feature媒體特性组去，必須有小括號(hào)包含
@media mediatype and|not|only (media feature) {
CSS-Code;
}
mdiatype媒體類型
- 不同的終端設(shè)備劃分為不同的類型鞍陨，成為媒體類型
值 解釋說(shuō)明 all 用于所有的設(shè)備 print 用于打印機(jī)和打印閱覽 screen 用于電腦屏幕，平板電腦从隆，智能手機(jī)等
關(guān)鍵字
關(guān)鍵字是將媒體類型或者多個(gè)媒體特性連接到一起作為媒體查詢的條件
- and：可以將多個(gè)媒體特性鏈接到一起诚撵，相當(dāng)于“且”
- not：排除某個(gè)媒體類型，相當(dāng)于“非”键闺，可以省略
- or：可以測(cè)試多個(gè)媒體查詢的條件寿烟，只要有一個(gè)條件成立就執(zhí)行，相當(dāng)于“或”
- only：指定某個(gè)特定的媒體類型辛燥，可以省略
媒體特性
每種媒體類型都具有不同的特性筛武，根據(jù)不同媒體類型的媒體特性設(shè)置不同的展示風(fēng)格
暫時(shí)了解三個(gè)
| 值 | 解釋說(shuō)明 |
|---|---|
| width | 定義輸出設(shè)備中頁(yè)面可見(jiàn)區(qū)域的寬度 |
| min-width | 定義輸出設(shè)備中頁(yè)面最小可見(jiàn)區(qū)域的寬度 |
| max-width | 定義輸出設(shè)備中頁(yè)面最大可見(jiàn)區(qū)域?qū)挾?/td> |
/* 媒體查詢：@media媒體類型 關(guān)鍵字 媒體特性 */
/* 在屏幕設(shè)備中，判斷屏幕尺寸大小等于800px挎塌，最小寬度是800px */
@media screen and (min-width: 800px) {
/* 背景顏色為pink */
body {
background-color: pink;
}
}
媒體查詢可以書(shū)寫(xiě)多個(gè)，比如在寬度為600以內(nèi)是綠色榴都，601-799是默認(rèn)白色待锈，800及以上是粉色
/* 媒體查詢：@media媒體類型 關(guān)鍵字 媒體特性 */
/* 在屏幕設(shè)備中，判斷屏幕尺寸大小等于800px嘴高，最小寬度是800px */
@media screen and (min-width: 800px) {
/* 背景顏色為pink */
body {
background-color: pink;
}
}
/* 媒體查詢可以書(shū)寫(xiě)多個(gè) */
/* 最大寬度為600px的時(shí)候竿音，背景顏色為綠色 */
@media screen and (max-width:600px) {
body {
background-color: green;
}
}
案例：頁(yè)面寬度改變背景顏色
- 按照從大到小或者從小到大的思路
- max-width和min-width都包含了等于
- 當(dāng)屏幕小于540，背景顏色變成藍(lán)色（<=539）
- 當(dāng)屏幕大于等于540拴驮，并且小于等于969像素的時(shí)候?yàn)榫G色（540=<x<=969）
- 當(dāng)屏幕大于等于970像素的時(shí)候春瞬，背景顏色紅色（x>=970）
- 為了防止混亂，按照從小到大的順序來(lái)寫(xiě)莹汤，代碼也更簡(jiǎn)潔一點(diǎn)
<style>
/* 1.屏幕小于等于539px快鱼，背景是藍(lán)色 */
/* 2.屏幕大于等于540像素，并且小于等于969px，背景顏色是綠色 */
/* 3.屏幕大于等于970像素抹竹，背景是紅色 */
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
@media screen and (min-width: 540px) and (max-width: 969px) {
body {
background-color: green;
}
}
@media screen and (min-width: 970px) {
body {
background-color: red;
}
}
</style>
原理：
媒體查詢+rem實(shí)現(xiàn)元素動(dòng)態(tài)大小變化
- rem單位是跟著<html>來(lái)走的线罕，有了rem頁(yè)面元素可以設(shè)置不同大小尺寸
- 媒體查詢可以根據(jù)不同設(shè)備寬度修改樣式
- 媒體查詢+rem就可以實(shí)現(xiàn)不同設(shè)備寬度，實(shí)現(xiàn)頁(yè)面元素大小的動(dòng)態(tài)變化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
font-size: 20px;
}
/* 屏幕小于640px窃判，字號(hào)為20px */
/* 屏幕大于等于640像素钞楼，字號(hào)為30px */
/* @media screen and (max-width: 639px) {
html {
font-size: 20px;
}
} */
@media screen and (min-width: 640px) {
html {
font-size: 30px;
}
}
.box {
width: 100%;
height: 3rem;
font-size: 1.5rem;
line-height: 3rem;
background-color: green;
color: white;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">購(gòu)物車(chē)</div>
</body>
</html>
引入資源
Less基礎(chǔ)
CSS弊端
- css是一門(mén)非程序式語(yǔ)言，沒(méi)有變量袄琳，函數(shù)询件，SCOP（作用域）等概念
- 需要大量書(shū)寫(xiě)看似沒(méi)有邏輯的代碼，冗余度比較高
- 不方便維護(hù)和擴(kuò)展唆樊，不利于復(fù)用
- CSS沒(méi)有很好的計(jì)算能力
Less簡(jiǎn)介與安裝
- CSS擴(kuò)展語(yǔ)言宛琅，CSS預(yù)處理器
- 為CSS加入程序式語(yǔ)言的特性。且沒(méi)有減少CSS功能
- 引入了變量逗旁，Minxin（混入）嘿辟，運(yùn)算和函數(shù)等功能，簡(jiǎn)化了CSS編寫(xiě)片效，降低了維護(hù)成本红伦，用更少的CSS代碼做更多的事情
less中文網(wǎng)站：
常見(jiàn)的CSS預(yù)處理器有：Sass，Less淀衣，stylus
Less是一門(mén)CSS預(yù)處理語(yǔ)言昙读，擴(kuò)展了CSS的動(dòng)態(tài)特性
檢查nodejs版本號(hào)
node -v
在線安裝Less
npn install -g less
檢查less是否安裝成功
lessc -v
Less使用
創(chuàng)建一個(gè)后綴名為.less的文件
Less變量
- 指的沒(méi)有固定的值，可以動(dòng)態(tài)改變的膨桥，因?yàn)镃SS中的一些顏色和數(shù)值等經(jīng)常使用
- @變量名：值;
變量命名規(guī)范
1.必須要用@作為前綴
2.不能包含特殊字符
3.不能以數(shù)字開(kāi)頭
4.大小寫(xiě)敏感
@color:pink;
.變量使用規(guī)范
//直接使用
body {
color:@color;
}
a:hover {
color:@color;
}
Less編譯
- 本質(zhì)上蛮浑，less包含一套自定義的語(yǔ)法以及一個(gè)解析器，用戶根據(jù)這些語(yǔ)法定義自己的樣式規(guī)則国撵，這些規(guī)則最終會(huì)通過(guò)解析器陵吸，形成.css文件
- 所以：我們需要把我們的.less文件編譯生成為.css文件，才能供html頁(yè)面使用
- 編譯方法：文件當(dāng)前文件夾下使用cmd命令：
lessc style.less > style.css
Vscode插件：Easy LESS
- Easy LESS用來(lái)把less文件編譯成css文件
- 安裝完畢后重啟vscode
- 保存一下LESS文件就會(huì)自動(dòng)生成css文件
less嵌套
如果遇到（交集|偽類|偽元素選擇器）
- 內(nèi)層選擇器的前面沒(méi)有&符號(hào)介牙，那么他被解析為父選擇器的后代
-
有&符號(hào)壮虫，他就被解析為父元素自身或者父元素的偽類
轉(zhuǎn)換后
Less運(yùn)算
- 任何數(shù)字，顏色环础，變量都可以參加運(yùn)算囚似，less提供了加減乘除算術(shù)運(yùn)算
// 運(yùn)算
html {
font-size: 50px;
}
div {
width: (2rem + 2px) * 2;
height: 100px * 3;
background-color: #999;
}
// 1.兩個(gè)參與運(yùn)算的數(shù)字，一個(gè)可以有單位线得，一個(gè)沒(méi)單位饶唤，最終的單位就是那個(gè)唯一的單位
// 參與運(yùn)算的兩個(gè)數(shù)字，兩個(gè)都有單位贯钩，最終單位取第一個(gè)數(shù)字的單位
也可以進(jìn)行聲明變量牽一發(fā)而動(dòng)全身
@fontBase:50px;
html {
font-size: @fontBase;
}
div {
width: (2rem + 2px) * 2;
height: 100px * 3;
background-color: #999;
}
less運(yùn)算符左右務(wù)必要加空格
rem適配方案
- 讓一些不能等比自適應(yīng)的元素募狂，達(dá)到當(dāng)設(shè)備尺寸發(fā)生改變的時(shí)候办素，等比例適配當(dāng)前設(shè)備
- 使用媒體查詢根據(jù)不同設(shè)備按比例設(shè)置html的字體大小，然后頁(yè)面元素使用rem做尺寸單位祸穷，當(dāng)html字體大小變化元素尺寸
rem實(shí)際開(kāi)發(fā)適配方案
rem適配方案技術(shù)使用（市場(chǎng)主流）
方案一：
- less
- 媒體查詢
- rem
方案二： - flexible.js
- rem
總結(jié)：
1.兩種方案現(xiàn)在都存在
2.方案2更簡(jiǎn)單性穿，現(xiàn)階段無(wú)需了解里面的JS代碼
rem實(shí)際開(kāi)發(fā)適配方案1
rem+媒體查詢+less技術(shù)
1.設(shè)計(jì)稿常見(jiàn)尺寸寬度
| 設(shè)備 | 常見(jiàn)寬度 |
|---|---|
| iPhone4.5 | 640px |
| iPhone678 | 750px |
| Android | 常見(jiàn)320px，480px雷滚，540px需曾，600px，720px祈远，768px呆万，800px，1080p |
一般情況下车份，以一套或者兩套效果圖適應(yīng)大部分的屏幕谋减，放棄極端屏或者對(duì)他進(jìn)行優(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
⑤.用頁(yè)面元素的大小充甚，除以不同的html字體大小會(huì)發(fā)現(xiàn)他們比例還是相同的，比如750px為標(biāo)準(zhǔn)設(shè)計(jì)稿
比如用750為標(biāo)準(zhǔn)設(shè)計(jì)稿：
①.一個(gè)100*100像素的頁(yè)面元素在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)不同屏幕下技矮，頁(yè)面元素盒子等比例縮放的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 媒體查詢?cè)O(shè)置不同屏幕下的html的字號(hào) */
/* 設(shè)計(jì)圖參考750px */
/* 將屏幕寬度劃分為15份 */
/* 字號(hào) = 屏幕寬度/15 */
@media screen and (min-width: 320px) {
html {
font-size: 21.33px;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 50px;
}
}
/* 頁(yè)面中元素大小時(shí)，有一個(gè)參考殊轴，參考我們的750px屏幕的字號(hào) */
/* 寬高為100*100px的盒子 */
.box {
width: 2rem;
height: 2rem;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
元素大小取值方法：
①.最后的公式：頁(yè)面元素的rem值=頁(yè)面元素值（px）/（屏幕寬度/劃分的份數(shù)）
比如：
頁(yè)面寬度為750px衰倦，分為15份，一份50px旁理，一個(gè)盒子的寬高都是100樊零，那么rem值=100/50=2rem
②.屏幕寬度/劃分的份數(shù) 就是html font-size的大小
③.或者：頁(yè)面元素的rem值=頁(yè)面元素值（px）/html font-size字體大小
flexible.js
手機(jī)淘寶團(tuán)隊(duì)推出的簡(jiǎn)潔高效，移動(dòng)端適配庫(kù)
在js里面進(jìn)行了處理孽文，不需要再寫(xiě)不同屏幕的媒體查詢
原理：把當(dāng)前設(shè)備劃分為10等份驻襟，不同設(shè)備下，比例還是一致的
我們只需要完成當(dāng)前設(shè)備的html字號(hào)就行了
比如：
當(dāng)前設(shè)計(jì)稿是750px芋哭。那么我們只需要把html字號(hào)設(shè)置為75px（750 / 10）就行
里面的rem值：頁(yè)面元素的px值 / 75
剩余的沉衣，讓flexible.js進(jìn)行計(jì)算
github地址：
不需要再手動(dòng)書(shū)寫(xiě)媒體查詢語(yǔ)句
更改flexible.js默認(rèn)字號(hào)
在引入的CSS文件內(nèi)，使用自己寫(xiě)的媒體查詢進(jìn)行聲明：
@media screen and (min-width:750px) {
html {
font-size:75px !important;
}
}
進(jìn)行!important權(quán)重提高是因?yàn)閔tml字號(hào)是行內(nèi)樣式减牺，權(quán)重很高豌习。
VScode插件：cssrem
簡(jiǎn)化計(jì)算工作
