日別アーカイブ: 2021年9月10日

JavaScript9(サイト作成(1))

これまでの知見からサイトを実際に作ってみる

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";
}

モバイルファーストが基本

続きを読む