レスポンシブレイアウトにはいくつかの方法があります

レスポンシブ レイアウトのいくつかの方法には、1. メディア クエリ、2. パーセンテージ [%]、3. vw または vh、vw はビュー ウィンドウに対する相対的な幅を表し、vh はビューに対する相対的な高さを表します。 window; 4. 、レム単位は html 要素のフォント サイズに相対的です; 5. Flex elastic レイアウト。

この記事の動作環境：Acer S40-51、Windows10 Home 中国語版

推奨：css動画チュートリアル

レスポンシブ レイアウトのいくつかの方法は次のとおりです。

#レスポンシブ レイアウト方法 1: メディア クエリ

@media メディア クエリを使用すると、さまざまなメディア タイプにさまざまなスタイルを定義できます。特にレスポンシブ ページの場合、さまざまな画面サイズに合わせて複数のスタイル セットを記述して、適応効果を実現できます。例:

メディア クエリを通じて、解像度の異なるデバイスに対して異なるスタイルを記述することで、レスポンシブ レイアウトを実現できます。たとえば、解像度の異なる画面に対して異なる背景画像を設定できます。たとえば、小さな画面の携帯電話には @2x 画像を設定し、大画面の携帯電話には @3x 画像を設定することは、メディア クエリを通じて簡単に実現できます。

しかし、メディア クエリの欠点も明らかで、ブラウザのサイズが変わったときに変更する必要があるスタイルが多すぎると、スタイル コードの複数のセットが非常に煩雑になります。

レスポンシブ レイアウト方法 2: パーセント%

たとえば、ブラウザの幅または高さが変更される場合、パーセント単位を使用してブラウザの幅を変更できます。ブラウザの変化に応じてコンポーネントの高さと高さが変化するため、応答性の高い効果が得られます。

高さと幅の属性の割合は、親タグの幅と高さによって異なります。ただし、padding、border、margin、その他の属性の場合は状況が異なります。幅は、親要素の高さに関係なく、直接の親要素に対して相対的です。

• 子要素のマージンがパーセンテージに設定されている場合、垂直方向でも水平方向でも、直接の親要素の幅を基準とします

• border-radius

  ただし、border-radius がパーセンテージに設定されている場合、それ自体の幅を基準にします

• 欠点

  設計草案に従って要素の幅と高さを定義するには、それらをパーセント単位に変換する必要があるため、計算するのは困難です。

各属性でパーセンテージを使用すると、親要素に関連する属性は一意ではなくなります。たとえば、幅と高さは親要素の幅と高さに相対し、マージンとパディングは親要素の幅（垂直か水平かに関係なく）に相対し、border-radius は要素自体に相対します。これにより、パーセント単位を使用してレイアウトを作成することが容易になります。問題は複雑になります。

したがって、レスポンシブ レイアウトに % を使用することはお勧めできません。

レスポンシブ レイアウト メソッド 3: vw/vh

ビュー ウィンドウに関連する新しいユニット vw/vh が css3 に導入されました。vw は、ビュー ウィンドウに関連することを意味します。ビュー ウィンドウ。幅 vh は、ビュー ウィンドウの高さに対する相対値を表します。どの階層要素でも、vw 単位を使用する場合、1vw はビュー幅の 1 パーセントに等しくなります。

パーセンテージ レイアウトに非常に似ていますが、より簡単に使用できます。

レスポンシブ レイアウト メソッド 4: rem

rem ユニットは、フォント サイズに相対的な HTML 要素であり、ルート要素とも呼ばれます。デフォルトでは、HTML 要素のフォント サイズは 16 ピクセルです。したがって、この時点では 1rem = 16px となります。

最適化バージョン

//动态为根元素设置字体大小
function init () {
 // 获取屏幕宽度
 var width = document.documentElement.clientWidth
 // 设置根元素字体大小。此时为宽的10等分
 document.documentElement.style.fontSize = width / 10 + 'px'
}
//首次加载应用，设置一次
init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)

理解: 上記のコードは実装されています。デバイスのビジュアル ウィンドウがどのように変化しても、rem は常に幅の 1/10 に設定されます。つまり、パーセント レイアウトは次のようになります。達成。メディア クエリの最初のバージョンほど厳格ではありません。

上記のコードは dom の前に記述する必要があります (head の最初の script タグに配置できます)

レスポンシブ レイアウト方法 5: フレックス エラスティック レイアウト

エラスティック レイアウトは、CSS スタイルのみに依存する応答性の高いレイアウトを実装するための非常に便利な方法であり、応答性を実装するために最も一般的に使用される方法でもあります。

特に現在、タオバオやタオバオなどの電子商取引ウェブサイトやモバイルアプリのページは、柔軟なレイアウトを使用して簡単に実装できます。

柔軟なレイアウトには、親要素内の子要素の「弾力性」を調整するために、親要素と子要素に対応する属性があります。

親要素で、主によく使用するフレキシブル レイアウトに関連するプロパティには、flex-direction、flex-wrap、justify-content、align-items、align-content、これらが含まれます。属性は、主軸の方向からの親要素内の項目の柔軟性、折り返すかどうか、主軸上の項目の配置、交差軸上の項目の配置、および軸上の項目の配置を制御します。複数の軸。

• 子要素では、主によく使用する柔軟なレイアウトに関連するプロパティとして、order、flex-grow、flex-shrink、flex-basis、align-self が含まれます。プロジェクトの分類、プロジェクトの拡大率、プロジェクトの縮小率、プロジェクトが占める主軸スペース、横軸上の単一プロジェクトの配置など、プロジェクト自体の柔軟性。

プログラミングについてさらに詳しく知りたい場合は、php training 列に注目してください。 ！

以上がレスポンシブレイアウトにはいくつかの方法がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。