【rem适配布局】

rem适配布局

1.0 rem是什么

• rem是一种相对单位，类似于em是针对父级元素的字体大小来基准的
• 与em不同的是，rem是针对整个页面html的字体大小来基准的
• 根元素设置的字体大小是12px，那么它的子元素如果设置的font-size: 2rem；那么这个字体大小是24px

2.0媒体查询

• 媒体查询是css3的新语法
• 使用@media查询，可以针对不同的媒体类型定义不同的样式
• 针对的是屏幕尺寸的不同
• 当重置浏览器页面的大小时，页面也会根据高度，宽度发生改变重新渲染页面
• 目前针对手机平板，很多用得上媒体查询

2.1使用

@media [设备类型] [and/not/noly] (条件){
	//对应样式
}

• @media — 定义媒体查询
• [设备类型] — 媒体类型，查询类型：有手机，打印机，平板等
• [and/not/only] — 关键字
• [条件] — 媒体特性：限制查询的范围

2.2 查询媒体类型

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

• all — 所有设备
• screen — 用于电脑屏幕，手机屏幕，平板屏幕 -(最常用)
• print — 用于打印机等打印设备

2.3 关键字

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

• and — 可以将多个媒体特性连接起来，相当于且的意思
• not — 排除某一个媒体类型，相当于非的意思
• only — 某个特定的媒体类型

2.4 媒体特性

每种媒体类型都有不同的特性，根据不同的特性设置不同的展示宽度，风格等

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

2.5 注意

！ screen和and两个不能省略
！max-width，min-width后面带上单位

更多的媒体查询特性查询W3C

2.6 实例

不同设备屏幕下的根节点字体基准大小

@size: 16/750;

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

@media screen and (min-width:500px) and (max-width:720px) {
    html {
        font-size: (500px * @size);//500px * 16 / 500
    }
}

@media screen and (min-width:414px) and (max-width:500px) {
    html {
        font-size: (414px * @size); //414px * 16 / 500
    }
}

@media screen and (min-width:400px) and (max-width:414px) {
    html {
        font-size: (400px * @size);
    }
}

@media screen and (min-width:384px) and (max-width:400px) {
    html {
        font-size: (384px * @size);
    }
}

@media screen and (min-width:375px) and (max-width:384px) {
    html {
        font-size: (375px * @size);
    }
}

@media screen and (min-width:360px) and (max-width:375px) {
    html {
        font-size: (360px * @size);
    }
}

@media screen and (min-width:0px) and (max-width:360px) {
    html {
        font-size: (320px * @size);
    }
}

—媒体查询+rem实现页面动态变化页面元素动态变化

2.7 引入

当页面样式过于繁杂的时候我们可以使用<link rel='stylesheets' media='screen and (min-width: 320px)' heft ='.../'>来引入不同设备样式

---

3.0 rem适配方案

3.1 设计稿常见的尺寸

• iphone(4/5) — 640px
• iphone(6/7/8) — 750px
• android — 320px,360px,375px,384px,400px，500px,720px

一般情况下我们使用一套或两套来适应大部分的屏幕

3.2 动态设置html的基准值font-size的大小

1 — 假设我们需要适配不同屏幕，而我们是基于720px屏幕宽度来开发的
2 — 我们先将设计稿划分为若干份，这里我设置为20份，划分的标准其实不一定
3 —将每一份作为html上基准字体的大小

//这里使用less书写
划分20份
@division: 20;

意味在媒体查询屏幕大于0px，小于400的情况下 1 rem = 20px
@media screen and (max-width:400px){
	html{
		font-size: calc(400px / @division);
	}
}

意味在媒体查询屏幕大于400px，小于500的情况下 1 rem = 20px
@media screen and (min-width:400px) and (max-width:500px){
	html{
		font-size: calc(400px / @division);
	}
}

意味在媒体查询屏幕大于500px，小于720的情况下 1 rem = 25px
@media screen and (min-width:500px) and (max-width:720px){
	html{
		font-size: calc(500px / @division);
	}
}

意味在媒体查询屏幕大于720px的情况下 1 rem = 36px
@media screen and (min-width:720px){
	html{
		font-size: calc(720px / @division);
	}
}

4 — 当时我们根据720的设计稿书写元素大小时，按照正常的rem布局，在不同的媒体宽度下我们已经设置好1rem等比例的宽度了，无需再更改其他大小页面上的元素了

需要一个200px的正方形div

---------------------
@size:36;

在720px的屏幕下
div{
	width: (200rem / @size); -------》5.555555555555556rem
	height: (200rem / @size); -------》5.555555555555556rem
}

在400px的屏幕下
div{
	width: (200rem / @size); ----》5.555555555555556rem
	height: (200rem / @size); -------》5.555555555555556rem
}

得到的屏幕缩放下的元素尺寸是等比例的

元素大小的取值方法
页面元素的rem值 = 页面元素的px值 /（屏幕宽度 / 划分份数）