More than 1 year has passed since last update.

pxをViewport Widthに変換するStylus関数

Last updated at 2022-08-01Posted at 2022-07-30

pxをViewport Widthに変換するStylusの関数をつくった

//基準となるwidth(単位はpx)
baseWidth =

px-to-vw(px)
vw = 100 / baseWidth * px
unit(vw, 'vw') //'vw'という文字列を末尾につける。vwの数値だけを返したい場合は削除

Usage

1.基準となるwidth(単位はpx)を設定し、関数を記述

_setting.styl

baseWidth = 1400

px-to-vw(px)
vw = 100 / baseWidth_pc * px
unit(vw, 'vw')

2.変換したいpxを引数に与えて関数を呼び出す

style.styl

p
  font-size px-to-vw-pc(16)

3.Stylusをコンパイル。CSSにvwとして出力される

style.css

p {
  font-size: 1.142857142857143vw;
}