今天我们来介绍下rem在实际开发中是怎么使用的，如何通过rem来实现响应式布局，完成我们的前端开发，下面说下其中的一种方式rem+媒体查询。

我们已经知道我们的rem是相对于根标签html的字体进行计算的，当html的font-size的字体大小改变的时候，1rem所代表的px也跟着改变。那么我们针对不同的手机型号，他的屏幕宽度不同，我们设置html的font-size的大小不同就可以啦。

那么怎么知道屏幕宽度是多少呢？CSS3已经给我们准备好了，媒体查询方式区间设置我们的html的font-size，完美解决！

当然还可以通过js获取屏幕宽度在配合rem这个我们下次再详细介绍。下面是媒体查询配合的方式：

/* 媒体查询 字号 分为20份 */

@media screen and (width:320px){
   html{
      font-size:320/20px;
   }
}
@media screen and (width:360px){
   html{
      font-size:360/20px;
   }
}
@media screen and (width:375px){
   html{
      font-size:375/20px;
   }
}
@media screen and (width:414px){
   html{
      font-size:414/20px;
   }
}
@media screen and (width:412px){
   html{
      font-size:412/20px;
   }
}

今天我们来介绍下rem在实际开发中是怎么使用的，如何通过rem来实现响应式布局，完成我们的前端开发，下面说下其中的一种方式rem+媒体查询。

我们已经知道我们的rem是相对于根标签html的字体进行计算的，当html的font-size的字体大小改变的时候，1rem所代表的px也跟着改变。那么我们针对不同的手机型号，他的屏幕宽度不同，我们设置html的font-size的大小不同就可以啦。

那么怎么知道屏幕宽度是多少呢？CSS3已经给我们准备好了，媒体查询方式区间设置我们的html的font-size，完美解决！

当然还可以通过js获取屏幕宽度在配合rem这个我们下次再详细介绍。下面是媒体查询配合的方式：

/* 媒体查询 字号 分为20份 */

@media screen and (width:320px){
   html{
      font-size:320/20px;
   }
}
@media screen and (width:360px){
   html{
      font-size:360/20px;
   }
}
@media screen and (width:375px){
   html{
      font-size:375/20px;
   }
}
@media screen and (width:414px){
   html{
      font-size:414/20px;
   }
}
@media screen and (width:412px){
   html{
      font-size:412/20px;
   }
}