レスポンシブウェブデザインを実現するために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、メディアクエリ、モバイルクリックイベントの実装
推薦する
git bash を使用して Linux にログインするための ssh の設定方法
1. まず、Linux サーバー上で公開鍵ファイルと秘密鍵ファイルを生成します。デフォルトの保存ディ...
CMD で MySQL データベースを操作するときに中国語の文字化けが発生する問題の解決方法
Baiduで検索しました。 。 chcp コマンドを使用して、cmd の文字エンコーディングを 65...
Ubuntu 基本チュートリアル: apt-get コマンド
序文apt-get コマンドは、Ubuntu システムのパッケージ管理ツールです。パッケージのインス...
vue3+TypeScript+vue-routerの使い方
目次使いやすいプロジェクトを作成するvue-cli 作成ヴィートクリエイションvue-routerを...
CentOS 8.0.1905 は ZABBIX 4.4 バージョンをインストールします (検証済み)
Zabbix サーバー環境プラットフォームバージョン: ZABBIX バージョン 4.4システム:...
JS ES 新機能テンプレート文字列
目次1. テンプレート文字列とは何ですか? 2. 複数行のテンプレート文字列2.1 式付きテンプレー...
Linuxファイルコマンドの使用
1. コマンドの紹介ファイル コマンドは、ファイルの種類を識別するために使用されます。ファイル チェ...
ショートビデオ（Douyin）の透かし除去ツールの実装コード
目次1. まず最初のリンクを取得する2. ブラウザでこのリンクを開いてください3. アドレスを開くと...
React双方向データバインディングの原理についての簡単な説明
目次双方向データバインディングとは双方向データバインディングの実装データ影響ビュービューはデータに影...
MySQL シリーズ 13 MySQL レプリケーション
目次1. MySQLレプリケーション関連の概念2. シンプルな1マスター1スレーブアーキテクチャの実...
Vue の共通 API と高度な API の概要
目次次のチェックミックスイン$強制更新設定、削除フィルター指令その他の単純な共通プロパティとメソッド...
Navicat でストアド プロシージャ、トリガーを作成し、カーソルを使用する簡単な例 (画像とテキスト)
1. テーブルを作成する<br /> まず、2 つのテーブル (users テーブルと...
Mysql クエリの結果セットを JSON データに変換するサンプル コード
Mysql はクエリ結果セットを JSON データに変換します 序文 学生テーブル 学生スコアテーブ...
MySQL データベースの型変換のための CAST 関数と CONVERT 関数の説明
MySQL のCAST()およびCONVERT()関数を使用すると、ある型の値を取得し、別の型の値を...
mysql mycat ミドルウェアのインストールと使用
1. mycatとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベ...