一.移動(dòng)適配
1.
適配移動(dòng)端過程：
? ? ? ?1.要利用媒體查詢規(guī)定不同的屏幕寬度設(shè)置不同的根字號(hào)大小；屏幕寬度的1/10
? ? ? ?2.頁(yè)面元素就可以使用rem相對(duì)單位，1rem=1html文字大小
2.less
1.注釋
/*
shift+alt+a
塊注釋，是會(huì)編譯在css中
*/
/**
這里會(huì)編譯碼
**/
2.計(jì)算
/*
less計(jì)算：
? + - * 除法./或者()
注意點(diǎn)：
?1.單位沒有順序之分，如果一個(gè)表達(dá)式之中有多個(gè)單位，以第一個(gè)單位為準(zhǔn)
?2.運(yùn)算符的前后，要么都加空格隔開，要么都不加
*/
3.嵌套
// 1.生成后代選擇器
.box {
? width: 300px;
? height: 300px;
? .title {
? ? border-radius: 50%;
? ? .left {
? ? ? margin-left: 40px;
? ? }
? ? .right {
? ? ? padding-top: 50px;
? ? }
? }
}
// 2.生成子代選擇器 >
.father {
? background-color: purple;
? > .son {
? ? background-color: #6cf;
? ? > .sun {
? ? ? background-color: orange;
? ? }
? }
}
// 3.交集選擇器 &符號(hào)指代的是直接上級(jí)
.box1 {
? color: #6cf;
? span {
? ? &.box2 {
? ? ? color: aliceblue;
? ? }
? }
}
// 4.并集選擇器
.box1,
.box2 {
? color: #333;
}
.box1 {
? &,
? .box2 {
? ? color: #999;
? }
}
// 5.偽類選擇器 ?:hover
.box {
? a:hover {
? ? color: #666;
? }
? a {
? ? &:hover {
? ? ? color: #444;
? ? }
? }
? li:hover {
? ? a {
? ? ? color: #222;
? ? }
? }
? li {
? ? &:hover {
? ? ? a {
? ? ? ? color: #333;
? ? ? }
? ? }
? }
}
// 6.添加偽元素
.box {
? li::before {
? ? content: '';
? }
? li {
? ? &::before {
? ? ? content: '';
? ? }
? }
}
// 7.結(jié)構(gòu)偽類選擇器 直接寫在選擇器的后面是沒有提示的
.box {
? li:first-child {
? ? margin-left: 0;
? }
? li {
? ? &:nth-child(2) {
? ? ? margin-bottom: 0;
? ? }
? }
}
4.變量
// 變量 ?@變量名: 值; 大大節(jié)約維護(hù)成本
/*
變量名看做是一個(gè)存值的容器
*/
5.導(dǎo)入
// @import "你要導(dǎo)入的文件路徑";
// less文件導(dǎo)入只能導(dǎo)入.less文件
@import url(./03-計(jì)算.less);
@import './04-嵌套.less';
6.導(dǎo)出
// out: ../css/
/*
注意點(diǎn)：
?1.路徑如果表示文件夾，最后一定要有/
?2.屬于less配置信息，一定要寫在第一行，如果寫在第二行，那么第一行不能再寫任何內(nèi)容
*/
7.禁止導(dǎo)出
//out: false
8.壓縮導(dǎo)出
// compress:true,out:../css2/
/*
節(jié)約成本，讓網(wǎng)頁(yè)渲染的更快
如果多個(gè)配置一起寫，配置與配置之間以英文逗號(hào)隔開
*/
