レスポンシブウェブデザインを実現するために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 の同時実行性の問題と解決策の分析
目次1. 背景2. テーブルロックによるクエリの遅延3. オンラインでテーブル構造を変更するとどのよ...
Elasticsearch を使用する際の一般的な問題の解決策
1. redis で使用すると Netty の起動競合が発生するため、***Application ...
ファイルをアップロードするための HTML フォームの「参照」ボタンを変更する方法
コードをコピーコードは次のとおりです。 <!DOCTYPE HTML PUBLIC "...
MySQL の count()、group by、order by の詳細な説明
最近、IM を実行するときに、これらの 3 つのキーワードを同時に使用したときに問題が発生しました。...
MySQLデータベースの数千万件のデータクエリとストレージの詳細な説明
目次百万レベルのデータ処理ソリューションデータストレージ構造設計クエリステートメントの最適化1000...
Linux システムの busybox に mkfs.vfat コマンドを移植する
オーディオおよびビデオ ファイルを保存するためのディスク寿命を延ばすには、ディスクをフォーマットする...
Excel エクスポートは docker 環境では常に失敗する
Excel のエクスポートは、docker 環境では常に失敗します。最も直接的な原因は、中国語フォン...
プロジェクトにaxiosをカプセル化する実際のプロセス
目次序文axiosカプセル化の利点パッケージのアイデア設定の優先順位axiosインスタンス構成1. ...
Debian ベースの Linux システム ソフトウェア インストール コマンドの詳細な説明 (推奨)
Debian の紹介Debian は、広い意味では、フリーなオペレーティング システムの作成に専念...
Vuex環境の詳細な説明
目次Vuex環境を構築する要約するVuex環境を構築するsrcディレクトリにフォルダstoreを作成...
シンプルな計算機を実装するためのネイティブ js
この記事の例では、参考までに簡単な計算機を実装するためのjsの具体的なコードを共有しています。具体的...
MySQLデータベースとテーブルシャーディングの概要
プロジェクトの開発中に、データベースのデータがどんどん大きくなり、その結果、1 つのテーブルにデータ...
MySQL構成SSL証明書ログインの実装
目次序文1. MySQLはSSL構成を有効にする1.1 SSLが有効になっているかどうかを確認する1...
ウェブサイトのパフォーマンス: 画像とCookieの最適化、モバイルアプリケーションの最適化
前のセクションでは、コンテンツ、サーバー、JavaScript、CSS など、Web サイトのパフォ...
知らないかもしれない実用的なTypeScriptのヒント
目次序文関数のオーバーロードマッピングタイプ部分的、読み取り専用、Null 可能、必須選択、記録除外...