手軽にウェブサイトをレスポンシブウェブデザイン(iPhoneなどのスマホに対応)にする方法です。
右側にメインコンテンツ部、左側にサイドメニューがある一般的なデザインで、スマホで見るとサイドメニューをメインコンテンツの下に表示するようにします。
スマホの判別は
@media screen and (max-width: 48em),screen and (max-device-width:480px)
でやります。
ホントは画面サイズによっていろんな要素の最大幅・最小幅を設定した方がいいのですが、とりあえずこれで80%対応できます。
凝りだすとたいへんなんですよね～。だから費用対効果のいいところでやめます。(笑)
“2018年版 ウェブサイトを30分でレスポンシブ(スマホ対応)に90%実装する方法” の続きを読む