はじめに

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

事前準備

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

手順

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

CityRank.cssの修正

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

CityRank.css

.main-class {
    width: 480px;
    margin-top: 10px;
}

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

リンク

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