スマホ・レスポンシブ

.htmlファイルに 以下のように記述する。


headタグ内に

<meta name="viewport" content="width=device-width, initial-scale=1">

style.cssファイルに 以下のような感じで記述。
(数字は、それぞれ自分好みに編集)



@media screen and (max-width: 640px){
	img{
		width:100%
	}

body{
        font-size:17px;
}

}

当サイトは、現在(2020年8月)、横幅が640pxなので、 640px以下の画面(スマホ、タブレットなど)で観覧する場合、 画像は、その画面の横幅に合わせてサイズが変わり、文字サイズは、17pxになります。

追記:
パソコンのブラウザでは、あまり気にならないが、 スマホの画面で見ると、文字が、左ギリギリによっているのが、すごく気になる。 640px以下の画面で見る場合、余白をつけたい。

上記のコードのbody内に以下のように付け加えました。



body{
        margin: 0px 7px;
        padding: 0px 7px;
        font-size: 17px;
}


上記のように、値を2つ指定した場合、 前者の「0px」は、上下、 後者の「7px」は、左右の余白になります。

次: meta descriptionとは?
ホームページ作りの記録
kanata.blog