ホームページ >ウェブフロントエンド >jsチュートリアル >レスポンシブレイアウトを実装する方法
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 サイトの他の関連記事を参照してください。