bootstrap3 が最初にサポートするデバイスはどれですか?

青灯夜游
リリース: 2021-11-11 13:49:28
オリジナル
1742 人が閲覧しました

bootstrap3 は、「モバイル」デバイスのサポートを優先します。 Bootstrap3 はモバイル ファーストのデザイン コンセプトで、デザインされたスタイルはすべてデフォルトでモバイル デバイスに適用され、メディア クエリを使用して他のサイズのデバイス用のデザインを段階的に追加します。

bootstrap3 が最初にサポートするデバイスはどれですか?

このチュートリアルの動作環境: Windows7 システム、bootstrap3.3.7 バージョン、DELL G3 コンピューター

Bootstrap 3 はモバイル ファースト フロントです。 -end フレームワーク 。モバイルファーストとは、デザインされたすべてのスタイルがデフォルトでモバイルデバイスに適用され、その後、デザイン内でメディアクエリを使用して他のサイズのデバイス用のデザインを段階的に追加することを意味します。

以前の Bootstrap バージョン (2.x まで) では、プロジェクト全体をモバイル対応にするために別の CSS を手動で参照する必要がありました。

今は違います。Bootstrap 3 のデフォルト CSS 自体はモバイル対応です。

Bootstrap 3 は、モバイルを第一に、デスクトップを第二に設計されています。モバイルデバイスを使用するユーザーがますます増えているため、これは実際には非常にタイムリーな変化です。

Bootstrap によって開発された Web サイトをモバイル対応にし、適切な描画とタッチ スクリーンのスケーリングを確保するには、以下に示すように、Web ページの先頭にビューポート メタ タグを追加する必要があります。

ログイン後にコピー

  • width このプロパティはデバイスの幅を制御します。 Web サイトがさまざまな画面解像度のデバイスで表示されることを想定して、Web サイトをデバイス幅に設定すると、さまざまなデバイスで正しくレンダリングされます。

  • initial-scale=1.0 Web ページが読み込まれるときに、スケーリングなしで 1:1 の比率でレンダリングされることを確認します。

モバイル ブラウザでは、

user-scalable=noviewport meta タグに追加することでズームを無効にできます。

通常、

maximum-scale=1.0user-scalable=no とともに使用されます。ズームを無効にすると、ユーザーはスクロールのみできるようになり、Web サイトがネイティブ アプリのように見えます。

この方法はすべての Web サイトに推奨されるわけではないことに注意してください。それでも、実際の状況によって異なります。

ログイン後にコピー

推奨される調査: 「

ブートストラップの使用方法のチュートリアル

以上がbootstrap3 が最初にサポートするデバイスはどれですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!