ホームページ  >  記事  >  ウェブフロントエンド  >  レスポンシブレイアウトを実装する方法

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

一个新手
一个新手オリジナル
2017-10-01 07:43:554728ブラウズ

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。