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ソリューション

推薦する

UDP 接続オブジェクトの原理分析と使用例

以前、UDP を使い始めるために簡単な UDP サーバーとクライアントの例を作成しましたが、実際に使...

MySQL の昇順および降順データソートの実装

データの昇順、降順ソート1. フィールド名による単一フィールドのソート順機能:どのフィールドを基準に...

テンプレートタグの使用方法の詳細な説明(Vue での使用方法の概要を含む)

目次1. HTML5のテンプレートタグ2. テンプレートタグ操作のプロパティとメソッド3. Vueの...

MySQL データ型の選択原則

目次小さいけれど美しいシンプルにNULL値を避けるデータタイプを選択する手順データ型の紹介1. 文字...

Linux でシェル スクリプトを使用して jar パッケージ プロジェクトを展開するための完全な手順

1. JDKをインストールする コンピュータの動作桁を確認します。 uname -ar 2017 x...

Mysql が CPU を過剰に占有する場合の最適化方法 (必読)

Mysql が CPU を占有しすぎる場合、どこから最適化を開始すればよいでしょうか? CPU 使...

VMware15.5でcentos8.1をインストールし、物理メモリが不足する問題に対処する最も完全なチュートリアル

1. 仮想マシンの準備1. 新しい仮想マシンを作成する 2. 仮想マシンのカスタマイズを選択する 3...

ChromeとIEに対応したWMPに埋め込まれたHTMLの詳細な紹介

実際には、対応する記述方法は多数ありますが、最も一般的なのは object + embedded で...

JS ES6における構造化分解についてお話しましょう

概要es6 では、配列またはオブジェクトから指定された要素を取得する新しい方法が追加されました。これ...

初心者向けのHTMLタグネストルールの詳細なまとめ

最近、HTML を再度学習しており、これは HTML に対する新たな理解と言えます。これを過小評価し...

Linux で大容量メモリ ページを持つ Oracle データベースを最適化する方法

序文PC サーバーは今日まで発展を続け、パフォーマンスにおいて大きな進歩を遂げてきました。 64ビッ...

mysql 基本操作文コマンドの詳細な説明

1. MySQLに接続するフォーマット: mysql -h ホストアドレス -u ユーザー名 -p ...

HTML+CSS+jQuery はスクリーンショットで検索ホットリストタブ効果を模倣します

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

jsを使用して写真をアップロードする機能を実現する

フロントエンドで画像をアップロードする原理は、入力 type="file" タグ...