前端基础知识第三章---移动端WEB开发之rem适配布局(1)

background-color: blue;

}

}

/* 3. 540 ~ 970 我们的页面颜色改为 绿色 */

/* @media screen and (min-width: 540px) and (max-width: 969px) {

body {

background-color: green;

}

} */

@media screen and (min-width: 540px) {

body {

background-color: green;

}

}

/* 4. 大于等于970 我们页面的颜色改为 红色 */

@media screen and (min-width: 970px) {

body {

background-color: red;

}

}

/* 5. screen 还有 and 必须带上不能省略的 */

/* 6. 我们的数字后面必须跟单位 970px 这个 px 不能省略的 */

（3）引入资源（理解）

当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets（样式表）。

原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。

语法演示如下：

代码演示如下：

---

三、Less 基础

---

（1）维护 css 的弊端

CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

• CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的；

• 不方便维护及扩展，不利于复用；

• CSS 没有很好的计算能力；

• 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目；

（2）Less 介绍

1️⃣ Less （Leaner Style Sheets 的缩写） 是一门 CSS 扩展语言