如何制作自适应的网络收听语音
随着网络的迅速发展，越来越多的人使用手机上网。移动设备不仅仅是桌面设备，也是最常见的接入因特网的终端。因此，Web设计者必须面对一个问题：如何在不同大小的设备上显示相同的Web页面？手机屏幕很小，宽度一般在600像素以下，PC屏幕的宽度一般在1000像素以上，有些像素达到2000像素。同样的内容，在屏幕大小不同的屏幕上显示出满意的效果并不是一件容易的事。许多网站被设计来为不同的终端设计多个网页，但存在许多维护问题。这里我们可以设计一个简单的盒子，可以识别不同的终端，显示不同的效果。
工具/原料
DM web design software
ps图像处理软件
方法/步骤
一
在Web代码的头部，添加一行视口元素标记。
元名称=“视口”内容=“宽度=设备宽度，初始规模= 1”
视口是Web页面的默认宽度和高度。上面的行代码意味着页面宽度等于屏幕宽度（宽度=设备宽度），原始缩放比例（初始比例= 1）为1，也就是说，初始页面大小占屏幕区域的100%。
二
由于网页会根据屏幕的宽度调整布局，绝对宽度的布局不能使用，绝对宽度的元素不能使用。图像也是如此。
具体地说，CSS代码没有指定像素宽度：
宽度：XXX；
只能指定百分比宽度：
宽度：XX；
也许
宽度：自动；
三
字体不能使用PX，但只有相对大小（EM）。
例如:
体{字体：正常100%黑体，Arial，sans-serif；}
上面的代码指定字体大小是页面默认大小的100%，即16像素。
四
流体布局（流体网格）
“流布局”的意思是每个块的位置是浮动的，而不是固定的。
主{浮点：右边；宽度：70%；}
。leftbar {浮动：左；宽度：25%；}
浮点的优点是，如果宽度太小，不能放置这两个元素。以下元素将自动滚动到前元素的底部，而不是水平溢出（溢出），避免出现水平滚动条。
五
“自适应网页设计”是mediaquery模块介绍了CSS3的核心。
它的意思是自动检测屏幕的宽度，然后加载相应的CSS文件。
<链接rel=“样式表”type=“文本/ CSS媒体=“屏幕（最大设备的宽度：400px）和“href =“tinyscreen .css”/>
上面的代码意味着，如果屏幕宽度小于400像素（最大设备的宽度：400px），该tinyscreen.css文件加载。
<链接rel=“样式表”type=“文本/ CSS媒体=“屏幕（最小宽度：400px）和（最大设备的宽度：600px）“href =“名.css”/>
如果屏幕的宽度是400像素和600像素之间的smallscreen.css文件加载。
结束
请参考下面的示例—我称之为“box”
<！DOCTYPE html >
<
<head>
<元字符集=“UTF-8”>
视口要重置<！——iPhone的初始规模-->
元名称=“视口”内容=“宽度=设备宽度，初始规模= 1”>
演示：3步响应式设计
IE8或< css3-mediaqueries.js！——老—
<！——如果……9 ]
<脚本src=“http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”> < /脚本>
<！[判断] -->
<样式>“文本/ CSS”>
{体
字体：1em / 150% Arial，Helvetica，sans-serif；
}
{a
颜色：# 669；
文字装饰：无；
}
答：悬停{
文字装饰：下划线；
}
{ H1
字体：黑体36px / 100% Arial，Helvetica，sans-serif；
}
/ ************************************************************************************
结构
************************************************************************************* /
# pagewrap {
填料：5px；
宽度：960px；
保证金：20px汽车；
}
#头{
身高：180px；
}
#内容{
宽度：600px；
浮点数：左；
}
#边栏{
宽度：300px；
浮子：右边；
}
#页脚{
清楚：两者；
}
/ ************************************************************************************
媒体查询
************************************************************************************* /
对于980px或少/ * * /
“媒体屏幕（最大宽度：980px）{
# pagewrap {
宽度：94%；
}
#内容{
宽度：65%；
}
#边栏{
宽度：30%；
}
}
对于700px或少/ * * /
“媒体屏幕（最大宽度：700px）{
#内容{
宽度：自动；
浮点数：无；
}
#边栏{
宽度：自动；
浮点数：无；
}
}
对于480px或少/ * * /
“媒体屏幕（最大宽度：480px）{
#头{
高度：自动；
}
{ H1
字体大小：24px；
}
#边栏{
显示：无；
}
}
/ *边界和指导方针（您可以忽略这些）。
#内容{
背景：# f8f8f8；
}
#边栏{
背景：# f0efef；
}
#头，#内容，#边栏{
边距：5px；
}
# pagewrap，#头，#康特
