stylus版レスポンシブ・フォントサイズのmixin

2242 ワード
CSS stylus Responsive CSS テキストリンク

npx相当のvwに変換して書き出します。
codepen

使用例

main.styl
p
  responsive-font-size(14)

は……

css
p {
  font-size: 1.4rem;
}
@media screen and (max-width: 40em) {
  p {
    font-size: 4.375vw;
  }
}

のように書き出してくれます。
これは、デフォルトのdesktop幅では、「1.4rem(14px)」、
mobile幅では(ここでは40em未満に設定)、「320px：14px」の比率で表示します。

mixin

_fontsize.styl
html
  font-size 62.5%

get-vw(size, viewport = 320)
    rate = 100 / viewport
    rate * size * 1vw

responsive-font-size(fontsize = 10)
    font-size: (fontsize * .1rem)

    @media screen and (max-width: 40em)
        font-size: get-vw(fontsize)

参考