WEB前端中rem单位的应用（一）

在最近的开发和之前的的使用中，我们一般面对需要适应多端的项目或者需要移动端多设备的适应，都可能会引入rem，em这样的单位。

如果你要着手一个以上类似的项目，我们也同样建议使用rem或者干脆引入框架，等到你分析框架时，

你会发现，有些成熟的框架也是借助rem来解决不同的屏幕大小带来的适应问题。

接下来我们就简单的阐述一下我最近在项目中如何使用rem：

首先我们要明确，为什么要使用rem，那我们要先从rem开始介绍。

什么是 rem？

我们从css中可以得到对它最精简的介绍翻译：

rem是相对长度单位。相对于根元素(即html元素) font-size 计算值的倍数

从上面的通用介绍里我们已经知道了rem到底是什么东西了，然后我们应该如何借助它的力量呢？

既然他可以跟随根元素相对变化，那也就是说如果我们能够让根元素的font-size动态变化，

就能够实现，使用一套大小，实现多端多设备的单位长度的适应问题。

那这个rem的使用会转化为一个如何让根元素的font-size动态变化问题。拿我最近在用的一套比例来说明。

/*dpi*/
/* for 1080+ px width screen */
/* for 1080 px width screen */
/* for 800 px width screen */
/* for 800 px width screen */
@media only screen and (min-width: 751px) { html, body { font-size: 31.25px; } }
/* for 800 px width screen */
@media only screen and (max-width: 750px) { html, body { font-size: 31.25px; } }
/* for 720 px width screen */
@media only screen and (max-width: 720px) { html, body { font-size: 30px; } }
/* for 640 px width screen */
@media only screen and (max-width: 640px) { html, body { font-size: 27px; } }
/* for 540 px width screen */
@media only screen and (max-width: 540px) { html, body { font-size: 22.5px; } }
/* for 480 px width screen */
@media only screen and (max-width: 480px) { html, body { font-size: 20px; } }
/* for 450 px width screen */
@media only screen and (max-width: 450px) { html, body { font-size: 18.9px; } }
/* for 414 px width screen */
@media only screen and (max-width: 414px) { html, body { font-size: 17.25px; } }
/* for 375 px width screen */
@media only screen and (max-width: 375px) { html, body { font-size: 15.625px; } }
/* for 320 px width screen */
@media only screen and (max-width: 320px) { html, body { font-size: 13.5px; } }

以上就是一个较为全面的fontSize的动态变化案例了，其中800px以上屏幕可再细致划分，只要你懂这套媒体查询代码的原理即可。

如果说看到这里，你对媒体查询有些困惑，那我猜你一定连Bootstrap都没有用过，或者你只知道如何用，却从来没有分析过她的原理。

我们可以利用接下来的几分钟简单的介绍下媒体查询。

接下来我来引用一段菜鸟教程里的解释：

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

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

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

其实看到这里对于这个概念还是不明确，并且媒体查询中包含很多关键字，那我们常用的有 and not only

only关键字防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式

and关键字用于合并多个媒体属性或合并媒体属性与媒体类型

not关键字应用于整个媒体查询，在媒体查询为假时返回真

举个简单的例子：

/*媒体查询支持最大宽度为320px应用以下CSS html body 的fontsize设置为13.5px*/
@media only screen and (max-width: 320px) { html, body { font-size: 13.5px; } }

其中max 或者 min 代表了最小 或者 最大的概念

利用几个关键字我们可以轻松的自定义出来我们所需要的媒体查询条件

以上就是今天的rem实现适应多端的方法之一

ps：其实现在讲这个的非常多，我就是来大姨妈太痛苦了，实在是想不到该干啥，

就随便写点分分心，我要疼死了，现在好多了，emmmm下次见，还有下次的话

资料查询：

http://www.runoob.com/cssref/css3-pr-mediaquery.html

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries