LoginSignup
3

More than 5 years have passed since last update.

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

Posted at

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)

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3