レスポンシブなlayout_html/css_WEB-ITnoseでのremの適用-htmlチュートリアル-php.cn

レスポンシブなlayout_html/css_WEB-ITnoseでのremの適用

WBOY

リリース： 2016-06-24 11:22:16

オリジナル

1000 人が閲覧しました

rem/em/px/pt friends

px
ピクセルの相対的な長さの単位、モニター画面の解像度に対する相対的な長さの単位

em
相対的な長さの単位、親要素に従って設定フォントサイズ

pt
ポイントは印刷業界で一般的に使用される単位で、1/72 インチに相当します

rem
Web ページの要素 (html) に基づいてフォントサイズを設定する CSS3 の新しい相対単位です

rem は適応に使用されます

rem の特性は、ルート要素の font-size 値に応じて要素の幅と高さを変更できることが想像できます。画面サイズに応じて幅と高さを動的に変更できます。HTML は CSS スタイルで適応効果を実現するために異なる値を設定します。

レムの適応ルール

1. ベースラインを選択します
作成するページはさまざまな画面サイズのデバイスで実行する必要がありますが、ページを作成するときは、最初のベンチマークとして画面サイズの 1 つを選択する必要があります。このベンチマークの選択は、得られたビジュアルドラフトに基づいて決定する必要があります。

2.rem 数値計算
通常、rem の値はデフォルトで 16px ですが、これはページ全体の CSS 計算プロセスに多大な問題を引き起こします面倒すぎる。たとえば、幅が 30px の要素がある場合は、30/16rem と記述する必要があります。ページ全体の作業負荷は非常に大きくなります。そこで、2つの方法を紹介します

htmlのfont-sizeを100pxに設定できます
このように、単位を書くときは、値を100で割ってremの単位を足すだけです。デザイン案のフォントが 16px の場合は 1.6rem と書くことができます。

ここで 10 を使用しないのはなぜですか?
Googleなどのブラウザでは最小フォント、つまり最小12pxに制限があるため、10pxを設定すると問題が発生します。

sass

$rem : 16x;@function px_rem($px){@return ($px/$rem) + rem;}

ログイン後にコピー

を使用します

3. htmlのfont-sizeを動的に設定します
画面サイズが変化すると、htmlのfont-sizeの値はbase rem*changed screen width/base screen widthになるはずです

CSSのメディアクエリを使用して設定します(これは幅の範囲内のレムです)

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){  $rem : 16x;}

ログイン後にコピー

JavaScriptを使用して動的に設定します(このメソッドは幅ポイントごとに新しいレムを持ちます)

document.getElementsByTagName('html')[0].style.fontSize = 基准rem*window.innerWidth / 基准屏幕宽度 + 'px';

ログイン後にコピー

検討dpr

通常、取得するビジュアルドラフトのサイズは2倍のサイズがほとんどですが、remと併用すると、ビジュアルドラフト上のサイズに合わせて設定できます。

デザイン原稿が2倍になる理由は、iPhoneなどの高解像度画面の携帯電話の存在です。高解像度画面のピクセル比（デバイスピクセル比）DPRは比較的大きいため、表示されるピクセルはより鮮明です。

一般に、携帯電話のdprは1、iphone4とiphone5の高精細画面は2、iphone6s plusの高精細画面は3です。ウィンドウを通して現在のデバイスのdprを取得できます。 jsの.devicePixelRatioなのでiphone6用のビジュアル案サイズは(*2)750×1334です。

dpr を取得した後、ビューポートのメタヘッダーでブラウザによるページの自動スケーリングをキャンセルし、ビューポートのコンテンツを自分で設定できます

meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

ログイン後にコピー

このようにして、サイズを直接使用できますビジュアルドラフトについて。

クリックして例を表示>>

私のブログ: http://bigdots.github.io、

この記事が良いと思われる場合は、下の推奨事項をクリックしてご協力ください。ありがとうございます!