Less基礎(chǔ)語法介紹
作用: 維護(hù)CSS, 按照CSS的基本語法去寫. https://less.bootcss.com/變量
?@自定義變量名: 值; 例如: @nav_bgcolor: red; nav { color: @nav_bgcolor; } ?變量的運(yùn)算: @width: 10; nav { width: @width * 3px; }混合
? 定義一個(gè)公共的樣式(可以式類選擇的語法,可以是ID選擇器的語法) 例如: .test() { width: 50px; height: 50px; } nav { 調(diào)用樣式 .test(); } header { .test(); } ? 可以設(shè)置參數(shù) 例如: .test(@width) { width: @width; } nav { .test(100px); } ? 可以為參數(shù)設(shè)置默認(rèn)值 例如: .test(@width: 100px) { width: @width; } nav { .test(); } header { .test(50px); }嵌套
例如: nav { ul { li { } } }在瀏覽器中預(yù)覽LESS文件(了解)
1. HTML頁面直接溝通link標(biāo)簽引用 less文件 <link rel="stylesheet/less" type="text/css" href="less文件.less"> 2. HTML頁面中引用用來解析less文件的一個(gè)js文件 <script type="text/javascript" src="less.js"></script>
image.png
3.將項(xiàng)目放到服務(wù)器中，就可以正常預(yù)覽吴裤。
備注:
- 以上執(zhí)行過程需要在服務(wù)器環(huán)境下進(jìn)行
- webstorm開發(fā)工具下,可以執(zhí)行運(yùn)行,因?yàn)閣ebstorm自帶一個(gè)服務(wù)器環(huán)境
媒體查詢
什么是媒體查詢?
1, 媒體指的就是各種設(shè)備(移動(dòng)設(shè)備,PC設(shè)備) 2, 查詢指的就是要檢測(cè)屬于哪種設(shè)備 總結(jié): 媒體查詢:通過查詢當(dāng)前屬于哪種設(shè)備,讓網(wǎng)頁能夠在不同的設(shè)備下正常的預(yù)覽學(xué)習(xí)媒體查詢的核心是什么?
實(shí)現(xiàn)頁面在不同設(shè)備下正常預(yù)覽.[判斷當(dāng)前設(shè)備]媒體類型
將不同的設(shè)備劃分為不同的類型,稱為媒體類型
- all (所有的設(shè)備)
- print (打印設(shè)備)
- screen(電腦屏幕,平板電腦),智能手機(jī)
媒體特性
用來描述設(shè)備的特點(diǎn),比如寬度,高度...
- width 網(wǎng)頁顯示區(qū)域完全等于設(shè)置的寬度
- height 網(wǎng)頁顯示區(qū)域完全等于設(shè)置的高度
- max-width / max-height 網(wǎng)頁顯示區(qū)域小于等于設(shè)置的寬度
- min-width / min-width 網(wǎng)頁顯示區(qū)域大于等于設(shè)置的寬度
- orientation: portrait (豎屏模式) | landscape (橫屏模式)
語法關(guān)鍵字
目的將媒體類型和媒體特性鏈接到一塊,進(jìn)行設(shè)備檢測(cè)
- and 可以將多個(gè)媒體特性鏈接到一塊,相當(dāng)于且
- not 排除某個(gè)媒體特性 相當(dāng)于非,可以省略
- only 指定某個(gè)特定的媒體類型, 可以省略
語法
外聯(lián)式語法
<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">內(nèi)嵌式語法
@media only screen and (max-width: 420px) { body { background-color: red; } } 備注: 多個(gè)條件聯(lián)寫 @media only screen and (width: 320px) and (height: 568px) {}
Rem
什么是REM?
Rem: 是一個(gè)單位,是一個(gè)相對(duì)單位 em: 是一個(gè)單位,是一個(gè)相對(duì)單位,參照當(dāng)前文字大小設(shè)置的Rem的特點(diǎn)?
參照HTML根標(biāo)簽的文字大小Rem如何實(shí)現(xiàn)適配?
1. 常見的UI稿件尺寸大小 640px(20份) 或者 750px(常見)[25份]
// 匹配設(shè)備屏幕最小顯示寬度320px
@media only screen and (width: 320px) {
html {
font-size: 16px;
height: 100%;
background-color: #f7f4f1;
}
body {
height: 100%;
}
}
// 匹配設(shè)備屏幕大小是 360像素
@media only screen and (width: 360px) {
html {
font-size: 18px;
height: 100%;
background-color: #f7f4f1;
}
body {
height: 100%;
}
}
@media only screen and (width: 768px){
html {
font-size: 38.4px;
height: 100%;
background-color: #f7f4f1;
}
body {
height: 100%;
}
}
.viewport {
width: 100%;
height: 100%;
// 頂部區(qū)域
.top_header {
width: 100%;
img {
width: 100%;
}
}
// 主體區(qū)域
.m_content {
height: 100%;
padding: 0rem 24 / 32rem;
.public_box {
margin-top: 28/32rem;
margin-bottom: 28/32rem;
// 標(biāo)題
.title {
height: 60 /32rem;
h3 {
font-size: 28 / 32rem;
color: #000;
}
span {
font-size: 28 /32rem;
color: #888;
}
}
// 添加優(yōu)惠券
.add_YH {
height: 215 / 32rem;
width: 100%;
border: 1/32rem dashed #dedede;
background-color: #fff;
text-align: center;
.icon-add {
margin-top: 35/32rem;
margin-bottom: 15/32rem;
font-size: 107/32rem;
color: #aeaeae;
}
a {
font-size: 26/32rem;
color: #aeaeae;
}
}
}
// 提示
.tips {
margin-top: 100/32rem;
h4 {
color: #b3b2b1;
font-size: 24/32rem;
}
p {
color: #b3b2b1;
font-size: 24/32rem;
margin-top: 18/32rem;
}
}
}
}
