はじめに

PC用に作ったReactアプリを、CSSの@media(メディアクエリ）を使って、iPhone縦のときも見やすくします。ReactでなくてもHTMLアプリであれば使えます。

事前準備

「React版Reactivesearch v3を使ってゼロから最速でElasticsearchフロントアプリを作る」で作ったコードをサンプルに説明します。

手順

CSSファイルに@media記述を付け加えるだけです。

CityRank.cssの修正

アプリのCSSで全体幅を指定しているmain-classセレクタの下に、横幅が768px以下の画面のときにmain-classセレクタを上書きする定義を@mediaを使って記述します。

.main-class{width:480px;margin-top:10px;}@mediascreenand(width<=768px){.main-class{width:360px;margin-top:10px;}}

リンク

CSSでメディアクエリ(Media Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。