RWD_html/css_WEB-ITnose の簡単な分析

1. はじめに

現在、モバイルデバイス、タブレット、PC の画面のサイズはそれぞれ異なり、それぞれの画面サイズに合わせて個別のソリューションが設計されています。 、ウェブサイト構築の複雑さと運用コストが大幅に増加します。レスポンシブ Web デザインの概念は、ユーザーの使用環境に応じて Web ページを自動的に調整し、ユーザー エクスペリエンスを効果的に向上させることです。

レスポンシブ Web デザインとは何ですか?

レスポンシブ Web デザイン (RWD と略されることが多い)。アダプティブ Web デザインおよびレスポンシブ Web デザインとも呼ばれます。これは、CSS3 のメディア クエリ (Media Query) 機能に基づいた最新の Web デザイン手法であり、Web ページをさまざまなデバイスに適応させます。つまり、ズームを減らしながら、デバイスの解像度とスケーリングに従ってレイアウトを自動的に再配置します。 、パンとスクロール。

2. レスポンシブ Web デザイン (RWD) の要素

流動グリッド、フレキシブル イメージ (フレキシブル イメージ) および メディア クエリ (メディア クエリ)はレスポンシブ Web デザインの 3 つの技術要素ですが、それぞれ異なる考え方が必要なアプローチでもあります。

• 流動グリッド: ピクセルやポイントなどの絶対単位ではなく、パーセンテージやタイポグラフィなどの相対単位を使用してページ要素のサイズを変更する必要がある概念。

柔軟な画像: 相対単位 (最大 100%) でサイズ変更も行い、画像が含まれる要素の外側に表示されないようにします。
メディア クエリ: Web ページを許可します。サイトにアクセスするデバイスの特性に基づいて、さまざまな CSS スタイル ルールを使用します。最も一般的に使用されるのはブラウザの幅です。

3. レスポンシブ Web デザイン (RWD) の基本原則

3.1 メタ タグ、ページ幅の自動調整を可能にします

ほとんどのモバイルブラウザは、画面解像度に合わせて HTML ページを広いビューポートに拡大します。ビューのメタタグを使用してリセットできます。このメタタグを タグに追加します。

IE9 を含むすべての主要なブラウザーがこの設定をサポートしています。メディア クエリは、古いブラウザ (主に IE6、7、8) ではサポートされていません。 media-queries.js または Reply.js を使用して、IE にメディア クエリのサポートを追加できます。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/><!--    这段代码的意思是，让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。        网页宽度默认等于屏幕宽度（width=device-width）；    初始缩放比例（initial-scale=1.0）为1.0，即网页初始大小占屏幕面积的100%；    允许用户缩放到的最小比例（minimum-scale=1.0）为1.0；    允许用户缩放到的最大比例（maximum-scale=1.0）为1.0；    不允许用户手动缩放（user-scalable=no）。 -->

注: 多くの人は、応答しない Web サイトでInitial-scale=1.0 を使用します。これにより、Web サイトが 100% の幅でレンダリングされ、ユーザーは手動でページを移動するかズームする必要があります。 user-scalable=no または Maximum-scale=1.0 が、initial-scale=1.0 と一緒に使用される場合、ユーザーは Web ページを拡大/縮小してコンテンツ全体を表示することはできません。

<!--[if lt IE 9]>     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]--><!--或者--><!--[if lt IE 9]>    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]-->

詳細: 共通メタ構成 – SegmentFault

3.2 絶対幅を使用しない

Web ページは画面幅に応じてレイアウトを調整するため、絶対幅レイアウト、絶対幅の要素は使用できません。これは非常に重要です。

3.3 相対サイズのフォント

/*CSS代码不能指定像素宽度*/#header{    width: 1024px;}/*只能指定百分比宽度*/#header{    /*设定对象的宽度占父元素100%*/    width: 100%;}/*或者实际宽度*/#header{    /*根据对象实际大小自适应宽度*/    width:auto;}

フォントでは絶対サイズ (px) を使用できませんが、相対サイズ (em) のみを使用できます。

注: 1 em = 16 px

3.4 流体グリッド

body{    /*字体大小是页面默认大小的100%，即16像素*/    font: normal 100% 'Microsoft YaHei',Arial,Helvetica,sans-serif;}h1{    /*h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）*/    font-size: 1.5em;}

各ブロックの位置は変動しており、固定されていません。

フローティングの利点は、幅が小さすぎて 2 つの要素に収まらない場合、次の要素が自動的に前の要素の一番下までスクロールし、水平方向にオーバーフローせず、水平方向を回避できることです。スクロールバーが表示されます。

#main{    width: 100%;}#content{    float: left;    width: 75%;}#sidebar{    float: left;    width: 25%;}

3.5 柔軟な画像

レイアウトとテキストに加えて、RWD は画像の自動スケーリングも実装する必要があります。

3.6 メディアクエリ、CSS @media ルール

img{    max-width: 100%;}

同じ CSS ファイル内で、異なる画面解像度に基づいて異なる CSS ルールを適用することも選択できます。

4. レスポンシブ Web デザイン (RWD) で発生するいくつかの一般的な問題

