絶賛、ポートフォリオの作成中です。
リキッドレイアウトというものに挑戦してみた。
タップで読みたいところにジャンプします
レスポンシブ対応の対応法
レスポンシブ対応の考え方として以下の2つがある。
- ソリッドレイアウト (pxで書く)
- リキッドレイアウト (remで書く)
リキッドレイアウトのメリット
リキッドレイアウトは、画面幅が小さくなっても表示をそのまま小さく表示できる方法です。
タブレット表示画面サイズの1200px～768pxで使われることもあり、コーダーの工数を減らすのに役立つ。
リキッドレイアウトの作り方
STEP
コンテナ幅以外のpxをすべてrem表示にする
STEP
HTMLのルートのフォントサイズを画面幅に応じて縮小する。
リキッドレイアウトの気にかかる点
気にはなっていたのは、本文のフォントが必要以上に小さくなってしまうのではないかという事。
googleの推奨フォントは16px。
絶対守らないといけなことがあって、それは本文の60％が12pxを下回ってはいけないということだ。
条件：
- 本文16pxで作成
- ブレイクポイントを768pxで設定
- ブレイクポイントまで縮小した時に12pxを守る。
| 最小フォント | 終了する画面幅 | 開始できる画面幅 |
| 12px | 768px | 1024px |
| 14px | 768px | 878px |
モバイルのフォントを14pxに設定されているデザインだと、最小フォントが12pxとした場合、フォントサイズが12pxにまで小さくなって14pxに戻る？計算間違っているかしら？
タブレットサイズの場合は使用を避け、360px以下の表示の時に使っていこうと思う。
本文はできるだけ16px～14pxで書こうと思う。
ピクセル値をrem値に変換する関数の書き方
calcの中に「/」を使っての割り算はかまわないが、「数値 / 数値」という計算方法は非推奨ということと、新しい関数を知ったのでメモ。
_function.scssに保存します。
@use "sass:math”;
/// $pixels 実際に使うピクセル値 単位なし
/// $fontSize-Base-PC 基本のピクセル値 単位なし
/// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /
/// px → rem の計算
/// Sassでは、math.div関数の使用が推奨
@function f-rem($pixels) {
@return math.div($pixels, $fontSize-Base-PC) * 1rem;
}画面サイズに応じてフォントサイズを小さくする関数の書き方
_function.scssに保存します。
@use "sass:math”;
/// $pixels 実際に使うピクセル値 単位なし
/// $screen-size スクリーンサイズ 単位なし
/// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /
/// vwに応じた計算
/// Sassでは、math.div関数の使用が推奨
@function f-vw($pixels, $screen-size) {
@return math.div($pixels, $screen-size) * 100vw;
}htmlタグに設定する
@use "function" as *;
html {
/// 基本PCフォントサイズ
font-size: $fontSize-Base-PC;
/// 基本SPフォントサイズ
@include responsive(sm) {
font-size: $fontSize-Base-SP;
}
@include responsive(xs) {
/// 画面サイズに応じて小さくする
font-size: f-vw($fontSize-Base-SP, $break-xs);
}
}htmlタグに設定しないとうまく稼働しない。
これで極小デバイスでの横スクロールへの対応が出来そうだ。
コメント