响应式设计

Coddy 日食动画 | HTML/CSS 项目课程的第 10 课，共 10 课。

挑战

简单

为 max-width 768px 编写媒体查询。
在 @media 查询中，
1. 选择 moon 类。
2. 将宽度和高度设为 160px。

如果不确定，可以参考提示。现在，调整屏幕大小时，月亮会相应地变大或变小！

亲手试试

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- 在这里编写 HTML 代码 -->
        <script src="script.js"></script>
    </body>
</html>

日食动画 | HTML/CSS 项目中的所有课

1HTML

2CSS

响应式设计

自己练习： Web 在线编辑器