CSSにおけるremとモバイル端末でのレイアウト方法を深く理解する-CSSチュートリアル-php.cn

CSSにおけるremとモバイル端末でのレイアウト方法を深く理解する

yulia

リリース： 2018-09-17 16:15:08

オリジナル

1553 人が閲覧しました

pxについては皆さんよくご存知だと思いますが、remとなると知らない方もいると思います。今回はremとemとは何か、モバイル端末での配置方法を中心に紹介しますので、必要に応じて参考にしていただければ幸いです。

1.レムとは何ですか？

remはCSS3で新たに追加されたunit属性(ルート要素のフォントサイズ)で、ページのルートノードのフォントサイズに応じて変換される単位です。根！！！！！！！！！ルートノード、つまり html。

例: (以下の例のルートノードは html で、そのフォントサイズは 100px であるため、ルートノード以下の要素に設定される rem は 1rem=100px です。)
rem 16px です。つまり、ルートノードのフォントサイズが設定されていない場合、1rem=16px

<html>
    <head>
        <style>
            html,body{ font-size: 100px;  }
            header{ height: 1rem;width: 1rem;  }  
        </style>
    </head>
    <body></body>
    <header></header>
</html>

ログイン後にコピー

em とは何ですか。相対単位でもあり、em 単位は親要素のフォントサイズに基づいて変換される単位です。 1. em の値は固定されていません。em は親要素のフォントサイズを継承します。

親ノード
例:

<header style="font-size:100px;">//父元素的字体大小是100px
    <div style="height:1em;width:1em;"></div>//所以子元素的em是1em=100px；
</header>

ログイン後にコピー

3. モバイルページ開発スキル:

まずユーザーの使用状況を調査し、一般的なデバイスを要約します。一部のユーザーが使用していますか？ 例: 現在のユーザーのほとんどは 3 種類の携帯電話を使用しています。まず、インターネットから各携帯電話の解像度を調べます。

それらをすべてリストし、メディアクエリを作成します (携帯電話によって解像度が異なるため、ピクセルを使用すると、表示は同じになります。たとえば、子供たちが食事をしている場合、食堂では子供たちに肉まんを渡しますが、たくさん食べる子もいれば、少ししか食べない子もいて、十分に食べられなかったり、無駄になってしまうことがあります。そこで、食堂のおばちゃんが登場しました。アイデアがあれば、小さな友達には、重さ 50 ポンド未満の蒸しパン 1 つ、重さ 50 ポンド未満の蒸しパン 2 つ、これら 3 つの配布方法を受け取ることができます)

私のユーザーグループはおそらくこの 3 つです。デバイス

デバイス名解像度の推定フォントサイズ rem から px への変換

iphone5 320568 font-size: 12px; 1rem=12px

iphone6 375667 font-size: 14px; Plus 414* 736 font-size: 16px; 1rem=16px

最初に基本的なスタイルの書き込みを行うために中間デバイスを取り出します
最初の書き込みは、設計図に従って px で行うことができます (つまり、最初に選択してください饅頭のサイズ)
テンプレートセットの作成を優先し、次にこのテンプレートセットに基づいて他のデバイス用のメディアクエリを作成します

ページ上でのメディアクエリタグの作成を優先します

<meta name="viewport" content="width=device-width,      initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,    user-scalable=no">

ログイン後にコピー

width - ビューポートデバイスの幅
height - ビューポートデバイスの高さ

initial-scale - 初期スケーリング率

minimum-scale - ユーザーが許可する最小比率

maximum-scale にズーム - ユーザーはズームすることができます

user-scalable の最大比率 - ユーザーが手動で拡大縮小できるかどうか

上で割り当てられたので、この方法でメディアクエリを作成します

html,body{ height: 100%; margin : 0; padding: 0; font-size: 14px;}// 初期スタイルは先頭に記述する必要があることに注意してください。！！！メディアクエリの一番下に書くと、上のメディアクエリをカバーします (カスケードスタイルシートなので~)

@media screen and (max-width:320px ) {
    html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
    html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
    html{font-size: 16px;}
}

ログイン後にコピー

初期テンプレートのセットが上に書かれているため、初期テンプレートはすべて記事の最初で、px が使用できない理由を強調しました。そのため、ページ内の px を対応する rem 値に変換する必要があります。

例:

header{
    width:140px;//转化为10rem，因为我们是基于最中间的设备做的，中间设备的font-size：14px，所以140px=10rem。
}

ログイン後にコピー

すべての値を変更します。 px の高さと幅これで、rem の 3 つのデバイスへの適応が完了しました。

以上がCSSにおけるremとモバイル端末でのレイアウト方法を深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。