CSS中的rem

为什么会使用rem呢？主要还是浏览器和设备的大小不一。

这样就涉及到页面布局的不统一啦，先说说pc中的多栏布局吧，多栏布局有三种基本的实现方式：固定宽度、流动、弹性，下面我们就分别说说这三种布局吧。

固定宽度布局的大小不会随着用户调整浏览器窗口大小而变化，一般是900到1100像素宽。其中960像素是常见的，因为这个宽度适合所有PC显示器、而且能够被16、12、10、8、6、5、4、3整除，不仅容易计算等宽分栏的数量，而且计算结果也能得到没有小数的像素值。

流动布局的大小会随着用户浏览窗口大小而变化。这种布局能够更好的适应不同的屏幕，但同时意味着放弃对某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化，在栏宽度加大时会出现内容元素周围添加空白来保持内容居中，当宽度变小，可能会出现重叠。

弹性布局与流动布局类似，在浏览器窗口变化的时候，布局布局变宽，而且所有内容元素的大小也会变化，让人产生一种所有东西都协调的变大或者变小的感觉。

然后说说移动端，在大的pc屏幕的最佳体验和手机中的最佳体验有天壤之别。在pc上，可以使用多栏布局效果很好，但多栏布局到了手机上就会变窄。用一个栏来组织成唯一可行的方案，这样，用户使用简单的扫屏的方式，实现更好的体验。

那么如何实现说的这种响应式设计呢？

小设备上一种布局不能适应多种屏幕尺寸，我们需要一种能够检测屏幕大小的方式，然后响应地修改布局。就是需要让页面能够自己响应屏幕的变化。这这里大家都应该想到能够使用的方式 一种：就是媒体查询的方式。另一种：使用rem 或者em 采用设置html的font-size使元素大小变化，来适应布局的适应。

先说说媒体查询的方式吧，媒体查询实现响应式的要素：

媒体查询：是一种CSS语法，可以根据浏览器的特性，一般是屏幕或浏览器宽度提供CSS规则。

流式布局：同样的使用em或百分比或者rem等相对单位设定页面总体宽度，让布局能够随屏幕大小而缩放。

弹性图片：是使用相对单位确保图片再大也不会超过容器。

媒体查询是CSS代码的容器，其中的CSS只在某些条件（比如，当前页面要被打印或者要显示在某种类型或尺寸的屏幕上）具备时才会应用。媒体查询可以用两种方式来写 @media规则和<link>标签的media属性

@media print{nav{display:none;}}

这句申明为：如果当前页面要打印，就不显示nav元素。

最大屏宽度

@media screen and (max-width:568px) {.clumn{width:96%;}}

这句表示：该屏幕宽度不超过568px，那么css种的.clumn类的元素宽度为96%。

上面这种写法就是断点，断点在这里指的是媒体查询起作用的屏幕宽度，如果设备的宽度等于或者小于断点的宽度，那么css就会起作用。

ok，说了这么多现在该说重点啦，那就是px 、em、rem

在Web页面初期制作中，我们都是使用px来设置我们字体，元素高宽，因为它比较稳定和精确。但是这种方式存在一个问题，当用户在浏览器中浏览我们制作的web页面时，改变了浏览器的字体大小，这时会导致我们的Web页面的布局被打破。影响用户体验，因此，这时就使用em来定义web页面的字体。

使用px为单位是比较方便，而又一致，但在浏览器中放大或缩放浏览页面会存问题，这样就使用em就能解决，只不过em是针对父级元素而言的，使用起来不是很方便。

CSS3新增了一个相对单位rem(root em，根em)，这个单位引起啦广泛关注。这个单位与em区别在于使用rem为元素设定字体大小时、仍然是相对大小、但相对的知识HTML根元素的font-size。这个单位可谓相对大小和决定大小的优势于一身，通过它既可以做到只修改根元素就成比例的调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前除了IE8及更早的版本以外，所有浏览器均支持rem。对于不支持它的浏览器，应对方法就是多写一个绝对但闻的声明。这样就可以忽略用rem设定的字体大小：p{font-size:14px;font-size:.7rem}

em 和rem是相对单位，可以对px和em、rem转换工具 http://pxtoem.com/