首先是推论：
//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中添加了另一个新单元用于自适应布局。 那就是我们明天的排骨（手工狗头）； 雷姆；
em和rem有什么区别和联系？
第一个是我们的em。 这个单位是根据其父元素的字体大小来估计的，即1em是其父元素的字体大小。 ps：父元素的字体大小是20px，那么子元素的1em就是20px。 3em 为 60px； 我们用的最多的是首行缩进：text-indent:1em; （hiahahia）是不是很熟悉？ 不过由于这个东西只能根据它的父元素来估计，所以它的使用涉及到很多估计css3 计算属性，所以我们在实际项目中使用它的次数非常有限。
CSS3针对这些情况推出了新的单位rem（首次亮相，自带bgm）：rem的使用和em类似，只不过em是根据父元素的字体大小来估计的，而rem是根据父元素的字体大小来估计的基于根元素（即 HTML 标签）的字体大小。 在这些情况下，如果 HTML 的字体大小是 20px，那么页面中所有元素的 1rem 将是 20px，依此类推...
使用 rem 进行自适应布局——简单手动适配所有屏幕
使用 rem 进行自适应布局的关键是给 html 形参一个动态的 font-size。 这里我们可以使用js获取页面dom加载后的页面高度（宽度也可以），然后乘以一个固定的数量，比如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之后，我们就可以很方便的设置页面任意地方的大小，比如宽度、高度、padding、margin，而且这都是自适应的！
关于 calc()
在做自适应布局的时候，会遇到一些需要固定宽度和高度的地方。 例如，div 的长度是屏幕规格的一半，但内边距为 10px。 在这些情况下，如果我们直接给长度50%css3 计算属性，或者估计rem单位后，给padding。 由于盒子模型的原因，长度为50%+20px。但是，由于50%是一个不固定的值，所以很难估计出具体的值。 在这些情况下，我们可以使用CSS3中的一个估计方法，calc()，可以设置
div{宽度：计算(50% - 20px);}
这样设置后得到的结果就是估计的结果。 任何需要给出具体值的地方都可以使用 calc 来估计。 但主要要求是，目前该方法只能进行+-*/四种算术运算，并且估计符号前后需要有一个空格。 当然，50%也可以估算后换算成rem单位。
当心：
calc里面的表达式中，使用运算符号时，必须加两次空格（虽然乘法和除法可以忽略，但还是建议包含）！ ！ ！ ！ ！ ，否则会出现解析错误！ ！顶部演示
