レスポンシブレイアウトを実装する方法

1. レスポンシブ レイアウト: つまり、Web サイトは端末ごとに特定のバージョンを作成するのではなく、複数の端末と互換性を持たせることができます。このコンセプトは、モバイル インターネット ブラウジングを解決するために生まれました。

2、レスポンシブレイアウトを実装する3つの方法

1. CSS3-Media Query (最も簡単な方法ですが、多くのニーズを満たすことはできません)

2. ネイティブJavaScriptの助けを借りて()コストが高いため推奨されません)

3. サードパーティのオープンソースフレームワーク (ブラウザの応答性の高いレイアウトを適切にサポートできるブートストラップなど)

3、CSS3-Media Query 共通属性

Device-width、device-height 画面の幅と高さ

幅、高さ レンダリングウィンドウの幅と高さ

Orientation デバイスの向き

解像度 デバイスの解像度

4、CSS3-Media Queryの基本構文

外部CSS構文とインラインスタイルの構文

例: 外部スタイルシート link.css (画面幅が480px以下の場合、背景は赤になります)

link.css構文には 1 つの文しかありません: body{background: red;}

5, Bootstrap

bootstrap を使用する場合、css ファイルと js ファイル、合計 3 つをインポートする必要があります。以下に示すように、順序を逆にすることはできません (バージョンは変更できます)。

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