简单的响应式网页实例（怎么用html5完成响应式布局）

本文目录

• 怎么用html5完成响应式布局
• 什么是响应式网站有没有例子
• 如何制作一个响应式的HTML5表格

怎么用html5完成响应式布局

响应式布局最简单的就是用css3来实现。我举一个最简单的例子。
下面是html代码。
《!DOCTYPE html》
《html lang="en"》
《head》

《meta charset="UTF-8"》

《meta name ="viewport" content="width = device-width,initial-scale=1"》
《title》index01《/title》

《link href="style01.css" type="text/css" rel="stylesheet"》
《/head》
《body》

《div class="heading"》第一《/div》

《div class="container"》

《div class="left"》第二《/div》

《div class="main"》第三《/div》

《div class="right"》第四《/div》

《/div》

《div class="footing"》第五《/div》
《/body》
《/html》
下面是css3代码
*{
margin:0px;
padding: 0px;
}
.heading,
.container,
.footing{
margin: 10px auto;
}
.heading{
height: 100px;
background-color: red;
}
.left,
.right,
.main{
height: 300px;
background-color: yellow;
}
.footing{
height: 100px;
background-color: gray;
}
《!--media="only screen and (max-width:640px)" 这句话的意思是:只要当渲染屏幕的宽度不大于640px的时候才会使用这个样式表--》
@media screen and (min-width: 960px){
.heading,
.container,
.footing{
width:960px;
}
.left,
.main,
.right{
float: left;
height: 500px;
}
.left,
.right{
width:200px;
}
.main{
margin: 0px 5px;
width:550px;
}
.container{
height: 500px;
}
}
@media screen and (min-width: 600px) and (max-width: 960px){
.heading,
.container,
.footing{
width: 600px;
}
.left,
.main{
float: left;
height:400px;
}
.right{
display: none;
}
.left{
width: 160px;
}
.main{
width: 435px;
margin-left: 5px;
}
.container{
height: 400px;
}
}
@media screen and (max-width: 600px){
.heading,
.container,
.footing{
width: 400px;
}
.left,
.right{
width: 400px;
height: 100px;
}
.main{
margin-top: 10px;
width:400px;
height:200px;
}
.right{
margin-top: 10px;
}
.container{
height: 420px;
}
}
这样就可以实现简单的响应式布局！如果你想要了解的话，可以到华清远见学习一下。我就是在那里学习的。

什么是响应式网站有没有例子

概念：
伊桑·马科特在2010年首次提出了响应式网页设计（RWD,Responsive Web Design）的概念。（当时能提出这个概念是很不简单的哦）他根据工程师在处理不同屏幕分辨率的网页内容展现的效果的时候常用的技巧和策略，创造性的进行了归纳总结。简而言之是指网页根据屏幕宽度，做出相应调整的，力求能够达到在不同的设备下，内容都能以最合适的方式展现给用户。
原理：
在CSS中，有一个不常用到的属性media。为了达到响应式设计的目的，让css根据屏幕宽度(例如media screen only @(max-width:480px))，使用不同的CSS代码，从而达到自动调整页面DIV宽度的目的。当然，除了CSS，还可以使用JS对页面内容进行动态的调整，不过这个技术不是很流行。
价值：
随着越来越多的智能移动设备（手机，平板）加入到互联网中来，互联网上的访问设备是爆炸性的增长（屏幕的分辨率也是爆炸性的增长）。为了给手机和平板设备提供更好的体验，必须在网站设计中使用响应式网站设计，并且整合从PC端到手机的各种屏幕尺寸和分辨率，用技术来使网页适应不同分辨率的屏幕。
总结
响应式网站设计，为计算机、手机、平板电脑等不同设备的访问用户了提供更加舒适的界面和更好的用户体验（和速度），而且随着目前移动设备的增长，已成为大势所趋。如果一个网站不支持响应式设计，那么就已经可以说不是很符合潮流了。
由于我的帐号等级不够，所以不能添加外链，敬请谅解。不过推荐你到起飞页去看一下什么是响应式的网站。

如何制作一个响应式的HTML5表格