/*当屏幕宽度小于768像素时，content块宽度为100%（width:100%），sidebar块不显示（display:none）*/@media screen and (max-width:768px) {    #content{        width: 100%;    }    #sidebar{        display: none;    }}

4.1 幅 100% と固定パディング (左) とパディング (右) の両方を使用すると、幅が超過します。デバイス画面

例:

解決策: 要素に指定されたパディングと境界線は、設定された width と height 内に描画されます。 CSS3 box-sizing 属性を #header に追加し、その属性値を border-box に設定します。

#header{    width: 100%;    height: 50px;    padding: 0 200px;    background: #fff;}

すべての要素でボーダーボックスを使用し、疑似クラス :before、:after を含めます。

#header{    width: 100%;    height: 50px;    padding: 0 200px;    background: #fff;    box-sizing: border-box;    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;}

4.2 画像を同じ比率で拡大および縮小する

*,*:before,*:after{    box-sizing: border-box;    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;}

1) 背景画像 (CSS 背景属性)

解決策: padding-bottom を上手に使用するまたはパディング -top。たとえば、写真の解像度が 1440 × 552 の場合、padding-bottom または padding-top の値は、(幅 ÷ 長さ) × 100% = 38.333333% となります。

<article id="showcase"></article>

2) Web ページ上のリンク画像 (HTML タグ)

#showcase{    width: 100%;    padding-bottom: 38.333333%;    background: url(../images/showcase.jpg);    background-size: cover;}

例:

解決策 1: 賢く利用するCSS max-height 要素の最大高さ値を定義するプロパティ。

<article id="showcase">    <img  src="/static/imghwm/default1.png"  data-src="images/showcase.jpg"  class="lazy" alt="RWD_html/css_WEB-ITnose の簡単な分析" ></article>

解決策 2: height: auto を使用して、ブロック内のコンテンツに応じて高さを自動的に調整します。

#showcase img{    width: 100%;    max-height: 552px;}

#showcase2 img{    width: 100%;    height: auto;}

解决方案 3：该方案与背景图像运用的方案相似，不过没用 CSS position属性的话，高度增加一倍。

#showcase3{    position: relative;    width: 100%;    padding-bottom: 38.333333%;}#showcase3 img{    position: absolute;    width: 100%;    height: 100%;}

4.3 文本超出指定宽度后用省略号代替

例如： h1不换行，文本超出部分用省略号代替。

解决方案：

h1{    word-break:keep-all;/* 不换行 */    white-space:nowrap;/* 不换行 */    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/}

4.4 清除浮动

例如：父元素的高度无法被撑开，影响与父元素同级的元素；与浮动元素同级的非浮动元素会跟随其后；若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

解决方案 1：让下一个块也浮动。

解决方案 2：使用空标签清除浮动。在所有浮动标签后面添加一个空标签，定义 CSS clear:both;不过增加了无意义标签使 HTML 结构看起来不够简洁。

<div   style="max-width:90%"></div>

解决方案 3：使用 overflow，给包含浮动元素的父标签添加 CSS 属性 overflow:auto; zoom:1。 zoom:1用于兼容 IE6。

#parent{    overflow: auto;    zoom: 1;}

解决方案 4：使用 :before， :after选择器清除浮动，只适用于非 IE 浏览器。使用中必须设置 height: 0;，否则该元素会比实际高出若干像素。

#parent:before,#parent:after{    content: ".";    display: block;    height: 0;    visibility: hidden;}#parent:after{    clear: both;}#parent{    zoom: 1;/*兼容IE < 8*/}/*或者*/#parent:before,#parent:after{    content: "";    display: table;}#parent:after{    clear: both;    overflow: hidden;}#parent{    zoom: 1;/*兼容IE < 8*/}

4.5 DIV 互换

例如：有三个 DIV（如下图，分别为红、黄、蓝），当分辨率较小时，三个 DIV 重新排列。排列顺序为黄、红、蓝。

<aside id="posts">    <article class="post post1"></article>    <article class="post post2"></article>    <article class="post post3"></article></aside>

解决方案：

#posts{    position: relative;    width: 100%;}.post{    position: absolute;    float: left;    width: 33.333333%;    height: 200px;}.post1{    margin-left: 0%;    background: red;}.post2{    margin-left: 33.333333%;    background: yellow;}.post3{    margin-left: 66.666666%;    background: blue;}@media screen and (max-width:678px) {    .post{        width: 100%;    }    .post1{        margin-top: 200px;        margin-left: 0%;        background: red;    }    .post2{        margin-top: 0;        margin-left: 0%;        background: yellow;    }    .post3{        margin-top: 400px;        margin-left: 0%;        background: blue;    }}

补充：也可以换个思维，先做低于 678 px，再做高于 678 px的。

五、优秀（RWD）网站

5.1 有关制作 RWD 文章推荐

• 18个详细响应式网页设计教程 – OPEN资讯

• 响应式网页设计-腾讯ISUX

• 进步博客 | 关注信息无障碍！

• Media Queries

5.2 优秀 RWD 网站

• 首页-Suwen

• Studio Lovelock

• Melanie Daveid

• Esquire

六、总结

一个网站若是没有良好的用户体验，即便有诱人的内容也无法很好的吸引用户。响应式设计虽然可以合理的呈现给我们想要的内容，但并不是将整个网页完美的缩放给我们。由于移动设备屏幕大小的限制，在其上进行显示的内容一般是经过精心筛选的。过多的内容会使页面看起来杂乱不堪，用户也很难找到自己想要的东西。

比较好的做法是留下少部分最重要的内容直接进行展示，其余的部分可以先隐藏起来，用户点击时再展开。这样信息都保留在了页面上，但是不要一次性的全都推到用户面前，用户可以按需索取想要了解的内容。对于移动设备流量上的考虑，可以设计成 AJAX模式，而不是预先加载所有的页面数据，这样可以节省一部分的流量。

把握好“ 宽度， 位置， 样式”，响应式网页设计（RWD）就不难了。