レスポンシブデザイン

ノートPCは、スマホと画面幅が異なるため、デプロイ後にスマホで確認するとレイアウトが崩れている・・・ということがあります。

例えば、ノートPCだとこんな感じだったのが、

スマホの画面だと(GoogleChromeの検証ツールを使用しています)、

こんな感じに崩れてしまっています。

これを直していきます。

まずは、検証ツール上で位置調整をしていきます。

いい感じになりました。

次に、この変更を適応させるため、コードを記述します。

.users-edit {

position: absolute;

top: 50px;

width: 16%;

left: 340px;

margin: 100px 250px;

border: 1px solid gray;

text-align: center;

@media(max-width: 1000px) {

width: 26%;

left: 310px;

margin: 300px 50px;

}

@media以降の記述が、横幅が1000px以下の時に適応されます。

これにより、PCでもスマホでも意図する見た目となりました。

PC

スマホ

以上。