移动端rem适配布局

一、rem基础

rem单位

rem是一个相对单位，类似与em,em是相对于父元素的字体大小来说的

而rem是相对与html元素的字体大小

比如html设置的font-size: 12px;

而子元素设置的width: 2rem;

换成px显示则width为24px

也就是通过修改html中的字体大小来整体控制页面中元素的大小

二、媒体查询@media

1.什么是媒体查询

是CSS3的新语法

• 使用@media可以针对不同媒体类型、不同的屏幕尺寸来设置不同的样式
• 当你重置浏览器大小，也会根据浏览器的宽高来重新渲染页面

2.语法

@media 媒体类型 关键字 (媒体特性) {
    css-code;
}

@media screen and (max-width: 800px) {
    html {
        font-size: 16px;
    }
}

2.1媒体类型mediatype

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

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等

2.2关键字

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

and 且

not 非，可以省略

only 指定，可以省略

2.3媒体特性

每种媒体类型都有不同的媒体特性，根据这种不同的特性展示不同的风格，暂且了解三个

值	描述
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域的宽度
max-width	定义输出设备中页面最大可见区域的宽度

三、Less基础

是一门CSS扩展语言，也称为CSS预处理器