レスポンシブウェブデザインを実現するためにIEでCSS3メディアクエリをサポートする
|
今日の画面解像度は、320 ピクセル (iPhone) ほど小さいものから、2560 ピクセル以上 (大型モニター) ほど大きいものまで、多種多様なバリエーションがあります。ユーザーは、従来のデスクトップ コンピューターの使用に加えて、携帯電話、ネットブック、iPad などのタブレット デバイスを通じて Web ページを閲覧することが増えていきます。この場合、固定幅の設計はますます不合理になります。ページの適応性を高め、レイアウト構造をさまざまなデバイスや画面解像度に応じて応答性と調整性を持たせる必要があります。次に、HTML5 および CSS3 メディア クエリ関連のテクノロジーを使用して、クロスデバイスおよびクロスブラウザーのレスポンシブ Web デザイン ソリューションを実装する方法を学習します。 コードをコピー コードは次のとおりです。<!--[IE 9 の場合]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]--> 次に、CSS スタイルシートを作成し、ページ内で呼び出す必要があります。 コードをコピー コードは次のとおりです。<link href="media-queries.css" rel="スタイルシート" type="text/css"> 弾性画像 コードをコピー コードは次のとおりです。img {max-width:100%;height:auto;width:auto\9; /* ie8 */ CSS で width: auto\9 はどういう意味ですか? コードをコピー コードは次のとおりです。これは IE 用のハックです。 IE6/IE7/IE8/IE9/IE10で有効 「\0」はIE8/IE9/IE10で有効です 「\9\0」はIE9/IE10で有効です 弾性インライン要素 (ビデオ) コードをコピー コードは次のとおりです。.video 埋め込み、.video オブジェクト、.video iframe {幅: 100%;高さ: 自動;} 自動フォントサイズ調整の問題 (-webkit-text-size-adjust:none で iPhone の Safari の自動フォントサイズ調整を無効にする) コードをコピー コードは次のとおりです。html{-webkit-text-size-adjust:none;} ページ幅の拡大縮小の問題 コードをコピー コードは次のとおりです。<meta name="viewport" content="width=デバイス幅、user-scalable=いいえ、initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> 元記事はWEBフロントエンド開発（www.css119.com）より転載 |
<<: Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明
>>: CSS フレキシブルレイアウト FLEX、メディアクエリ、モバイルクリックイベントの実装
推薦する
MySQL ストアド プロシージャの in、out、inout パラメータの例と概要
ストアドプロシージャ1. ストアドプロシージャを作成し、グローバル変数を表示する mysql>...
JSは画像の滝の流れの効果を実現します
この記事では、画像ウォーターフォールフローを実現するためのJSの具体的なコードを参考までに共有します...
proxy_pass がパス パスに従って転送する場合の "/" 問題の詳細な説明
nginx で proxy_pass を設定するときに、^~ に従ってパスを一致させる場合は、pro...
MySQLのさまざまなロックに関する詳細な理解
目次ロックの概要ロックの分類データベース操作の粒度データ操作の種類MySQL ロックさまざまなストレ...
VUE でタブページを切り替える 4 つの方法
目次1. 静的実装方法: 2. 第2のシミュレーション動的方法3. 3番目の動的データ方式4. 動的...
Bootstrap 3.0 学習ノート グリッドシステム事例
序文前回の記事では、主にグリッドシステムの基本原理を学び、簡単なケースを通してその原理を実践しました...
MySQLの不合理なMaxIdleConnsにより接続が短くなる
1 背景最近、Shimo Document のオンライン ビジネスでパフォーマンスの問題が発生しまし...
Jenkins の紹介と Docker で Jenkins をデプロイする方法
1. 関連概念1.1 Jenkins の概念: Jenkins は、使用されるプラットフォームに関係...
mysql-8.0.19-winx64 をインストールしてログインするための初心者向けチュートリアル (初心者必読)
目次1. インストールパッケージ（64ビット）をダウンロードする2. MySQLデータベースをインス...
MySQL 8.0 ウィンドウ関数の紹介と概要
序文MySQL 8.0 より前は、Oracle、SQL SERVER、PostgreSQL などの他...
Linux でテキストから改行文字を削除する方法
復帰文字 ( Ctrl+M ) に不安を感じても心配しないでください。それらを排除する簡単な方法がい...
JavaScriptは入力ボックスコンポーネントを実装します
この記事では、入力ボックスコンポーネントを手動で実装するための具体的なコードを参考までに紹介します。...
テーブルを動的に読み込み、削除する JavaScript
この記事では、テーブルを動的に読み込み、削除するためのJavaScriptの具体的なコードを参考まで...
HTML doctype の役割の紹介
ドキュメント モードには次の 2 つの機能があります。 1. HTML文書を解析するためにどのHTM...
Linuxのip netnsコマンドを使用してネットワークポートを分離し、IPアドレスを設定します。
1. 分離マーカーを追加します。 ip netns add fd 2. 指定されたネットワーク カ...