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

前言

我不停奔跑，只为追赶当年被寄予厚望的自己

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

• • 一、rem 基础
  • 二、媒体查询
  • • （1）什么是媒体查询
    • （2）语法规范
    • • 2.1 mediatype 查询类型
      • 2.2 关键字
      • 2.3 媒体特性
      • 2.4 案例：根据页面宽度改变背景变色
    • （3）引入资源（理解）
  • 三、Less 基础
  • • （1）维护 css 的弊端
    • （2）Less 介绍
    • （3）Less 使用
    • （4）Less 变量
    • （5）Less 编译
    • （6）Less 嵌套
    • （7）Less 运算
  • 四、rem 适配方案
  • • （1）rem 实际开发适配方案
    • （2）rem 适配方案技术使用（市场主流）
    • （3）rem 实际开发适配方案1
    • • 3.1 设计稿常见尺寸宽度
      • 3.2 动态设置 html 标签 font-size 大小
      • 3.3 元素大小取值方法
    • （4）rem 实际开发适配方案2
  • 五、总结

一、rem 基础

1 rem (root em)是一个相对单位，类似于em，em是父元素字体大小；
2 不同的是rem的基准是相对于html元素的字体大小；
3 rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小；

代码演示如下：

/* 根html 为 12px */
html {
	font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
	font-size: 2rem;
}

---

二、媒体查询

<