これまでの知見からサイトを実際に作ってみる
1:まずするべきこと(レスポンシブ対応)
HTMLに設定を追加する
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>style.scssに以下のような設定をする
// スマホ画面の設定
@import "breakpoints/base";
// スマホ横向きのときの設定
@media (min-width: 480px) {
@import "breakpoints/480up";
}
// タブレットのときの設定
@media (min-width: 600px) {
@import "breakpoints/600up";
}
@media (min-width: 960px) {
@import "breakpoints/960up";
}
@media (min-width: 1280px) {
@import "breakpoints/1280up";
}
// Retinaディスプレイで適用
@media (min-resolution: 192dpi)
,(-webkit-min-device-pixel-ratio: 2) {
@import "breakpoints/2x";
}
// 印刷時のみ適用される設定
@media print {
@import "breakpoints/print";
}モバイルファーストが基本