如何在AJAX中为HTML5和CSS3编程制作响应移动站点 - 傻瓜

视频: 《从零玩转HTML5前端+跨平台开发》课时15 HTML XHTML HTML5区别了解（编程开发前端开发） 2024

HTML5和CSS3网页开发人员可以使用AJAX创建一个响应式移动网站。在多种分辨率下使网站正常工作的一种方法是根据检测到的媒体类型提供不同的CSS规则。

CSS3有一个奇妙的新功能，称为媒体查询，允许您指定媒体类型并确定显示的各种功能。您可以使用此规范来构建浏览器检测到某种类型或大小的显示时应使用的CSS的子集。

<！ --1 - >

指定媒体类型

@media规则允许您指定包含的CSS应修改的输出类型。最常见的媒体类型是屏幕，打印，语音，手持，投影和电视。有更多，但只有打印和屏幕是普遍支持。

例如，下面的代码将指定用户打印文档时的字体大小：

@media print {body {font-size：10pt;}}

这个CSS可以嵌入普通的CSS文档，但通常应该放在文档的末尾，因为它包含了正常规则的例外情况。您可以在@media元素中放置尽可能多的CSS代码，但是您应该只放入与您感兴趣的特定情况相关的CSS代码。

如何添加限定符

除了指定媒体类型，@media规则还有另外一个非常强大的技巧。您可以向媒体申请特殊的资格条件。

当浏览器宽于500像素时，可以在白色背景上看到黑色文字。但是缩小屏幕，你会看到一些有趣的东西。

通常你会用这个技巧来改变布局，但是从这个更简单的颜色改变的例子开始。下面是这个简单例子的代码：

narrowBlack。 html body {color：black; background @ color：white;} @media（max-width：500px）{body {color：white;背景颜色：黑色;}}

限定符演示
尝试调整此页面的大小。当页面宽于500像素时，会在白色背景上显示黑色文字。
当页面的宽度小于500像素时，颜色反转，在黑色背景上显示白色文字。

以下是如何构建适应屏幕宽度的页面：

照常构建您的网站。

这是整个“从布局中分离出来的内容”的地方。相同的HTML将有两种不同的风格。
以正常方式应用CSS样式。

以正常方式构建标准样式 - 现在，将样式嵌入页面中，并带有标签。你的主要风格应该处理最常见的情况。（通常是全尺寸桌面。）
构建@media规则。 @media CSS规则应该放在普通CSS的末尾。

设置最大宽度：500像素限定符。
该限定符表示只有在屏幕宽度小于500像素的情况下，才会使用此段内的规则。

在新样式集中放置特殊情况规则。
如果限定符为true，则在@media规则中定义的任何CSS规则都将被激活。使用这些规则来覆盖现有的CSS。请注意，您不必重新定义所有内容。只要提供在您的特定环境中有意义的规则。

添加一个视口。
移动浏览器有时会尝试重新调整页面的大小，以便全部可以立即看到。这违背了特殊风格的目的，因此使用视口元标记来指示浏览器应报告其真实宽度。关闭页面缩放也是非常有用的，因为它不再是必要的。

在这个例子中，浏览器总是应用主（白色背景上的黑色文本）样式。然后，它看@media规则来查看该限定符是否为真。