rem是设计响应式网页的神器，因为rem单位是相对HTML元素的font-size属性的，因此当使用rem作为属性单位时，当改变HTML元素的font-size，其他使用rem作为单位的元素也会跟着适配大小。那么如何根据屏幕的大小制作一个响应式的网页呢。
用css媒体查询用相当于视口宽度单位的vw值（这个下一部分讲）这里先说说用css媒体查询，如下面所示，屏幕查询可以指定一个屏幕大小，当屏幕是你指定的大小时，它就会运行里面的代码，但是这种方法有一个缺点---它并不能控制更加精确的尺寸，所以我们可以使用vm来解决这个问题。
<style> body,div{ margin:0; padding:0; } html{ font-size:12px; } @media screen and (min-width:320px){ html{ font-size:14px; } } @media screen and (min-width:640px){ html{ font-size:16px; } } @media screen and (min-width:1000px){ html{ font-size:18px; } } .box{ width:10rem; height:10rem; font-size:2rem; background-color:pink; }</style><div class="box">rem</div> vw,vh,vmin,vmax基于视口的单位视口单位可以用来什么，比如:
实现响应式设置相对视口的宽度和高度，可以实现水平垂直居中实现网格布局将图片按照屏幕的比例显示这几个单位是相对于视口的，也就是可视区域，总共分成了100份。如果想让一个字体的大小在指定的区间内变化，比如可视区域的大小在980px-320px时，让字体的大小在14-20之间变化，可以
14-(20-14)*(980-320)/(980-320)
<style> body,div{ margin:0; padding:0; } html{ font-size:20px; } @media screen and (max-width:980px){ html{ font-size:calc(14px+6*(100vm-320px)/660); } } .box{ width:10rem; height:10rem; font-size:2rem; background-color:pink; }</style><div class="box">rem</div>除了用这些基于视口的单位来做响应式，还可以做一些其他的事情。我们知道，如果某个值可以继承，则百分比参照的是父元素计算的值。而当父元素不设置高度时，则是根据子元素高度来确定的。所以，如果没有直接设置宽度和高度，100%的设置是没有作用的。如果用视口单位，就不会有这种情况了，因为它是相对屏幕可视区的
.box{ width:100vw; height:100vh; background-color:pink;}如果要实现水平垂直居中
<style> body,div{ margin:0; padding；0；}.box{ width:100px; height:100px; margin-left:calc(50vw-50px); margin-top:calc(50vh-50px); background-color；pink;}</style><div class="box">hello css</div>用视口来实现网格布局
<style>body,div{ margin:0;}.column-1{ float:left; width:100vw;}.column-2{ float:left; width:calc(100vw/2);}.column-3{ float:left; width:calc(100vw/3);}body>div{ overflow；hidden；}div>div{ height:35px; outline:1px solid #dedede;}.box-1 div{ background-color:red;}.box-2 div{ background-color:orange;}.box-3 div{ background-color:pink;}</style> <div class="box-1"> <div class="column-1"></div> </div> <div class="box-2"> <div class="column-2"></div> <div class="column-2"></div> </div> <div class="box-3"> <div class="column-3"></div> <div class="column-3"></div> <div class="column-3"></div> </div>另外，当需要将图片按照屏幕的比例显示时，用视口单位也是不错的选择
chch是一个相对于数字0的大小，比如定义了5ch的宽度，那么就只能装下5个0。实际上1ch=1个英文=1个数字，2ch=1个中文。
<style> body,div{ margin:0; padding:0; } .box{ width:5ch; background-color:grey; } </style> <div class="box"> 000000 </div>如果项目需要限制输入个数，可以使用下面代码
<style> body,div{ margin:0; padding:0; } h1{ width:18ch; overflow: hidden;//超出隐藏 white-space: nowrap;//防止换行 text-overflow: ellipsis;//省略号 font-size: 50px; background-color: deeppink; } </style> <h1> 标题被限制输入了，超出隐藏哦。 </h1>