1、设计响应式图片

1.1、使用<picture>标签（<body>中）

<picture>

<source media="(max-width: 600px)" srcset="m1.jpg">

<img src="m2.jpg"> </picture>

<picture>标签包含<source>标签和<img>标签，根据不同设备屏幕的宽度，显示不同的图片。上述代码的功能是，当屏幕的宽度小于 600 像素时，将显示 m1.jpg 图片，否则将显示默认图片 m2.jpg。

<!DOCTYPE html>
<html>
<head>
<title>使用<picture>标签</title>
</head>
<body>
<h1>使用<picture>标签实现响应式图片</h1><picture><source media="(min-width:900px)" srcset="m1.jpg"><img src="m4.jpg"/>
</picture>
</body>
</html>

1.2、使用css图片

@media screen and (min-width: 600px) { CSS 样式信息 }

上述代码的功能是，当屏幕大于 600 像素时，将应用大括号内的 CSS 样式。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width",initial-scale=1,maxinum-scale=1.0,user-scalable=”no”><!--指定页头信息--><title>使用CSS图片</title><style>/*当屏幕宽度大于800像素时*/@media screen and (min-width: 800px) {.bcImg {background-image:url(m3.jpg);background-repeat: no-repeat;height: 500px;}}/*当屏幕宽度小于799像素时*/@media screen and (max-width: 799px) {.bcImg {background-image:url(m4.jpg);background-repeat: no-repeat;height: 500px;}}</style>
</head>
<body>
<div class="bcImg"></div>
</body>
</html>

2、响应式视频

相比于响应式图片，响应式视频的处理稍微要复杂一点。响应式视频不仅仅要处理视频播放器的尺寸，还要兼顾到视频播放器的整体效果和体验问题。下面讲述如何使用<meta>标签处理响应式视频。

<meta>标签中的 viewport 属性可以设置网页设计的宽度和实际屏幕的宽度的大小关系。

语法格式如下：

<meta name="viewport" content="width=device-width",initial-scale=1,maxinum-scale=1,user-scalable=” no”>

3、响应式导航菜单

导航菜单是设计网站中最常用的元素。下面讲述响应式导航菜单的实现方法。利用媒体查询技术中的 media 关键字，获取当前设备屏幕的宽度，根据不同的设备显示不同的 CSS样式。

