More than 5 years have passed since last update.

font-sizeをremとvwを混ぜていい感じにレスポンシブに拡縮してくれるようにする

Last updated at 2017-08-28Posted at 2017-08-28

僕は普段rem指定でフォントサイズを決めてるのですが、RWDの案件などでは横幅がiPadサイズとかになると、文字がとても小さくなり読みにくくなることがある。以下のコードでrem指定のまま、いい感じに拡縮できるようになる。

$sp_widthはPhotoshopなどのデザインデータの横幅。

html {
    font-size: 62.5%; 
}
@media (max-width: 899px) {
    html {
       $sp_width: 320px;
       font-size: 100vw * (10px / #{$sp_width}); 
}