BinaryDevelop
  1. ホーム
  2. Web制作
  3. ヒントとコツ

意思決定の重要な要素について議論する

2022-01-13 06:30:59

プリアンブル

フロントエンドコードの書き込みは、PC時代から、IEの傲慢のために、単語の "互換性 "を逃れることはできない、プログラム猿の結果、我々はすぐにIEを取り除くかのように、希望を見るかのように、IEと互換性の道路上に苦労されている、そして今、モバイルデバイスの人気、！しかし、我々はすぐに、IEを取り除くだろう。波はまだ治まっていない、波が侵入する〜モバイル確かにIEを考慮する必要はありませんが、新しいCSS機能の様々なも飛ぶように使用されますが、圧力の山オーバー、つまり、適応の解像度、表示領域が比較的小さいため、携帯電話の表示の詳細上の異なる解像度でもページのために、この時点で、いくつかの固定幅とレイアウトの高さのPC側のように明らかに適応ではない、我々はいた携帯ページの異なるサイズ適応できるための要件、それは本当に非常に（トン）興味深い（ク）それです。

さっそくですが、モバイル向けの一般的な適応テクニックをいくつかまとめてみました。

I. パーセンテージ

利用シーン：テキストブロックのように画面に合わせて幅を調整する必要があるもののみ

パーセンテージはPC側のアダプティブでもよく使われ、本当はとても便利なのですが、一般的には幅のアダプティブ設定に使われ、高さのパーセンテージを設定する場合は、その親要素の高さが明確であることが要求されるのです。

1、パーセンテージを使用してフルスクリーンで表示する

height: 100% を設定した要素が有効になり、ウィンドウの高さにぴったり合うようにするには、html および body 要素とそのすべての親要素に height 100% を設定する必要があります。

例えば 

<html style="height: 100%;">
  <body style="height: 100%;">
    <div class="wrap" style="height: 100%; width:100%">
        Fill full screen now!
    </div>
  </body>
</html>

height: 100% を使用する際の注意点です。

  • マージンやパディングを使用すると、ページ上にスクロールバーが表示されますが、これはおそらく必要ありません。
  • 要素の実際の高さが、設定した高さの割合よりも大きい場合、要素の高さは自動的に拡張されます。

これを書きながら、突然余談を挿入したくなりました。絶対位置指定された要素に対して、height: 100% を使用することも明らかに無効です。この時点ですでにドキュメントフローから外れており、この時点でその高さはそれ自身のコンテンツによってサポートされているからです。これは、親ボックスを埋めるようにしたい場合、どのようにそれを行うのですか？ここで、ブラック マジック、その top、left、bottom、right を 0 に設定すると、ボックスは親ボックスを満たすように引き伸ばされます。

2. 縦横比を固定するためにパーセンテージを使用する

幅は適応的に、高さは幅に応じて変化し、アスペクト比は固定にしたい場合があります。

wispしてみましょう。高さのパーセンテージを使っても明らかにうまくいきません。高さのパーセンテージは親要素の高さを基準にしており、幅を基準にして高さを設定する必要があるのです。

そこで、ここではpadding-topまたはpadding-bottomを使用し、paddingは親要素の幅を基準にしています。要素の高さを 0 に設定し、padding-bottom を使用して要素を支え、一定のアスペクト比を得ることができます。

ii. rem

利用シーン：画像など、高さ方向の適応が必要な場合

rem単位：ページルートのフォントの大きさ、つまりベースとなるhtml要素のフォントの大きさ、例えば 

html{
    font-size:16px;
}

すると、1remは16pxに相当する。

ですから、これを使うときは、ルートのフォントサイズを画面サイズに合わせるだけで、ページ内でrem単位を使って幅と高さを設定しているすべての要素も画面サイズに合わせることができます。

画面サイズに応じてルートフォントサイズを設定するには、2つの方法があります。

1.cssでremを設定する方法

メディアクエリを使用して、設定する別の画面サイズによると、欠点は、一般的にいくつかの代表的な画面サイズが表示され、適応が完全にすべての範囲をカバーすることはできませんです。 

html{
    font-size:10px
} 
@media screen and (min-width:321px) and (max-width:375px){
    html{
        font-size:11px
    }   
} 
@media screen and (min-width:376px) and (max-width:414px){
    html{
        font-size:12px
    }
} 
@media screen and (min-width:415px) and (max-width:639px){
    html{
        font-size:15px
    }
} 
@media screen and (min-width:640px) and (max-width:719px){
    html{
        font-size:20px
    }
} 
@media screen and (min-width:720px) and (max-width:749px){
    html{
        font-size:22.5px
    }
} 
@media screen and (min-width:750px) and (max-width:799px){
    html{
        font-size:23.5px
    }
} 
@media screen and (min-width:800px){
    html{
        font-size:25px
    }
}

2. JSメソッドでremを設定する

JSを使ってルートのフォントサイズを設定するため、レンダリングが終わった後に変更すると、リフローが発生し、スプラッシュスクリーンにつながってしまいます。そのため、この方法を使用する場合は、JSのコードをheadヘッダーに配置し、CSSが導入される前に配置する必要があります。 

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
    };
  recalc(); 
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
})(document, window);

上記のclientWidthは実際の画面幅、375はデザインの元となる基準画面幅、20は実際の画面幅と基準画面幅が同じ時の1remの大きさです。コードのキーパラメーターである20と375は、このように設定されている。

a) 提供されたデザインは基本的にiPhone6/7/8を基準として、横幅750px、dpr2となっているので、remを計算するための基準画面幅は375に設定することができます。

b) クロームの最小フォントが12pxなので、計算の都合上、1remの大きさを20pxに設定することが可能です
応用編では、例えば750というデザインが出るので、まずデザインの値を2で割って、スマホの画面サイズで並べた値を出します（ここから375が出ます）。次に、もう一度20で割って、デザイン内のpxをremに変換します。

III. メディアクエリ

利用シーン：メディアクエリは一般的に、以下のような特殊な処理を行うために使用されます。

1. iphoneXのようなフルスクリーン化

2、3 iPhone Plusやパッド横などの超大型画面へのdprの適応では、ビジネスニーズに応じて閾値を設定し、異なるコンテンツを表示したり、異なる解像度の画像（つまり、2倍図、3倍図の使用とよく言われます）などを置き換える必要があります。

IV. vw, vh

vwは画面幅を基準としたパーセンテージ単位で、1vw = 1% * deviceWidth

vhは画面の高さを表す単位で、1v = 1% * deviceHeightです。

vw,vhはうまく機能しますが、使用する際に考慮すべき互換性の問題が残されています。一部の国内ブラウザ(Huaweiなど)では動作しませんし、X5カーネルでは踏み込みが甘いと言われています。

以上が今回の内容です、勉強になると思いますし、BinaryDevelopをもっと応援して頂ければと思います。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します