今回はフォントや画像をvwで指定するmixinについて紹介します。ブラウザサイズに応じてサイズが可変できるので柔軟なレスポンシブが可能です。 説明環境は以下 macOS Catalina v10.15.5Visual Studio Code v1.52.1 フォントや画像をvwで指定するmixin vwで指定するためには、px数値をvwに変換する必要があります。そのためにSassのfuctionとmixinを使います。 mixinに書くこと vwの指定をするために、以下のmixinを書きます。 //pxをvwに変換するfunction @function _get_vw($size, $viewport: 375) { $rate: calc(100 / $viewport); @return $rate * $size * 1vw; } //フォント用のmixin @mixin font
![フォントや画像をvwで指定するmixin - レスポンシブしやすい設計方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/702e06e35f394926b774ced428631f6d294e053e/height=288;version=1;width=512/https%3A%2F%2Fyumegori.com%2Fwp-content%2Fuploads%2F2020%2F12%2Fimg-font-vw-setting00-min.jpg)