根據viewport的size自動調整fontsize大小

世有因果知因求果發表於2015-11-12
View

現在的網站必須要考慮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/

相關文章