- 997
-
-
-
-
-
响应网页设计的目标是一个网站的外观和UX无缝适应不同的平台。该技术还很年轻，在很多方面超过了可用的技术。
Trilibis已经宣布推出的SNOW-软件使一个网络-旨在改善和解决的问题已经放缓采纳，我们能够提供响应式设计，使网站真正的设备感知：
响应网站减缓
最近的347响应网站，Akamai的研究发现，86％有相同的数据加载，无论他们能否全屏显示。这意味着，在桌面计算机和带宽有限的iPhone正在处理的数据量相同。
转换为响应的设计通常是指一个完整的网站，
通常情况下重建，布局和架构必须完全重新考虑支持流体含量。
“响应”，是指屏幕宽度，并没有其他的参数，
您不能使用RWD目标设备或浏览器类型的内容，或以其他方式优化经验，为特定的移动用例。
不一致的浏览器
不支持所有设备和浏览器的支持响应的设计方式相同。比以往任何时候都更多，从平台到用户弹出平台，同时探索购买决定：响应网站保持一致仍然是一个苦差事。
SNOW是HTML5标准的服务器端软件，可以让网页设计师和开发人员能够创建真正具有响应性的多设备网站。基于一个单一的代码库，使用一个URL，站点建在整个阵列的设备与SNOW荷载快速和无缝地调整自己的布局和用户体验到不同的平台。
两个主债权SNOW的网页设计师是其维持和吸引了来自一个不断更新的设备库，并可以增强现有的网络资产和代码，而不是需要一个总的重建。
今天学习的一些media query课程内容：
响应式网页设计，毫无疑问地变得越来越重要了。如果你还没听说过响应式设计，可以先看看我之前发的文章响应式网站。对新手来说, 响应式设计听起来可能会有点复杂, 但事实上，它比你想象的简单得多。为了让你能快速入门，我准备了一个简易的教程。通过这三个步骤，你一定可以了解响应式设计的基本原理和media query（在你有一些CSS基础的前提下）。
第一步. Meta 标签 (查看 demo)
为了适应屏幕，多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。你可以使用meta标签的viewport属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度，并且忽视初始的宽度设置。这段代码写在 <head>里面
| 1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
IE8及以下的浏览器不支持media query。你可以使用media-queries.js 或 respond.js 。这样IE就能支持media query了。
| 1 2 3 | <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> |
第二步. HTML 结构
这个例子里面，有header、content、sidebar和footer等基本的网页布局。 header 有固定的高180px，content 容器的宽是600px，sidebar的宽是300px。
第三步. Media Queries
CSS3 media query 响应式网页设计的关键。它像一个if语句，告诉浏览器如何根据特定的屏幕宽口来加载网页。
如果屏幕窗口小于980px，下面的规则就生效。在这里，我设置了容器的宽度为百分比的形式而不是像素单位，这样会更加灵活。
如果屏幕窗口小于700px， 定义 #content 和 #sidebar 为自适应宽度，并移除它的浮动属性，这样它会全屏显示。
如果屏幕窗口小于480px (移动设备的屏幕)， 设置#header 高为自适应，把h1字体设置为24px，并且隐藏#sidebar。
这些media query，你可以写很多。在这个demo，我只写了三个。media query的目的是应用不同的CSS规则来实现屏幕的最佳布局。它可以写在同一个CSS文件，也可以写在不同的文件。
学习响应式网页设计的一些国外HTML5课程
响应CSS导航菜单案例：
全站高品质素材免费下载！
