【文件属性】：
文件名称：动物保存实验室ONL01-SENG-FT-090820
文件大小：620KB
文件格式：ZIP
更新时间：2021-02-14 18:57:01
Ruby
动物救救！
问题陈述
四种可爱的动物正处在危险之中，只有借助我们对媒体查询，绝对定位和快速响应的设计技术的了解，我们才能拯救它们。
目标
练习编写媒体查询
练习使用绝对定位
实践测试响应式设计
介绍
在本实验中，我们将创建媒体查询以将动物放在浏览器窗口中。 媒体查询是CSS规则，有条件地将样式应用于不同的屏幕尺寸。 与CSS定位值一起使用时，我们可以设置页面样式，以在设备之间提供一致的体验-在这种情况下，请确保无论浏览器窗口的大小如何，我们的动物都不会遇到麻烦。
指示
在浏览器中打开index.html，以浏览到不同的动物页面，以查看可以救援的页面。 单击任何单个动物，看看它们面临的危险。 当您查看特定的动物页面时，单击并拖动浏览器的角并调整窗口大小，您将看到动物遇到麻烦的地方。
充分利用媒体查询的优势，其中最大宽度用于桌面关闭，最小宽度用于移动起来设计。 还可以使用定位：绝对值以及诸如
【文件预览】：
animal-save-lab-onl01-seng-ft-090820-master
----css()
--------monkey.css(172B)
--------bear.css(160B)
--------ostrich.css(161B)
--------dolphin.css(341B)
----bear.html(249B)
----images()
--------dolphin.png(10KB)
--------water-park.jpg(129KB)
--------water-ring.png(66KB)
--------croc.jpg(132KB)
--------spice-girls.jpg(56KB)
--------cliff.jpg(185KB)
--------ostrich.png(15KB)
--------bear.png(21KB)
--------monkey.png(13KB)
----monkey.html(258B)
----index.html(526B)
----CONTRIBUTING.md(2KB)
----ostrich.html(261B)
----Gemfile(84B)
----Gemfile.lock(858B)
----.rspec(41B)
----spec()
--------animal_spec.rb(337B)
--------spec_helper.rb(4KB)
----dolphin.html(287B)
----LICENSE.md(1KB)
----.gitignore(443B)
----.learn(122B)
----README.md(3KB)