动物救救! 问题陈述 四种可爱的动物正处在危险之中,只有借助我们对媒体查询,绝对定位和快速响应的设计技术的了解,我们才能拯救它们。 目标 练习编写媒体查询 练习使用绝对定位 实践测试响应式设计 介绍 在本实验中,我们将创建媒体查询以将动物放在浏览器窗口中。 媒体查询是CSS规则,有条件地将样式应用于不同的屏幕尺寸。 与CSS定位值一起使用时,我们可以设置页面样式,以在各种设备上提供一致的体验-在这种情况下,请确保无论浏览器窗口的大小如何,我们的动物都不会遇到麻烦。 指示 在浏览器中打开index.html,以浏览到不同的动物页面,以查看可以救援的页面。 单击任何单个动物,看看它们面临的危险。 当您查看特定的动物页面时,单击并拖动浏览器的角并调整窗口大小,您将看到动物遇到麻烦的地方。 充分利用媒体查询的优势,其中最大宽度用于桌面关闭,最小宽度用于移动起来设计。 还可以利用定位:绝对值以及诸