首先，我们创建一个空白的模版，代码很简单，如下所示：
复制代码
步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：
复制代码
读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的 步骤3 往HTML 5标签中增加代码
1）首先往标题中增加如下代码：
Simple HTML5 Template
复制代码
2）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航：
HomeAboutParent PageChild
OneChild Two with childChild OneChild
TwoChild ThreeChild Three
Contact
复制代码
3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下代码所示：
This is a title for post
Richard KS20th March 2013TutorialsHTML5, CSS3
and Responsive10 CommentsLorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s
复制代码
4）添加标签 HTML5提供的元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。
根据目前的规范，元素有两种使用方法：
被包含在中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。
在之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。
代码如下：
CategoriesCategory 1Category 2
Parent CategoryChild OneChild Two
Grandchild OneGrandchild TwoGrandchild Three
Child ThreeCategory 3
TextLorem Ipsum is simply dummy
text of the printing and typesetting industry.
复制代码
5）加上最后的标签，代码为：
Copyright@ 2013 HTML5.comPrivacy Policy - About Us
复制代码
步骤4 增加CSS样式
首先创建一个空白的样式，如下：
[/code] 然后在http://necolas.github.com/normalize.css/中下载这个css,然后将其内容复制到该空白的文件中代码如下： [code]body {
font-family: arial, sans-serif
font-size: 100%/* best for all browser using em */
padding:0
margin:0
}
*, html { line-height: 1.6em}
article img { width:automax-width:100%height:auto}
.sidebar a, article a, header a, footer a { color: #C30}
header a { text-decoration: none}
#wrapper {
font-size: 0.8em/* 13px from 100% global font-size */
max-width: 960px/* standard 1024px wide */
margin: 0 auto
}
/* css for */
header {padding: 1em 0 margin: 0px float: left width: 100%
}
header hgroup { width: 100%font-weight:normal}
/* css for */
nav
{display: block margin: 0 0 2em padding: 0px
float: left width: 100% background-color: #181919
}
nav ul ul {display: none}
nav ul li:hover >ul {display: block}
nav
ul {padding: 0 list-style: none position:
relative display: inline-table z-index: 9999
margin: 0px float: left width: 100%
}
nav ul:after {content: ""clear: bothdisplay: block}
nav ul li {float: left}
nav ul li:hover a {color: #fff}
nav
ul li a {display: block padding: 1em font-size:
1.125em color: #ccc text-decoration: none
margin: 0px background-color: #000 border-right: 1px
solid #333
}
nav ul li:last-of-type a {border-right: 1px solid transparent !important}
nav
ul ul {background: #5f6975 border-radius: 0px
padding: 0 position: absolute top: 100% width:
auto float: none
}
nav ul li:hover {background: #5f6975 color: #FFF
}
nav ul ul li a:hover {background-color: #4b545f
}
nav ul ul li {
float: none
border-bottom: 1px solid #444240
position: relative
}
nav ul ul li a {
padding: 0.5em 1em
font-size: 1em
width:10em
color: #fff
}
nav ul ul ul {
position: absoluteleft: 100%top:0
}
/* css for */
section.content { width: 70%float:left}
.content article { width:100%float:leftpadding: 0 0 1emmargin: 0 0 1emborder-bottom: 1px solid #ddd}
article .entry { clear:bothpadding: 0 0 1em}
h1.post-title { font-size: 1.8emmargin:0padding:0}
.entry.post-meta { color: #888}
.entry.post-meta span { padding: 0 1em 0 0}
.entry.post-content { font-size: 1.125emmargin:0padding:0}
/* css for */
aside.sidebar { width: 25%float:right}
aside.sidebar ul {width:100% margin: 0px padding: 0px float: left list-style: none
}
aside.sidebar
ul li {width:100% margin: 0px 0px 2em padding:
0px float: left list-style: none
}
aside.sidebar ul li ul li {margin: 0px 0px 0.2em padding: 0px
}
aside.sidebar
ul li ul li ul li {margin: 0px padding: 0px 0px 0px
1em width: 90% font-size: 0.9em
}
aside.sidebar
ul li h3.widget-title {width:100% margin: 0px
padding: 0px float: left font-size: 1.45em
}
/* css for */
footer {width: 98% float:left padding: 1% background-color: white margin-top: 2em
}
footer .footer-left { width: 45%float:lefttext-align:left}
footer .footer-right { width: 45%float:righttext-align:right}
复制代码
步骤5 为移动应用使用@media query查询 为了进行响应式设计，最佳的方案是使用@media query去进行查询，在上面的CSS代码中添加如下代码：
/* ipad 768px */
@media only screen and (min-width:470px) and (max-width:770px){
body { background-color: red} #wrapper { width:96%font-size: 0.6875em}
section.content, aside.sidebar { width:100%}
}
/* iphone 468px */
@media only screen and (min-width:270px) and (max-width:470px){
body { background-color: yellow} #wrapper { width:96%font-size: 0.6875em}
section.content, aside.sidebar { width:100%}
}
复制代码
步骤6 增加jquery,modernizer和html5shiv到标签中 这里推荐使用Modernizr 和html5shiv，它们都是一个能在多种浏览器中通过运行各种脚本兼容运行支持大部分HTML 5标签的插件。我们将它们和jQuery库放在标签前，代码如下：
0
复制代码
响应式网页设计一直是主要趋势，甚至早在Mashable宣布2013年为响应式网页设计之年之前。将其与各种屏幕尺寸的移动设备的使用增加相结合，很容易理解为什么互联网不会停止谈论它。
但是自适应网页设计对小企业主意味着什么?更重要的是，为什么要关注响应式网页设计?今天给大家分享什么是响应式网页UI设计?
在推广和营销您的业务时，设计良好的网站可能是您最有价值的资产。但是，如果您希望它真正有效，仅凭有吸引力的设计是不够的。您的网站还需要响应。
您想要响应式网站的主要原因是，使用移动设备浏览互联网的事实已经持续了几年，并且没有丝毫放缓的迹象。
从业务角度来看，这意味着，如果您的网站对较小的屏幕无法很好地响应，并且难以阅读和浏览，则访问者将更倾向于转到竞争对手的网站。
简而言之，响应式网页设计不是奢侈，而是必需品，现在是确保您的网站具有响应能力的最佳时机。
如果您一直想知道响应式网页设计的真正含义和重要性，那么您来对地方了。在本文中，我们将解释响应式网页设计的工作原理，为什么要考虑响应式网站，让我们开始吧!
什么是响应式网页设计?
响应式网页设计一词是Ethan
Marcotte在2010年提出的，它是指设计网站以响应所查看的设备，从而为用户提供无缝，最佳的用户体验的过程。
响应式网页设计的核心是遵循三个主要原则：流体网格，响应式媒体和媒体查询。在某些情况下，当设备无法确定网站的初始宽度或规模时，响应式网页设计也会利用媒体视口元标记，从而不会触发媒体查询。以下是解释的基本响应式网页设计原则：
1.流体网格
流体网格的工作方式与其他任何设计网格一样，它们使您能够以美观的方式在页面上排列元素。但是，与传统的网格不同，流体网格将根据屏幕尺寸进行调整，并可以适应任何宽度，因为它使用相对的测量单位(例如百分比或em单位)，而不是固定的单位(例如像素)。
2.媒体查询
媒体查询使您可以更加灵敏地设计响应式设计，并根据特定的屏幕尺寸进行相应调整。用外行的术语来说，网站使用媒体查询来收集数据，以帮助他们确定屏幕的大小，然后加载适当的CSS样式。
3.响应媒体
响应式网页设计的第三个核心原则是响应式或灵活的媒体。鉴于现代网站使用大量的图像，视频和其他媒体文件，因此这些类型的内容必须响应不同的屏幕尺寸。
通常，设计人员会将图像尺寸包括在其CSS样式表中。但是，由于上述固定的测量单位，因此不适用于响应式设计。相反，您必须对图像文件，视频和其他媒体类型使用max-width属性。为确保媒体文件不会超出其容器并根据屏幕大小很好地缩放，应将max-width属性设置为100%。
4.视口元标记
如前所述，当媒体查询因为设备无法确定网站的初始宽度而不会触发时，视口元标记就会起作用。为了解决这个问题，Apple推出了viewport
meta标签。
视口meta标签通常将高度或宽度值的初始比例设置为1，从而解决了使用设备高度或宽度与视口尺寸之间的比率无法识别网站比例的问题。
为什么您需要为企业网站进行响应式Web设计
响应式网页设计不仅要遵循最新的网页设计趋势。为您的网站采用自适应布局对您的业务有很多好处，可能会影响您的访问量，SEO和收入。以下是您应考虑为网站考虑响应式网页设计的五个主要原因。
1.更好的用户体验和网站可用性
采用响应式网页设计的最重要原因是，您将为访问者提供更好的用户体验并提高网站的可用性。如果不强制访问者立即向各个方向滚动，捏和缩放以阅读您的内容，他们将更倾向于在您的网站上停留更长的时间。他们将能够轻松地从一页导航到另一页，并且可以轻松填写表格或点击号召性用语按钮。
2.更多的移动访问者
正如我们前面提到的，统计数据表明，全球Web流量中有一半以上来自移动设备，这意味着一旦您的网站做出响应，您就有更大的机会吸引这些访问者。如果他们登陆您的网站，并且遇到一个即使在较小的屏幕上看起来也很不错的网站，那么他们就没有理由离开，因此您的业务一定会看到来自移动设备的潜在客户和客户的增加。
3.更快的网站
除了响应式网页设计之外，另一个互联网趋势就是网站必须快速加载。得益于流畅的网格和响应式媒体，响应式网站的加载时间要比不响应式网站更长。这导致访问者在您的网站上花费更多的时间，从而使我们进入下一个点-转化率。
4.提高转换率
一旦访问者在您的网站上花费更多的时间，您就有更大的机会将其从访问者转化为潜在客户，然后转化为订阅者和购买者。根据研究，智能手机设备的平均转换率比台式机转换率高64%。这是由于拥有易于在各种屏幕尺寸上使用且加载时间更快的网站而带来的用户体验改善的直接结果。
5.更好的SEO排名
最后，更好的SEO排名绝对是响应式网页设计的五个优点之一。毕竟，如果在搜索引擎中找不到您，那么为您的网站获得自然流量几乎是不可能的。根据Google的说法，自2015年4月以来，您网站的响应度是确定您的网站在搜索引擎中的显示方式的排名信号之一。但是，Google并不是唯一推荐它的搜索引擎。百度也明确指出，构建针对所有平台优化的网站是成功实施SEO策略的关键。
了解什么是响应式网页设计，如何开始响应式Web设计
既然我们已经介绍了响应式Web设计的最重要优点，那么让我们讨论如何入门。
1.测试您的网站是否响应
您应该做的第一件事是测试网站的响应能力。您可以使用Google的“移动设备适合性测试”之类的工具。您所要做的就是输入站点的URL，该工具将分析您的站点并告诉您是否响应。您还将获得有关如何确保您的网站适合移动设备的建议。
2.从响应式模板中汲取灵感
一旦您知道您的网站是否具有响应能力，就该从响应网站的示例中获得启发。您将确切地看到那些网站如何利用上述核心原则，以及它们如何实现其他必要的功能。
3.选择一个响应式模板或主题
下一步是为您的网站选择自适应模板或主题。如果您到目前为止一直在使用HTML模板，并且想要继续使用它们，那么有很多可响应的HTML模板可供选择。有响应式模板需求可以跟浪知潮客服直接联系。
4.通过这些响应式网页设计技巧将您的网站提升到一个新的水平
在确定您的网站使用的是响应式模板或主题之后，是时候使用其他提示和技巧将其提升到一个新的水平。使用我们的指南作为起点，可以帮助您确保您的网站提供最佳的用户体验并具有充分的响应能力。
总结
自适应网页设计不会很快消失。实际上，这是未来的方式，它确实具有许多优势，这些优势会影响任何企业主的底线。
如果您准备将您的网站提升到一个新的水平，希望本文提供的提示和技巧能为您指明正确的方向，更多知识请持续关注。
