モバイル端末での幅のパーセンテージのいくつかの実装_html/css_WEB-ITnose

モバイル側のデバイス幅が異なり、画面の縦幅が比較的小さいため、PC 側の固定幅および中央揃えのテクニカル レイアウトとは異なり、通常は全画面形式でレイアウトされます。フルスクリーンを使用するため、さまざまなパーセントテクニックが特に重要です。実際の戦闘プロセスで使用されるいくつかのテクニックについて簡単に説明します。

さまざまなテクノロジーの比較を容易にするために、同じ 4 つの等しいフルスクリーン要件を達成するために異なるテクノロジーを使用し、各部分を正方形に分割します。

全体的な HTML 構造は次のとおりです:

// `list--xxx`表示下面具体技术的名字ul.full-list.list--xxx    .item*4

視覚的に見やすくするために、奇数項目と偶数項目の背景色を異なるように設定します:

.full-list .item{ background: #f5f5f5;}.full-list .item:nth-child(2n){ background: #ccc;}.full-list .item:hover{ background: #f00;}

デモ効果については、以下を参照してください: モバイルでのパーセント幅のいくつかの実装

vw

これは、新しい一連の単位には、合計 4 つの vw、vh、vmin、vmax があり、それぞれウィンドウの幅、ウィンドウの高さ、ウィンドウの幅と高さの最小値、最大値を表します。ウィンドウの幅と高さ。現在、Android 4.3 ではサポートされていませんが、iOS では十分にサポートされています。詳しくは、caniuse vw を参照してください。

1vw はウィンドウ幅の 1 パーセントを表します。同様に、10vw は 10 パーセントを表します。この新しい部門の出現により、私たちの W3C 組織もモバイル端末の割合を懸念していることが分かりました。

上記の 4 分の 1 の場合、それぞれの幅は 25vw である必要があり、ul の list--xxx は list--vw になります。

そうですか

それは確かに、問題を数分で解決します。ただ、Android 側はまだ少し互換性がなく、対処するのが難しいですが、未来は明るいと信じています。

rem

まず最初に、このセクションで説明したアイデアが実際に Taobao lib-flexible で提案されていることを説明させてください。原則として、js はウィンドウの幅を取得し、html の font-size をウィンドウの幅の 10 分の 1 または 10 パーセントに設定します。また、rem 単位はルート要素 html に対する相対的なサイズを表します。 1rem はウィンドウ 1 の幅の 10 分の 1 を表します。このようにして、rem と html のフォント サイズの関係を通じて、ウィンドウの幅に対する相対的なパーセンテージが得られます。

js は HTML のフォント サイズを設定します

.list--vw{ overflow: hidden;}.list--vw .item{ float: left; width: 25vw; height: 25vw;}

CSS コードは次のとおりです:

document.addEventListener("DOMContentLoaded", function(event) {    document.documentElement.style.fontSize = window.innerWidth/10 + "px";  });

ここで、1rem はウィンドウ幅の 10% であり、上記の 1vw はウィンドウ幅の 1% であることに注意してください。

lib-flexible については data-dpr という概念もありますので、興味があれば勉強してみてください。ただし、個人的には、この機能は iOS の Retina 画面の 1px を実現する以外には少し役に立たないと感じています。メディアクエリを使えば解決できるので、そのフォントサイズの考え方だけを採用します。

私たちのフロントエンド業界にこのような優れたソリューションを作成してくれた Xiashatao に感謝します。

flex とパーセント

これは言うまでもありませんが、flex は今やどこにでもあり、% はさらに基本です。

コードに直接移動します:

.list--rem{ overflow: hidden;}.list--rem .item{ float: left; width: 2.5rem; height: 2.5rem;}

パディングまたはマージンの % 単位は、親要素の幅に従って計算されることに注意してください。

もちろん、均等割り算のみを実装する必要がある場合は、display:table も良い選択です。コードは次のとおりです:

.list--flex{ display: flex;}.list--flex .item{ flex: 1; padding-top: 25%; height: 0;}.list--percent{ overflow: hidden;}.list--percent .item{ float: left; width: 25%; height: 0; padding-top: 25%;}

最後に、Android 4.3 を考慮しない場合は、vw が最良の選択です。互換性の問題を考慮する場合は、rem のソリューションが最良の選択です。残りの flex、%、または table は、最も単純かつ最も問題のないものではありませんが、単純な幅の処理を処理することはできますが、幅と同時に高さが変更される場合、つまり、幅と高さが特定の条件に準拠する場合です。比率 (写真やビデオの変化など) を拡張するには、パディング技術を使用する必要があります。そのため、純粋な横幅レイアウトであれば気軽に使えますが、ある程度のアスペクト比を実現したい場合にはvmやremが最適です。