CSS
stylus
Responsive

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

More than 1 year has passed since last update.

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)



参考