关于使用rem（css3新增），calc（）进行自适应布局

先上结论：

//vw页面宽度，7.5(设计稿是750px) 就等于 百分百的宽度除以设计稿750px再除以100 
//这里的100是我想相对设计稿缩小一百倍，例如：图片宽40px 高20px 写成 0.4rem  0.2rem就好了
html{font-size: calc(100vw / 7.5);}

关于css中的单位

我们都知道在css中的单位，一般都包括有px，%，em等单位，另外css3新增加一个单位rem。
其中px，%等单位平时在传统布局中使用的鼻尖频繁，不过px单位在进行自适应布局的过程中显得力不从心，大部分的解决方案是使用%为单位配合@media媒体查询来进行自适应布局。不过还有另外一个css3新增的单位来做自适应布局。那就是我们今天的猪脚 （手动狗头）rem；

em和rem的区别与联系呢

首先是我们的em，这个单位我们是根据其父元素的字体大小来进行计算的，即1em为他父元素的字体大小，ps：父元素的字体大小是20px，那么子元素的1em就是20px。3em就是60px；我们使用最多的就是首行缩进：text-indent:1em; （hiahiahia） 是不是很熟悉呢？但是因为这个东西只能根据他的父元素来进行计算，使用起来就涉及到很多的计算，所以我们实际项目中使用的次数非常有限。
css3针对这种情况就推出了一个新的单位rem（闪亮登场，自带bgm）：rem的使用方式和em类似，只不过em是针对父元素的字体大小来进行计算的，而rem则是针对根元素即HTML这个标签的字体大小来进行计算的，在这种情况下加入HTML的字体大小为20px则在页面中所有元素的1rem就是20px，以此类推...

使用rem进行自适应布局----简单的自动适配所有屏幕

使用rem进行自适应布局的关键就是给html赋值一个动态的font-size,在这里我们可以在页面dom加载完毕之后使用js获取到页面高度（宽度也可以），然后将其除以一个固定的定量，比如20，然后再将结果赋值给html的font-size，这样我们就得到了一个会根据页面宽度（高度）的变化而不断变化的值，这个值就是1rem。

//页面大小出现变化的时候再次获取新的font-size值 
$(window).resize(function(){
setHtmlFontSize(20);
}) //初始化执行 setHtmlFontSize(20);
//动态设置html元素的font-size的方法 function setHtmlFontSize(num){ //页面的宽度，其中17为页面默认的导航条的宽度 var _w=document.documentElement.clientWidth-17;
$('html').css('fontSize',_w/num); }

可能看了这个例子你们还是不太明白，那我就再举个例子吧（翘尾巴啦）。
上面的代码中，先使用js获取页面的高度（宽度），除以20之后，再把这个值赋值给html的font-size，得到一个根据页面高度变化而变化的单位1rem，这个时候假设我们拿到的设计稿是640px，我们将其除以20，那么我们就得到在页面高度为640px的情况下1rem就是32px，如果设计图中的图片部分宽度是320px，高度是160px，这个部分需要自适应，那么我们就可以给这个图片宽度 320/32=10rem，而高度就是160/32=5rem。这样赋值之后假如页面的宽度就是640px，那么图片的尺寸就是320px*160px，宽度是屏幕尺寸的一半，高度为1/4，这个时候假如屏幕宽度变为1280px，那这个时候页面中1rem代表的尺寸就变成了1280/20=64px。图片的尺寸就变成了相应的640px 320px，宽度依然是屏幕尺寸的一半，高度为1/4。这样就实现了一个非常简单自适应布局赋值。
通过这种动态的设定HTML的font-size之后，我们可以很轻易的给页面上任何地方，例如width,height,padding,margin设置大小，并且这个都是自适应的哦！

关于calc()

在进行自适应布局的时候会碰到有的地方需要固定宽高，比如一个div宽度为屏幕尺寸的一半，但是在10px的padding，那在这种情况下，假如我们直接给宽度50%，或者计算完之后的rem单位，再给padding，因为盒模型的关系导致宽度为50%+20px。但是又因为50%是一个不固定的值，导致很难计算出一个具体的值，在这种情况下我们就可以使用css3中的一个计算方法，calc（），可以设置

div{width:calc(50% - 20px);}

这样设置之后得到的结果就是计算之后的结果，任何需要给具体的值的地方都可以使用calc来进行计算，不过需要主要目前此方法只能进行+ - * /的四则运算，并且在计算符号前后都需要有一个空格。当然上面的50%也可以换成计算之后的rem单位。

注意点:
calc 内部的表达式，在使用运算符号时，两遍必须加上空格（虽然乘除可以无视，但还是建议带上）！！！！！，不然会解析错误！！演示在最上边