Web ページのレスポンシブ レイアウト_html/css_WEB-ITnose

1. レスポンシブ レイアウトとは何ですか?

レスポンシブ レイアウトとは、2010 年 5 月に Ethan Marcotte によって提案された概念です。つまり、複数のレイアウトに対応できる Web サイトです。端末 - 端末ごとに特定のバージョンを作成するのではなく。このコンセプトは、モバイル インターネット ブラウジングを解決するために生まれました。

レスポンシブ レイアウトは、さまざまな端末のユーザーに、より快適なインターフェイスと優れたユーザー エクスペリエンスを提供することができ、現在の大画面モバイル デバイスの人気は、一般的な傾向であると言っても過言ではありません。このテクノロジーを採用するデザイナーが増えるにつれ、多くの革新が見られるだけでなく、確立されたパターンもいくつか見られます。

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

利点:

1. さまざまな解像度のデバイスに対応する高い柔軟性
2. 機能マルチデバイスのディスプレイ適応の問題を迅速に解決

欠点:

1. さまざまなデバイスとの互換性、重い作業負荷、低効率
2. 煩雑なコード、隠された無駄な要素があるため、読み込み時間が長くなります
3. 実際、これは折衷的な設計ソリューションであり、多くの要因の影響を受け、最良の結果を達成することはできません
4. 元の設計が変更されていますレイアウト構造はユーザーの混乱を引き起こす可能性があります

3. レスポンシブ レイアウトを設計する方法は何ですか?

レスポンシブ レイアウトとは何かを学びました。実際のプロジェクトでは、どのようにデザインすればよいでしょうか? 以前は、さまざまなサイズのデバイスを使用する必要がありました。解決策はあるでしょう、笑、レスポンシブ レイアウトについて話すとき、CSS3 のメディア クエリについて言及する必要があります。これは使いやすく、強力で高速です。メディア クエリはレスポンシブ レイアウトを作成するための強力なツールです。このツールを使用すると、豊富で実用的なさまざまなインターフェイスを非常に便利かつ迅速に作成できます。次に、メディア クエリについて詳しく見てみましょう。

1. CSS のメディア クエリとは何ですか?

さまざまなメディア タイプと条件を通じてスタイル シート ルールを定義します。メディア クエリを使用すると、CSS が異なるメディア タイプや同じメディア上の異なる条件に対してより正確に動作できるようになります。メディア クエリのほとんどのメディア プロパティは、「以上」と「以下」を表す min と max を受け入れます。例: width には min-width と max-width が含まれます。メディア クエリは CSS の @media ルールと @import ルールで使用でき、HTML と XML でも使用できます。このラベル属性を通じて、さまざまなデバイス、特により広く使用されるモバイル デバイスにリッチ インターフェイスを簡単に実装できます。

2. メディアクエリで取得できる値は何ですか?

• デバイスの幅と高さの表示画面/触覚デバイスの幅と高さ。
• 表示画面/触覚デバイスのレンダリング ウィンドウの幅と高さ。
• デバイスの手持ち方向、横向きか縦向き(縦向き/横向き)、プリンターなど。
• アスペクト比ドットマトリクスプリンターなど
• デバイス・アスペクト比・ドットマトリクスプリンターなど
• オブジェクトカラーまたはカラーリストカラー、カラーインデックス表示画面。
• デバイスの解像度。

3. 文法構造と使用法

@media 设备名 only (选取条件) not (选取条件) and(设备选取条件)，设备二{sRules}

例 1: リンク内で @media を使用する: 上記の使用法では

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" />

のみを省略できます。 , コンピューターのモニターに限定されますが、最初の条件 max-width はレンダリング インターフェイスの最大幅を指し、2 番目の条件 max-device-width はデバイスの最大幅を指します。

例 2: スタイル シートに @media を埋め込みます:

@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

