根据viewport的size自动调整fontsize大小

如今的网站必需要考虑mobile上访问的友好性，bootstrap做为mobile first的前端框架获得不少应用，它经过默认就使用.col-xs-xx定义的width，同时加上@media(min-width: 768px)等定义的.col-sm-xx来实现当viewport size大于等于sm,md,lg,xl的值时，应该怎样来layout. 若是你不但愿在mobile和pc上展现的Layout不同的话，在使用bootstrap的前提下，你可使用的一个方法就是所有使用.col-xs-xx来定义layout，这样不管是大屏幕的pc，仍是小屏幕的ipad,iphone，一样的网站至少layout都同样了。

可是这时你可能发现还不是你想要的，由于因为字体大小在mobile下太大，因此致使布局很是难看，能不能在相同比例layout的状况下，对应字体，lign-height等也随着font-size按比例下调呢？

<div class="col-xs-1">.col-xs-1</div>

使用css3中定义的vw,vh,vmin的概念能够帮到你。

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

 https://css-tricks.com/viewport-sized-typography/