web関連

レスポンシブで幅に合わせて自動でフォントサイズを変更する方法

レスポンシブだと、デザイン通り難しい場合もあるし、フォントサイズも%?px?em?rem?一体どれを使ええばいいのって迷ってました。
でも今は考えるのがめんどくさいのでもっぱら「vw」で対応してます。
これでSassで横幅に合わせて自動計算させれば勝手にCSSにデザイン通りのサイズがCSSでコンパイルできるというわけです。
そもそもvwってなんぞやって人はわかりやすい人のサイトで確認してください(投げやり)

 

では、実際にどうすればいいのかやっていきましょう!

 

Sassで横幅に合わせてサイズの変わるテキストにする方法

横幅から文字サイズの割合を出すには「(フォントサイズ/デザインの幅)*100」。
これをSassでの計算させます。

 

 

フォントサイズ指定の際は「@include fontsize(デザインのフォントのサイズ);」とすれば自動で計算してCSSでコンパイルされます。

 

 

これで端末で横幅が変わっても簡単にデザイン通りのフォントサイズに!
レスポンシブいろいろな対応の仕方があるんだな〜と思った今日このごろです。

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

イラスト制作、webサイト制作、商品のご紹介など様々なお仕事を募集しております! 下記リンクよりお気軽にご連絡ください!

お仕事・ご依頼について

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)