例 2 では、コンピューターのモニターの解像度 (幅) が 1024px 以上に設定されています (および表示される最大幅は 989 ピクセルです）; 画面幅が 480 ピクセル以下のハンドヘルド デバイスは水平に配置されます（つまり、画面幅が 480 ピクセルを超える場合は CSS スタイルが地面に平行になります）。 480 ピクセル以上 1024 ピクセル未満、および垂直に配置されたデバイス。

上記の例からわかるように、文字はスペースで接続され、選択条件は括弧内に含まれ、srules は互換設定のスタイルシートであり、角括弧内に含まれています。 （特定のデバイスを制限する、省略可能）、および（論理積）、not（特定のデバイスを除く）のみが論理キーワードであり、複数のデバイスはカンマで区切られます。これは CSS の基本的な構文を継承します。

4. 使用可能なデバイス名パラメーター:

类型	解释
all	所有设备
braille	盲文
embossed	盲文打印
handheld	手持设备
print	文档打印或打印预览模式
projection	项目演示，比如幻灯
screen	彩色电脑屏幕
speech	演讲
tty	固定字母间距的网格的媒体，比如电传打字机
tv	电视

5. 使用可能なデバイス名パラメーター:

关键字	说明
only	限定某种设备类型
and	逻辑与，连接设备名与选择条件、选择条件1与选择条件2
not	排除某种设备
,	设备列表

7、测试Media Queries

最后，我们需要对我们刚刚设计的 Media Queries进行测试，想要在不同设备上测试 Media Queries的效果，可以使用一个浏览工具来检验不同尺寸屏幕下的显示效果，在这里为大家介绍一个不错的在线工具 –  Responsivator ，它可以模拟iPhone等各种不同设备，并且还可以自定义不同尺寸屏幕的显示效果，只需要输入一个url甚至是本地的一个url(如:http://127.0.0.1/)，就可以看到网站在不同尺寸屏幕下的显示效果.

8、通过Media Queries实现响应式布局设计

好了，我们明白了什么是 Media Query，那我们一起来运用到响应式布局的设计项目中去。设计思路很简单，首先先定义在标准浏览器下的固定宽度（假如标准浏览器的分辨率为1024px，那么我们设置宽为980px），然后用 Media Query来监测浏览器的尺寸变化，当浏览器的分辨率小于1024px的时候，则通过 Media Query预设的样式表来将页面的宽度设置为百分比显示，这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。同理，当浏览器的可视区域改变到某个值（假如为650px）的时候，页面的结构元素根据 Media Query预设的层叠样式表来进行相对应的调整。看看我们的例子：

 /* 当浏览器的可视区域小于980px */@media screen and (max-width: 980px) {     #wrap {width: 90%; margin:0 auto;}     #content {width: 60%;padding: 5%;}     #sidebar {width: 30%;}     #footer {padding: 8% 5%;margin-bottom: 10px;}} /* 当浏览器的可视区域小于650px */@media screen and (max-width: 650px) {     #header {height: auto;}     #searchform {position: absolute;top: 5px;right: 0;}     #content {width: auto; float: none; margin: 20px 0;}     #sidebar {width: 100%; float: none; margin: 0;} }

通过上面我们就可以监测浏览器的可视区域变化的是时候我们的页面结构元素也会相对应的变化，当然你可以再多设置几个尺寸的监测层叠样式表，这样子就可以根据不同尺寸设备来进行响应式的布局。为了更好的显示效果，我们往往还要格式化一些CSS属性的初始值：

/* 禁用iPhone中Safari的字号自动调整 */html {    -webkit-text-size-adjust: none;}/* 设置HTML5元素为块 */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block;}/* 设置图片视频等自适应调整 */img {    max-width: 100%;    height: auto;    width: auto\9; /* ie8 */}.video embed, .video object, .video iframe {    width: 100%;    height: auto;}

最后要注意的是在页面的头部 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1之间加上下面这句∶

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

meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

参数设置∶

• width – viewport的宽度
• height – viewport的高度
• initial-scale – 初始的缩放比例
• minimum-scale – 允许用户缩放到的最小比例
• maximum-scale – 允许用户缩放到的最大比例
• user-scalable – 用户是否可以手动缩放

最后对于在IE浏览器中不支持 media query的情况，我们可以使用 Media Query JavaScript来解决，只需要在页面头部引用 css3-mediaqueries.js即可。示例：

<!--[if lt IE 9]>     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

以上就是我学习响应式布局的相关记录，如有添加，以后会继续更新。