移动web开发rem适配布局

摆烂了两天遗漏挺多的，赶紧写完赶紧睡觉把，明天想想怎么过教资的面试咯

移动web开发rem适配布局

rem单位

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

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

比如 根元素html 设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px

媒体查询

1.什么是媒体查询？

媒体查询（madia Query）是CSS新语法

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

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

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

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

语法：

@media mediatype and| not| only (media feature) {

CSS-code;

}

• 用@madia 开头 注意@符号

• mediatype 媒体类型

• 关键字and not only

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

1. mediatype 查询类型

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

all 用于所有设备

print 用于打印机和打印预览

scree 用于电脑屏幕 平板电脑 智能手机等

2.关键字

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

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

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

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

媒体特性

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

width 定义输出设备中页面可见区域的宽度

min-widt