下記で学習しました
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
Flexボックスを利用しているサイトをスマホ。タブレット対応させます。
cssに下記のようなメディアクエリを使って対応させます。画面サイズが600px以下の場合のcssを記述
@media(max-width:600px){/* 画面サイズが600px以下はここを読み込む */}PC(1920px)、タブレット(834px)、スマホ(414px)想定で3種に分類
PCデフォルトとしタブレット、スマホをメディアクエリ内に記述する。PCとタブレットのブレークポイントを1200pxに設定、タブレットとスマホのブレークポイントを600pxに設定する
/* デフォルト＋PC設定を記述する */@media(max-width:1200px){/* 画面サイズが600px～1200pxはここに記述 */}@media(max-width:600px){/* 画面サイズが600px以下はここに記述 */}基礎的はビューポートもあまり理解していませんでした。こちらです
“ビューポート”とは？スマートフォン向けのウェブページでビューポートを設定する