さまざまなサイズのデバイスに適応する実装

場合によっては、コンテンツを 1 つの画面に収まるようにして、さまざまなサイズのデバイスに適応させる必要があります。これが一部のデバイスでどのように不満足な表示につながるかについては説明しませんが、それを実装する方法について直接話しましょう。

最初に考えられるのは、ページ上のすべてのブロックレベル要素の幅、高さ、マージンの値 (margin、padding) をパーセンテージで表す必要があるということです。
水平方向、幅、水平間隔の値がパーセンテージ値の場合、その値は親要素の幅を基準にして計算され、水平方向の異なるサイズのデバイスに適応できます。
垂直方向では、高さの値がパーセンテージの場合、その値は親要素の高さを基準にして計算されます。ただし、垂直方向の間隔の値がパーセンテージの場合、その値は親要素の幅 (高さではなく) を基準にして計算されます、はは(無力～～～)。

したがって、水平方向の適応にはパーセンテージ解を使用できます。垂直方向の場合は他の解決策が必要です。

CSS3 メディア クエリを使用できますか?それはできません。 Media Queries はデバイスの高さの クエリ をサポートしていますが、すべてのデバイスの高さをリストし、高さの異なるデバイスごとに一連の CSS を記述することは不可能です。少数の高さのデバイスとのみ互換性を持たせる必要がある場合は、このソリューションを検討してください。

ここではいくつかの解決策を紹介します。

JSを使用して

を実装します。原理は、data-style-height 属性を使用して要素の高さを設定することであり、その値は親要素の高さのシェアです。ページが初期化されると、JS はこの値、親要素の高さ、および親要素の高さの合計数に基づいて要素の高さに値を割り当てます。例えば、

<p>
  <p id="a" data-style-height="1"></p>
  <p id="b" data-style-height="2"></p>
</p>

上記のコードでは、親要素の高さのパーツの総数は 3 で、a の高さが 1 パーツ、b の高さが 2 パーツを占めます。親要素の高さが 100px であると仮定すると、a の高さは (1 / 3 * 100)px、b の高さは (2 / 3 * 100)px となります。 コード>。 <code>(1 / 3 * 100)px，b 的高度为 (2 / 3 * 100)px。

同样的，设置间距用这些属性： data-style-margin-top, data-style-margin-bottom, data-style-padding-top, data-style-padding-bottom。页面初始化时，JS 会根据属性值给元素的对应的间距赋值。

具体实现代码见这里。

用 flex 实现

原理和用 JS 实现基本一致。用 flex 实现只是用 flex-grow 的值大于 0 的 flex 元素在父空间很大时，会自动变大的特性来代替 JS 的计算。

具体的原理是，在元素上设置高度用 data-style-height 属性，其父元素设置样式 <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:flex;flex-<a href="http://www.php.cn/wiki/873.html" target="_blank">direction</a>: column;。页面初始化时，JS 会根据该值给该元素设置 flex-grow:属性值

同様に、次の属性を使用して間隔を設定します: data-style-margin-top

、data- style -margin-bottom

、data-style-パディングトップ

、データスタイル- パディングボトム。ページが初期化されると、JS は属性値に基づいて要素に対応する間隔を割り当てます。

具体的な実装コードについては、こちらをご覧ください。

flex を使用して

を実装する原理は、基本的に JS を使用する場合と同じです。 flex を使用した実装では、親空間が大きい場合に、JS 計算ではなく、flex-grow 値が 0 より大きい flex 要素が自動的に大きくなるという機能を使用しているだけです。

具体的な原則は、data-style-height 属性を使用して要素の高さを設定し、その親要素 <a href="http://www.php.cn/wiki/%5D%20%E3%81%AB%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%A7%E3%81%99%E3%80%82%20927.html" target="_blank">表示<hr>:flex;flex-</a><a href="http://www.php.cn/wiki/873.html" target="_blank">方向<p>:列;。ページが初期化されると、JS はこの値に基づいて要素に <code>flex-grow: 属性値 を設定します。間隔は、data-style-height 属性と空のコンテンツを持つ要素を使用して実装されます。

具体的な実装コードについては、こちらをご覧ください。 🎜🎜🎜画像🎜を使用して🎜🎜コンテンツにインタラクションが必要ない場合は、ページ全体を 1 つの画像にできます。もちろん、これを行うと後のメンテナンスが少し難しくなります。 🎜🎜HTML:🎜

<img class="fullpage" src="...">

🎜CSS:🎜

html,body{
  height: 100%;
}
.fullpage{
  width: 100%;
  height: 100%;
}

🎜🎜🎜🎜

以上がさまざまなサイズのデバイスに適応する実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。