CSS3 のメディアクエリと rem レイアウトを組み合わせてモバイル画面に適応

CSS3 のメディアクエリと rem レイアウトを組み合わせてモバイル画面に適応

CSS3 構文: (750 ピクセルのデザインの場合、1rem = 100 ピクセル)

@media 画面のみで (最小幅: 320px) かつ (最大幅: 479px) {
    html{
        フォントサイズ: 42.67px !重要;
    }
}
@media 画面のみで (最小幅: 480px) かつ (最大幅: 639px) {
    html{
        フォントサイズ: 64px !重要;
    }
}
@media 画面のみで (最小幅: 640px) かつ (最大幅: 749px) {
    html{
        フォントサイズ: 85.34px !重要;
    }
}
@media 画面のみで (最小幅: 750px) かつ (最大幅: 959px) {
    html{
        フォントサイズ: 100px !重要;
    }
}
@media 画面のみで (最小幅: 960px) かつ (最大幅: 1241px) {
    html{
        フォントサイズ: 128px !重要;
    }
}
@media 画面のみで (min-width: 1242px) {
    html{
        フォントサイズ: 165.6px !重要;
    }
}

jsコントロール

(zepto/jQuery) (750px デザインの場合、1rem = 100px)
関数setFont() {
    window_width を window.innerWidth とします。
    font_size = parseFloat(window_width / 3.75); とします。
    $('html').css('フォントサイズ', font_size);
}

$(window).on('resize', 関数() {
    フォントを設定する();
});

要約する

上記は、CSS3 のメディア クエリと rem レイアウトを組み合わせて、携帯電話の画面に適応させる方法についてご紹介したものです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。

<<:  HTMLウェブページ切り替えのさまざまな変換効果

>>:  ルート権限なしでログインするためのDockerソリューション

推薦する

CSS ラベルモード表示プロパティの詳細な説明

コードは次のようになります。 <!DOCTYPE html> <html> ...

WeChatアプレットはシンプルなチャットルームを実装します

この記事では、WeChatアプレットの具体的なコードを共有し、簡単なチャットルームを実装します。具体...

MySQLの関連ロックについての簡単な理解

この記事は主にInnoDBのロックに関する知識を素早く理解してもらうことを目的としています。 Roc...

Javascript サンプル プロジェクトでの虫眼鏡効果の実装プロセス

目次序文事例: JD.com の虫眼鏡効果の模倣オフセットシリーズクライアントシリーズスクロールシリ...

MySQLファイルストレージの詳細な説明

ファイルシステムとは何かInnoDB や MyIASM などのストレージ エンジンはテーブルをディス...

Telnet は Alpine イメージの busybox-extras に移動されました

Alpine イメージの telnet はバージョン 3.7 以降、busybox-extras パ...

Vue プロジェクト コード分割ソリューション

目次背景目的分割前プロセス設計ディレクトリ構造の設計問題分割後プロセス設計ディレクトリ構造の設計問題...

MySQL の左結合操作における on 条件と where 条件の違いの紹介

優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...

Redmine の Docker インストール手順

イメージをダウンロードします(オプションの手順です。省略した場合は、手順 3 と 4 で自動的にイン...

crontab の実行結果を電子メールでユーザーに通知する方法

症状Centos7 ホストに crontab タスクを設定しましたが、時間が来るとメールを実行して「...

MySQL 完全崩壊: クエリフィルタ条件の詳細な説明

概要実際のビジネス シナリオ アプリケーションでは、ビジネス条件に基づいて対象データを取得およびフィ...

Docker Swarmの概念と使用法の詳細な説明

Docker Swarm は、Docker によって開発されたコンテナ クラスター管理サービスです。...

Reactイベントスロットリング効果が失敗する理由と解決策

目次ここでの問題は次の通りです:解決策1:解決策2: コンストラクタで初期化を割り当てる採掘場の概要...

JavaScript の new 演算子を自分で実装する方法

目次コンストラクタ新しいオペレーター自分で新しいものを実装するコンストラクタnew を導入する前に、...