CSS是一門非程序式語言飒责，沒有變量、函數(shù)仆潮、SCOPE（作用域）等概念宏蛉。
Css需要書寫大量看似沒有邏輯的代碼，CSS冗余度是比較高的性置。 不方便維護(hù)及擴(kuò)展檐晕，不利于復(fù)用。Css沒有很好的計算能力 非前端開發(fā)工程師來講蚌讼，往往會因為缺少CSS編寫經(jīng)驗而很難寫出 組織良好且易于維護(hù)的CSS代碼項目辟灰。
知識總結(jié)
-
em:的大小是取決于當(dāng)前元素的字 體大小或者父元素的字體大小 -
Rem是一個相對單位，相對于html的字體大小 n如果整個頁面很多地方用rem進(jìn)行布局篡石，只需要在不同屏幕下修改html的字體大小芥喇，那么整個頁面都會同步變化.
媒體查詢
媒體查詢是css3語法，可以實現(xiàn)根據(jù)不同屏幕適配不同的樣式
- 語法結(jié)構(gòu)為：
@media screen and (max-width:800px) {css樣式} - 總結(jié)：
Link標(biāo)簽也可利用媒體查詢實現(xiàn)按需引入
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
安裝要點提示：Vs code中easy less的安裝
- 安裝
node n利用node –v檢測node是否安裝成功 - 利用
npm i less –g安裝less - 利用
lessc –v檢測less是否安裝成功 - 此處可以先不用配置凰萨，后面會采用
easy less插件 - 如果遇見 （交集|偽類|偽元素選擇器）需使用
&继控，否則解析錯誤。
a {
background-color: @color;
&:hover{
background-color: @color;
}
}
.nav{
.logo{
color: #000;
}
&::before{
content: "";
}
}
再創(chuàng)建VS Code 中common.less文件
定義規(guī)則參考官網(wǎng)文檔胖眷，創(chuàng)建好common.less文件武通，一定注意定義后的 ; 分號不能省略
@變量名：變量值；
@color:#FF00FF;//末尾的分號不要省略
body {
background-color: @color;
}
div {
background-color: @color;
}
編譯
VSCode中安裝Esay Less珊搀，保存則自動編譯生成common.css文件
image.png
在index.html中將生成的.css文件引入進(jìn)去即可冶忱。
image.png
less文件直接的應(yīng)用
index.less中引用
@import "common";
- 生成的
index.css中包含了common.css的內(nèi)容。直接引用index.css即可
rem適配方案2
- 知識總結(jié)
- 因為flexible是默認(rèn)將屏幕分為10等分
- 但是當(dāng)屏幕大于750的時候希望不要再去重置html字體了
- 所以要自己通過媒體查詢設(shè)置一下*
- 并且要把權(quán)重提到最高!important
一個神奇的vscode插件cssrem
- Cssrem插件會自動將px轉(zhuǎn)化為rem
- 但是要注意 插件默認(rèn)1rem = 16px
- 需要將插件重新配置打開settting.json境析，根據(jù)安裝的插件添加
"cssrem.rootFontSize": 75更改為自己想要的值囚枪，并重啟。
