如何在AJAX中制作一个响应的移动站点HTML5和CSS3编程
HTML5和CSS3 Web开发人员可以使用AJAX进行响应式移动站点。
使在多个分辨率上运行的一种方法是根据检测到的媒体类型提供不同CSS规则。
CSS3具有称为媒体查询的奇妙新函数，允许我们指定媒体类型并确定显示的各种函数。
我们可以使用此规范构建应在浏览器检测到某个类型或者大小的显示时使用CSS的子集。
指定媒体类型
@Media规则允许我们指定包含CSS应该修改的输出类型。
最常见的媒体类型是屏幕，打印，语音，手持设备，投影和电视。
还有更多，但只有打印和屏幕普遍支持。
例如，以下代码将在用户打印文档时指定字体大小：
@media print {
body {
font-size: 10pt;
}
}
此CSS可以嵌入到普通CSS文档中，但它通常应放在文档的末尾，因为它将例外保持为正常规则。
我们可以在@Media元素内部的希望放置尽可能多CSS代码，但我们只能将CSS代码放在与我们感兴趣的具体情况相关CSS代码。
如何添加限定符
除了指定媒体类型外，@Media规则还有另一个非常强大的技巧。
我们可以将特殊的合格条件应用于媒体。
当浏览器比500像素宽时，我们可以在白色背景上看到黑色文本。
但是让屏幕更窄，你看到有趣的东西。
通常，我们将使用此技巧来更改布局，但从此更简单的颜色更改示例开始。
这是这个更简单的代码示例：
<!doctype html>
<html lang="en">
<head>
<title>narrowBlack.html</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=false;">
<style type = "text/css">
body {
color: black;
background-color: white;
}
@media (max-width: 500px){
body {
color: white;
background-color: black;
}
}
</style>
</head>
<body>
<h1>Qualifier Demo</h1>
<p>
Try resizing this page. When the page is
wider than 500 pixels, it shows black text on a
white background.
</p>
<p>
When the page is narrower than 500 pixels, the colors
reverse, giving white text on a black background.
</p>
</body>
</html>
以下是如何构建适应屏幕宽度的页面：
像往常一样建立你的网站。
这是一个整个"从布局中单独的内容"的地方，真的很偿还。相同HTML将有两种不同的样式。以正常方式应用CSS样式。
以正常方式构建标准样式 - 现在，使用<style>标记嵌入页面中的样式。主要风格应处理最常见的情况。 (通常是全尺寸桌面。)构建@Media规则。
@Media CSS规则应该在普通CSS的末尾进行。设置最大宽度：500px限定符。
此限定符表示如果屏幕的宽度小于500像素，则才会使用此段内的规则。将特殊案例规则放在新的样式集中。
如果限定符为真，则将激活我们在@Media规则内定义的任何CSS规则。使用这些规则覆盖现有CSS。注意我们不必重新定义一切。只需提供在特定上下文中有意义的规则。添加视口。
移动浏览器有时会尝试重新归类页面，因此可以立即看到它。这会击败特殊风格的目的，因此使用视口METATAG表示浏览器应报告其真实宽度。关闭页面缩放通常也很有用，因为不再需要它。
在此示例中，浏览器始终应用Main(白色背景上的黑色文本)样式。
然后看看@Media规则，看看限定符是否为真。
如果宽度小于500像素，则最大宽度：500px限定符被评估为true，并且启用了@Media段内的所有CSS代码。
然后，浏览器存储两组CSS并根据规则的状态应用正确CSS。
