CSS3 レスポンシブレイアウト_html/css_WEB-ITnose

レスポンシブ レイアウトの長所と短所は何ですか?

利点:
異なる解像度のデバイスに対応する高い柔軟性
マルチデバイスのディスプレイ適応の問題を迅速に解決できます
欠点:
との互換性さまざまなデバイス、重い作業負荷、低効率
コードが煩雑で、隠れた無駄な要素が表示され、ロード時間が長くなります
実際には、これは妥協的な設計ソリューションであり、多くの要因の影響を受け、最良の結果を達成することはできません
元々のWebサイトのデザインをある程度変更している レイアウト構造がユーザーの混乱を招く

1. Media Query

CSS3中的Media Query（媒介查询）Media Query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。根据视窗的大小自动调整布局。**1、通过不同的媒体类型和条件定义样式表规则。**媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受 min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的 @media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面**2、Media能获得的值**设备的宽和高:     device-width,device-height显示屏幕/触觉设备渲染窗口的宽和高: width，heigth显示屏幕/触觉设备设备的手持方向:   orientation(portrait|lanscape) 横向/竖向 画面比例:        aspect-ratio 浏览器的长宽比屏幕比例:        device-aspect-ratio 设备屏幕的长宽比，如4/3,16/9等。视觉媒体:        color 定义每一组输出设备的彩色原件个数，如果不是彩色设备，则值等于0分辨率:          resolution 定义设备的非暴力，如:96dpi,300dpi以上仅仅orientation不支持max,min.**3、可用设备参数名**all       所有设备braille   盲文embossed  盲文打印handheld  手持设备print     文档打印或者打印预览模式projection项目演示(如幻灯片)screen    彩色电脑屏幕tty       固定字母间距的网络媒体，如电传打字机**4、逻辑关键字**only    限定某种设备类型and     逻辑与，连接设备名与选择条件、选择条件1与选择条件2not     排除某种设备(除了什么之外),       设备列表    **5、语法结构及用法**@media 设备名 only (选取条件) not (选取条件) and (设备选取条件), 设备二{sRules}在link中使用@media:27f6d256c2f916321524d44b316dc62a だけは省略可能です。 Web ページの最大幅は 640 であること、2 番目の条件はデバイスの最大幅が 640 ピクセルであることです。 <br> @media (min-device-width:1024px) および (max-width:989px)、screen および (max-device-width:480px)、(max-device-width:480px) および (orientation:landscape)、( min-device-width:480px) および (max-device-width:1024px) および (orientation:portrait) {//code} <br> コンピューターの画面サイズは 1024 ピクセル以上であり、表示される最大幅は最大 989 ピクセルです。デバイスの幅は 480px で、水平に配置した場合は 480px 以上、垂直に配置した場合は 1024px 未満になります。 <br> 文字はスペースで接続され、選択条件は括弧内に含まれ、コードは設定されたスタイルシートであり、角括弧内に含まれます。 (特定のデバイスを制限する、省略可能) および (論理 AND) のみが論理キーワードであり、複数のデバイスはカンマで区切られます <br> <br> 6. レスポンシブ レイアウトのテスト <strong> </strong> レスポンシブ レイアウトの要件さまざまなデバイスでテストする場合は、ブラウジング ツールを使用して、さまざまなサイズの小さな画面での表示効果を確認できます。さまざまな画面サイズで Web サイトの効果を閲覧するのに役立つツール - Responsivator http://sensitive.d3corp.com/?d3corp.com<br> <p>7. レスポンシブ レイアウト デザイン<strong></strong> <pre class="sycode">/*浏览器的可视区域不小于980px*/  @media screen and (min-width:980px){    .head{width:100%; height:70px; }    .head #logo{position:fixed; top:0px; left:50px;}    .head  nav{ width:870px;background:#fff;height:70px; margin:0 auto;}    .head  nav a{ width:100px; height:40px; margin:15px 0px; display:inline-block; }    }/*浏览器的可视区域在640px和980px之间*/ @media screen and (min-width:640px) and (max-width:980px){    .head{width:70px;height:870px;}    .head  nav{ width:70px;background:#fff;height:870px;margin-top:20px;}    .head  nav a{ width:70px; height:40px; margin:15px 0px; display:inline-block; }    }/*浏览器的可视区域小于640px*/ @media screen and (max-width:640px){    .head{width:256px; height:256px;position:fixed; bottom:20px; left:20px;}    .head #logo{position:absolute; top:0px; left:0px; right:0; bottom:0; padding:auto; margin:auto;}    .head  nav{width:256px; height:256px;background-color:rgba(0,0,0,0.6); border-radius:50%; transform:scale(0.1) rotate(-270deg); opacity:0; transition:all 500ms;margin-top:0px;}    .head  nav a{display:block; width:40px;height:40px;border-radius:50%; position:absolute;margin-left:-20px; margin-top:-20px; }

表示効果を向上させるには、多くの場合必要になります。次のようないくつかの CSS プロパティの初期値をフォーマットするには

 /* 禁用iPhone中Safari的字号自动调整 */　　html {　　-webkit-text-size-adjust： none;　　}　　/* 设置HTML5元素为块 */　　article， aside， details， figcaption， figure， footer， header， hgroup， menu， nav， section {　　display： block;　　}

2. メタ タグを使用してビューポートを制御します

モバイル デバイスのデフォルトのビューポートは、レイアウト ビューポートです。ウェブサイトを開発するときに必要なのは、理想的なビューポートです。

width を decice-width に設定します

 <meta name="viewport" content="width=device-width; initial-scale=1.0">

コンテンツ内のパラメータ設定:

width – ビューポートの幅
height – ビューポートの高さ、このプロパティはほとんど使用されません
Initial-scale – 初期のスケーリング率
minimum-スケール - ユーザーにズームを許可する最小比率
最大スケール - ユーザーがズームを許可する最大比率
ユーザー スケーラブル - ユーザーが手動でズームできるかどうか (いいえまたははい)
最後に、メディア クエリが有効な場合について説明します。 IE ブラウザではサポートされていないため、メディア クエリを使用できます。JavaScript で解決するには、ページの先頭で css3-mediaqueries.js を参照するだけです。例:

IE8 以前のバージョンのブラウザが CSS3 メディア クエリをサポートしていない問題の解決策
また、IE8 以前のバージョンの互換性の問題については、以下を参照してください: