web前端开发之rem布局

1.rem布局

1.1 em和rem

rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em:

em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN

em可以让页面更灵活，比起写死的px值，em更有张力，改动父元素的字体大小，子元素会等比例变化，但其复杂的计算让人诟病，甚至有人专门做了个px和em的计算器，不同节点像素值对应的em值

em做弹性布局的缺点还在于牵一发而动全身，一旦某个节点的字体大小发生变化，那么其后代元素都得重新计算

于是。。。

rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN

1.2 为什么使用rem 布局

百分比布局和flex布局都没有解决两个问题

采用 rem 布局，可以让屏幕发生变化时，元素的高度和宽度以及文字大小等能够等比例缩放

其实rem布局的本质是等比缩放，一般是基于宽度

1.3 rem单位

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

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

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

 
hello rem
 

优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

2. 媒体查询

2.1 为什么使用媒体查询

上面案例中，使用rem作为元素的单位

元素的尺寸就会随着 html 中 font-size 的变化而变换

当屏幕较大时，设置 font-size 为较大值，元素就会变大；当屏幕较小时，设置 font-size 为较小值，元素就会变小

问题来了：如何在屏幕大小发生变化时，改变 html 的 font-size 的值呢，换言之，如果在不同大小的屏幕中渲染当前页面时，动态的根据当前屏幕初始化 html 的 font-size 的值呢？

媒体查询是一种比较友好的方式，但不是唯一的方式

2.2 什么是媒体查询

媒体查询（Media Query）是CSS3新语法。

2.3 媒体查询语法

例如：

内嵌式代码(推荐)：

@media mediatype and|not|only (media feature) {CSS-Code;
 }
 @media (min-width:577px) and (max-width:768px){div{width: 50%;}
 }
 

外链式:

2.3.1 mediatype 查询类型

2.3.2 关键字

目的将媒体类型和媒体特性链接到一块,进行设备检测

2.3.3 媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。

用来描述设备的特点,比如宽度,高度…

注意他们要加小括号包含