移动端布局-rem适配布局

目录

一.rem基础

二.媒体查询

2.1什么是媒体查询

2.2语法规范

1.mediatype查询类型

2.关键字

3.媒体特性

案例：根据页面宽度改变背景变色

2.3媒体查询+rem实现元素动态大小变化

2.4引入资源（理解）

三.less基础

3.1维护css的弊端

3.2less介绍

3.3less使用

1.less变量

2.less编译

3.less嵌套

4.less运算

四.rem适配方案

4.1rem实际开发适配方案

4.2rem适配方案技术使用（市场主流）

4.3rem实际开发适配方案1

2.动态设置html标签font-size大小

3.元素大小取值方法

---

一.rem基础

rem单位

rem（root em）是一个相对单位，类似于em，em是父元素字体大小

不同的是rem的基准是相对于html元素的文字大小

比如根元素（html）设置flont-size=12px；非根元素设置width：2rem，则换成px表示就是24px

em单位，在当前元素设置了font-size时,以当前元素为参照，当前元素没有设置font-size，则以父元素为参照

二.媒体查询

2.1什么是媒体查询

媒体查询（media query）是css3新语法

• 使用@media查询，可以针对不同的媒体类型定义不同的样式

• @media 可以针对不同的屏幕尺寸设置不同的样式

• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度从新渲染页面

• 目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询

2.2语法规范

@media mediatype and|not|only （media feature） {
    CSS-Code;
}

• 用@media 开头注意@符号

• mediatype 媒体类型

• 关键字 and not only

• media feature 媒体特性 必须有小括号包含

1.mediatype查询类型

将不同终端设备划分成不同的类型，称为媒体类型

 第三个为screen（屏幕）的意思（这里写错了），scree是小石子的意思

2.关键字

关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件

• and：可以将多个媒体特性连接到一起，相当于“且”的意思

• not：排除某个媒体类型，相当于“非”的意思，可以省略ellipsis

• only：指定某个特定的媒体类型，可以省略

3.媒体特性

每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂时了解三个。注意他们要加小括号包含

案例：根据页面宽度改变背景变色

实现思路：

1.按从大到小或者从小到大的思路

2.注意我们有最大值max-width和最小值min-width都是包含等于的

3.当屏幕小于540像素，背景颜色变成蓝色（x<=539)

4.当屏幕大于等于540像素并且小于等于969像素的时候背景颜色为绿色（540<=x<=969）

5.当屏幕大于等于970像素时，背景颜色为红（x>=970）

    <style>
	 /* screen and 必须有不能省略 */
      @media screen and (max-width: 539px) {
        body {
          background-color: blue;
        }
      }
      @media screen and (min-width: 540px) {
        body {
          background-color: green;
        }
      }
      @media screen and (min-width: 970px) {
        body {
          background-color: red;
        }
      }
    </style>

层叠简化：

2.3媒体查询+rem实现元素动态大小变化

rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸

媒体查询可以根据不同设备宽度来修改样式

媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化

    <style>