<!DOCTYPE HTML>
<html>
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS3响应式菜单</title>
<style>.nav ul {margin: 0;padding: 0;}.nav li {margin: 0 5px 10px 0;padding: 0;list-style: none;display: inline-block;*display:inline; /* ie7 */}.nav a {padding: 3px 12px;text-decoration: none;color: #999;line-height: 100%;}.nav a:hover {color: #000;}.nav .current a {background: #999;color: #fff;border-radius: 5px;}/* right nav */.nav.right ul {text-align: right;}/* center nav */.nav.center ul {text-align: center;}@media screen and (max-width: 600px) {.nav {position: relative;min-height: 40px;}.nav ul {width: 180px;padding: 5px 0;position: absolute;top: 0;left: 0;border: solid 1px #aaa;background-color: aqua;border-radius: 5px;box-shadow: 0 1px 2px rgba(0,0,0,.3);}.nav li {display: none; /* hide all <li> items */margin: 0;}.nav .current {display: block; /* show only current <li> item */}.nav a {display: block;padding: 5px 5px 5px 32px;text-align: left;}.nav .current a {background: none;color: #666;}/* on nav hover */.nav ul:hover {background-color: blue;}.nav ul:hover li {display: block;margin: 0 0 5px;}/* right nav */.nav.right ul {left: auto;right: 0;}/* center nav */.nav.center ul {left: 50%;margin-left: -90px;}}</style>
</head><body>
<h2>风云网上商城</h2>
<!--导航菜单区域-->
<nav class="nav"><ul><li class="current"><a href="#">家用电器</a></li><li><a href="#">电脑</a></li><li><a href="#">手机</a></li><li><a href="#">化妆品</a></li><li><a href="#">服装</a></li><li><a href="#">食品</a></li></ul>
</nav>
<p>风云网上商城-专业的综合网上购物商城，销售超数万品牌、4020万种商品，囊括家电、手机、电脑、化妆品、服装等6大品类。秉承客户为先的理念，商城所售商品为正品行货、全国联保、机打发票。</p>
</body>
</html>

4、响应式表格

4.1、隐藏表格中的列

为了适配移动端的布局效果，可以隐藏表格中不要用的列。通过利用媒体查询技术中的media 关键字，获取当前设备屏幕的宽度，根据不同的设备将不重要的列设置为：display：none，从而隐藏指定的列

<!DOCTYPE html>
<html >
<head><meta name="viewport" content="width=device-width, initial-scale=1"><title>隐藏表格中的列</title><style>@media only screen and (max-width: 600px) {table td:nth-child(4),table th:nth-child(4),table td:nth-child(6),table th:nth-child(6),table td:nth-child(1),table th:nth-child(1){display: none;}}</style>
</head>
<body>
<h1 align="center">商品采购信息表</h1>
<table width="100%" cellspacing="1" cellpadding="5" border="1"><thead><tr><th>编号</th><th>产品名称</th><th>价格</th><th>产地</th><th>库存</th><th>级别</th></tr></thead><tbody align="center"><tr><td>1001</td><td>冰箱</td><td>6800元</td><td>上海</td><td>4999</td><td>1级</td></tr><tr><td>1002</td><td>空调</td><td>5800元</td><td>上海</td><td>6999</td><td>1级</td></tr><tr><td>1003</td><td>洗衣机</td><td>4800元</td><td>北京</td><td>3999</td><td>2级</td></tr><tr><td>1004</td><td>电视机</td><td>2800元</td><td>上海</td><td>8999</td><td>2级</td></tr><tr><td>1005</td><td>热水器</td><td>320元</td><td>上海</td><td>9999</td><td>1级</td></tr><tr><td>1006</td><td>手机</td><td>1800元</td><td>上海</td><td>9999</td><td>1级</td></tr></tbody>
</table>
</body>
</html>

4.2 滚动表格中的列

通过滚动条的方式，可以将手机端看不到的信息，进行滚动查看。实现此效果主要是利用媒体查询技术中的 media 关键字，获取当前设备屏幕的宽度，根据不同的设备宽度，改变表格的样式，将表头有横向排列变成纵向排列。

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1"><title>滚动表格中的列</title><style>@media only screen and (max-width: 650px) {*:first-child+html .cf { zoom: 1; }table { width: 100%; border-collapse: collapse; border-spacing: 3; }th,td { margin: 0; vertical-align: top; }th { text-align: left; }table { display: block; position: relative; width: 100%; }/* <!--将thead所在部分至于右侧-->*/thead { display: block; float: left; }/*white-space: nowrap; 换行问题*/tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }thead tr { display: block; }th { display: block; text-align: right; }tbody tr { display: inline-block; vertical-align: top; }td { display: block; min-height: 1.25em; text-align: left; }th {background-color: antiquewhite; border-bottom: 0; border-left: 0; }td { border-left: 0; border-right: 0; border-bottom: 0; }tbody tr { border-left: 1px solid #babcbf; }th:last-child,td:last-child { border-bottom: 1px solid red; }}</style>
</head>
<body>
<h1 align="center">商品采购信息表</h1>
<table width="100%" cellspacing="1" cellpadding="5" border="1"><thead><tr><th>编号</th><th>产品名称</th><th>价格</th><th>产地</th><th>库存</th><th>级别</th></tr></thead><tbody align="center"><tr><td>1001</td><td>冰箱</td><td>6800元</td><td>上海</td><td>4999</td><td>1级</td></tr><tr><td>1002</td><td>空调</td><td>5800元</td><td>上海</td><td>6999</td><td>1级</td></tr><tr><td>1003</td><td>洗衣机</td><td>4800元</td><td>北京</td><td>3999</td><td>2级</td></tr><tr><td>1004</td><td>电视机</td><td>2800元</td><td>上海</td><td>8999</td><td>2级</td></tr><tr><td>1005</td><td>热水器</td><td>320元</td><td>上海</td><td>9999</td><td>1级</td></tr><tr><td>1006</td><td>手机</td><td>1800元</td><td>上海</td><td>9999</td><td>1级</td></tr></tbody>
</table>
</body>
</html>

4.3 转换表格中的列

转换表格中的列就是将表格转化为列表。利用媒体查询技术中的 media 关键字，获取当前设备屏幕的宽度，然后利用 CSS 技术将表格转化为列表。

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1"><title>转换表格中的列</title><style>@media only screen and (max-width: 800px) {/* 强制表格为块状布局 */table, thead, tbody, th, td, tr {display: block;}/* 隐藏表格头部信息 */thead tr {display:none;}tr { border: 1px solid red; }td {/* 显示列 */border: none;border-bottom: 1px solid green;position: relative;padding-left: 50%;white-space: normal;text-align:left;}}</style>
</head>
<body>
<h1 align="center">学生考试成绩表</h1>
<table width="100%" cellspacing="1" cellpadding="5" border="1"><thead><tr><th>学号</th><th>姓名</th><th>语文成绩</th><th>数学成绩</th><th>英语成绩</th><th>文综成绩</th><th>理综成绩</th></tr></thead><tbody align="center"><tr><td>1001</td><td>张飞</td><td>126</td><td>146</td><td>124</td><td>146</td><td>106</td></tr><tr><td>1002</td><td>王小明</td><td>106</td><td>136</td><td>114</td><td>136</td><td>126</td></tr><tr><td>1003</td><td>蒙华</td><td>125</td><td>142</td><td>125</td><td>141</td><td>109</td></tr><tr><td>1004</td><td>刘蓓</td><td>126</td><td>136</td><td>124</td><td>116</td><td>146</td></tr><tr><td>1005</td><td>李华</td><td>121</td><td>141</td><td>122</td><td>142</td><td>103</td></tr><tr><td>1006</td><td>赵晓</td><td>116</td><td>126</td><td>134</td><td>146</td><td>116</td></tr></tbody>
</table>
</body>
</html>