レスポンシブウェブデザインを実現するために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、メディアクエリ、モバイルクリックイベントの実装
推薦する
Dockerコンテナデータをコピーしてバックアップする方法の詳細な説明
ここでは、Jenkins コンテナを例に 3 つの方法を紹介します。方法1コンテナをイメージにパッケ...
JavaScriptはすべての選択と選択解除の操作を実装します
この記事では、JavaScriptで全選択と全選択解除の操作を実装するための具体的なコードを参考まで...
CSS3のfocus-withinセレクタの使用
擬似要素と擬似クラスところで、まずは疑似クラスセレクターと疑似要素セレクターについておさらいしておき...
2秒以内にHTMLページ内の他のページにリダイレクトする方法
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
MySQLカバーインデックスの利点
一般的な提案は、WHERE 条件のインデックスを作成することですが、これは実際には一方的です。インデ...
例を通してBRタグとPタグの違いを理解する
<br />改行タグの使用<br>改行タグ<br>は終わりのない...
CSS マルチレベルメニュー実装コード
これは、Web ページを Windows のスタート メニューなどのデスクトップ プログラムのように...
モバイルデバイス上の 1px 境界線を解決する最善の方法 (推奨)
モバイル デバイス向けに開発する場合、Retina 画面上で要素の境界線が太くなるという問題に遭遇す...
SSH ポート転送、ローカル ポート転送、リモート ポート転送、動的ポート転送の詳細
パート 1 SSH ポート転送の概要カフェで無料Wi-Fiを利用しているとき、誰かがあなたのパスワー...
CSS3 レーダースキャンマップのサンプルコード
CSS3 を使用して、クールなレーダースキャン画像を実現します。 コード上で直接: // インデック...
Webページ作成の質問: 画像ファイルのパス
この記事は 123WORDPRESS.COM Lightning によるオリジナルです。転載する際に...
UTF-8 ファイルの Unicode 署名 BOM (バイト オーダー マーク) の問題
最近、UTF8 エンコードの中国語 Zen Cart Web サイトをデバッグしているときに奇妙な現...
Ubuntu 16.04 に nvidia ドライバー + CUDA + cuDNN をインストールする詳細なチュートリアル
準備1. GPUがCUDAをサポートしているかどうかを確認するlspci | grep -i nvi...
CSS スタイルの導入方法とその長所と短所の紹介
CSSを導入する3つの方法1. インラインスタイル利点: 書きやすく、重みがある 欠点: 構造とスタ...
Windowsタイムサーバーの設定方法の詳しい説明
最近、会社のサーバーの時間が不正確で、外部の時間ソースと同期できないことがわかりました。会社はドメイ...