如何在AJAX中为HTML5和CSS3编程制作响应式移动
HTML5和CSS3 Web开发人员可以使用AJAX来创建响应迅速的移动。
使在多种分辨率下都能正常工作的一种方法是根据检测到的媒体类型提供不同的CSS规则。
CSS3有一个很棒的新功能，称为媒体查询，它允许您指定媒体类型并确定显示的各种功能。
您可以使用此规范来构建CSS的子集，当浏览器检测到某种类型或者大小的显示时应使用该CSS。
指定媒体类型
@media规则允许您指定所包含的CSS应该修改的输出类型。
最常见的媒体类型是屏幕，印刷，语音，手持，投影和电视。
还有更多，但仅普遍支持打印和屏幕。
例如，以下代码将在用户打印文档时指定字体大小：
@media print {
body {
font-size: 10pt;
}
}
该CSS可以嵌入到普通CSS文档中，但是通常应将其放在文档的末尾，因为它包含普通规则的例外。
您可以在@media元素中放置任意数量的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的末尾。
- 设置max-width：500px限定符。
此限定符表示仅在屏幕宽度小于500像素时才使用此段内的规则。
- 将特殊情况规则放在新样式集中。
如果限定符为true，则将激活您在@media规则内定义的所有CSS规则。
使用这些规则来覆盖现有的CSS。
请注意，您不必重新定义所有内容。
仅提供在您的特定情况下有意义的规则。
- 添加视口。
移动浏览器有时会尝试重新缩放页面，以便可以一次看到所有页面。
这违反了特殊样式的目的，因此请使用视口元标记来指示浏览器应报告其真实宽度。
关闭页面缩放比例通常也很有用，因为它不再需要。
在此示例中，浏览器始终应用主要样式(白色背景上的黑色文本)。
然后，它查看@media规则以查看限定符是否为true。
如果宽度小于500像素，则将max-width：500px限定符评估为true，并启用@media段内的所有CSS代码。
然后，浏览器将存储两组CSS，并根据规则的状态应用正确的CSS。
