意思決定の重要な要素について議論する
前置き
フロントエンドコードの書き込みは、単語＆quot;互換性＆quotを逃れることはできない、PC時代から、IEの傲慢のため、プログラム猿の結果は、我々はすぐにIEを取り除くかのように、希望を見るかのように、IEと互換性のある道路で苦労されている、そして今、モバイルデバイスの人気、しかし！フロントエンドコードの書き込みが、我々はすぐにIEを取り除いてしまうかのように、我々は、PC時代、IEの傲慢のため、IEの傲慢から逃れることはできない。波はまだ治まっていない、波が侵入する〜モバイル確かにIEを考慮する必要はありませんが、新しいCSS機能の様々なも飛ぶために使用されますが、上の圧力の山、つまり、適応の解像度、モバイル表示領域が比較的小さいためです。携帯電話の表示の詳細上の異なる解像度のページにも、この時点で、いくつかの固定幅とレイアウトの高さのPC側のように、より厳しい必要とする明らかに適応されていない、我々は携帯電話のページの異なるサイズの要件が適応することができ、それは本当に非常に（トン）興味深い（ク）それです。
さっそくですが、一般的なモバイル適応のテクニックをいくつかまとめてみました。
I. パーセンテージ
利用シーン：テキストブロックのように画面に合わせて幅を調整する必要があるもののみ
パーセントはPCのアダプティブでもよく使われ、実に便利ですが、一般に幅のアダプティブ設定に使われ、高さにパーセントを設定する場合は、その親要素が明示的に高さを持つことが必要です。
1. パーセンテージを使った画面いっぱいの表示
height: 100% を設定した要素が有効になり、ウィンドウの高さにぴったり合うようにするには、html と body 要素、およびその親要素のすべての高さを 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% を使用する際の注意点です。
- マージンやパディングを使用すると、ページ上にスクロールバーが表示されますが、これはおそらく不要なものです。
- 要素の実際の高さが、設定した高さの割合よりも大きい場合、要素の高さは自動的に拡張されます。
というのも、この時点でドキュメントの流れから外れてしまい、その高さは自身のコンテンツによって支えられてしまうからです。これは、親ボックスを埋めるようにしたい場合、どうすればよいのでしょうか。ブラック マジックは次のとおりです。
2. パーセンテージによる縦横比の固定
時には、幅は適応的に、高さは幅に応じて変化させ、アスペクト比は固定にしたいものです。
高さのパーセンテージは親要素の高さに基づいており、幅に基づいて高さを設定する必要があるのです。
そこで、ここでは 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. remを設定するJSメソッド
JSを使用してルートのフォントサイズを設定するため、レンダリング完了後に変更が発生するとリフローが発生し、スプラッシュ画面が表示されます。そのため、この方法を使用する場合は、JSのコードをヘッドヘッダ内に配置し、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、dpr 3 iPhone Plusやパッド横などの超大型画面の適応では、ビジネスニーズに応じて閾値を設定し、異なるコンテンツを表示したり、異なる解像度の画像（よく言われる2倍図、3倍図の使用）などを置き換える必要があります。
iv. vw, vh
vwは画面幅を基準としたパーセンテージ単位で、1vw = 1% * deviceWidth
vh は画面の高さを表す単位で、1v = 1% * deviceHeight です。
vw,vhはうまく動作しますが、使用する際にはまだ互換性の問題があり、一部の国内ブラウザ（Huaweiなど）では動作しませんし、X5カーネルでは穴を踏みやすいと言われています。
この記事がお役に立てれば幸いです。また、Scripting Houseを応援していただければ幸いです。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン