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)