举个实现HTML5响应式表格的实例，仅供参考：
HTML结构如下：
《table id="miyazaki"》
《caption》The Films of Miyazaki《/caption》
《thead》
《tr》《th》Film《th》Year《th》Honor
《tbody》
《tr》
《td data-th="Film"》My Neighbor Totoro
《td data-th="Year"》1988
《td data-th="Honor"》Blue Ribbon Award (Special)
《tr》
《td data-th="Film"》Princess Mononoke
《td data-th="Year"》1997
《td data-th="Honor"》Nebula Award (Best Script)
《tr》
《td data-th="Film"》Spirited Away
《td data-th="Year"》2001
《td data-th="Honor"》Academy Award (Best Animated Feature)
《tr》
《td data-th="Film"》Howl’s Moving Castle
《td data-th="Year"》2004
《td data-th="Honor"》Hollywood Film Festival (Animation OTY)
《/table》
注意代码中的data属性，每一个单元格的data属性都与表格的header相对应。
CSS样式
表格基本的CSS样式如下：
table#miyazaki caption {
font-size: 2rem; color: #444;
margin: 1rem;
background-image: url(miyazaki.png), url(miyazaki2.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center left, center right;
}
table#miyazaki {
border-collapse: collapse;
font-family: Agenda-Light; font-weight: 100;
background: #333; color: #fff;
text-rendering: optimizeLegibility;
border-radius: 5px;
}
table#miyazaki thead th { font-weight: 600; }
table#miyazaki thead th, table#miyazaki tbody td {
padding: .8rem; font-size: 1.4rem;
}
table#miyazaki tbody td {
padding: .8rem; font-size: 1.4rem;
color: #444; background: #eee;
}
table#miyazaki tbody tr:not(:last-child) {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
下面是响应式表格的CSS代码：
@media screen and (max-width: 600px) {
table#miyazaki caption { background-image: none; }
table#miyazaki thead { display: none; }
table#miyazaki tbody td { display: block; padding: .6rem; }
table#miyazaki tbody tr td:first-child { background: #333; color: #fff; }
table#miyazaki tbody td:before {
content: attr(data-th); font-weight: bold;
display: inline-block; width: 6rem;
}
}
media query代码中隐藏表格的头部单元，并且将每一个单元格的data-th作为标签显示在单元格内容的前面。每一行的第一个单元格都设置了特别的背景色和前景色，使之更为清晰。
扩展
你现在可以缩放浏览器来看看效果，非常不错。但是上面的代码是不可扩展的：要添加一个新行必须手动为每个单元格添加一个data-th属性。要想做到自动化，可以在服务器端实现，如PHP。也可以通过javascript来实现它。
首先，将整个表格都进行简化：
《table id="miyazaki"》
《caption》The Films of Hayao Miyazaki《/caption》
《thead》
《tr》《th》Film《th》Year《th》Honor
《tbody》
《tr》
《td》My Neighbor Totoro
《td》1988
《td》Blue Ribbon Award (Special)
《tr》
《td》Princess Mononoke
《td》1997
《td》Nebula Award (Best Script)
《tr》
《td》Spirited Away
《td》2001
《td》Academy Award (Best Animated Feature)
《tr》
《td》Howl’s Moving Castle
《td》2004
《td》Hollywood Film Festival (Animation OTY)
《/table》
然后在文档的底部添加下面的javascript代码：
《script》
var headertext = ;
var headers = document.querySelectorAll("#miyazaki th"),
tablerows = document.querySelectorAll("#miyazaki th"),
tablebody = document.querySelector("#miyazaki tbody");
for(var i = 0; i 《 headers.length; i++) {
var current = headers;
headertext.push( current.textContent.replace( /\r?\n|\r/,"") );
}
for (var i = 0, row; row = tablebody.rows; i++) {
for (var j = 0, col; col = row.cells; j++) {
col.setAttribute("data-th", headertext);
} }
《/script》
上面的代码的意思是：获取每一个《th》中的文本内容，然后分别剔除它们的回车和换行符。然后将这些文本分别添加到适当的单元格的data属性上，添加的规则与CSS样式的规则相一致。（使用setAttribute要比dataset要好，后者只有在IE 11中得到支持。）