レスポンシブ レイアウトのいくつかの方法には、1. メディア クエリ、2. パーセンテージ [%]、3. vw または vh、vw はビュー ウィンドウに対する相対的な幅を表し、vh はビューに対する相対的な高さを表します。 window; 4. 、レム単位は html 要素のフォント サイズに相対的です; 5. Flex elastic レイアウト。
この記事の動作環境:Acer S40-51、Windows10 Home 中国語版
推奨:css動画チュートリアル
レスポンシブ レイアウトのいくつかの方法は次のとおりです。
#レスポンシブ レイアウト方法 1: メディア クエリ
@mediaメディア クエリを使用すると、さまざまなメディア タイプにさまざまなスタイルを定義できます。特にレスポンシブ ページの場合、さまざまな画面サイズに合わせて複数のスタイル セットを記述して、適応効果を実現できます。例:
レスポンシブ レイアウト方法 2: パーセント%
たとえば、ブラウザの幅または高さが変更される場合、パーセント単位を使用してブラウザの幅を変更できます。ブラウザの変化に応じてコンポーネントの高さと高さが変化するため、応答性の高い効果が得られます。 高さと幅の属性の割合は、親タグの幅と高さによって異なります。ただし、padding、border、margin、その他の属性の場合は状況が異なります。幅は、親要素の高さに関係なく、直接の親要素に対して相対的です。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)
レスポンシブ レイアウト方法 5: フレックス エラスティック レイアウト
エラスティック レイアウトは、CSS スタイルのみに依存する応答性の高いレイアウトを実装するための非常に便利な方法であり、応答性を実装するために最も一般的に使用される方法でもあります。特に現在、タオバオやタオバオなどの電子商取引ウェブサイトやモバイルアプリのページは、柔軟なレイアウトを使用して簡単に実装できます。
柔軟なレイアウトには、親要素内の子要素の「弾力性」を調整するために、親要素と子要素に対応する属性があります。 親要素で、主によく使用するフレキシブル レイアウトに関連するプロパティには、flex-direction、flex-wrap、justify-content、align-items、align-content、これらが含まれます。属性は、主軸の方向からの親要素内の項目の柔軟性、折り返すかどうか、主軸上の項目の配置、交差軸上の項目の配置、および軸上の項目の配置を制御します。複数の軸。プログラミングについてさらに詳しく知りたい場合は、php training列に注目してください。 !
以上がレスポンシブレイアウトにはいくつかの方法がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。