ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSにおけるremとモバイル端末でのレイアウト方法を深く理解する
CSSにおけるremとモバイル端末でのレイアウト方法を深く理解する
- yuliaオリジナル
- 2018-09-17 16:15:081560ブラウズ
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 つです。デバイス
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 サイトの他の関連記事を参照してください。