Tính thích ứng

Bài học 10 trên 10 trong khóa học Dự án HTML/CSS: hoạt ảnh nhật thực của Coddy.

Thử thách

Dễ

Viết truy vấn media cho max-width 768px.
Bên trong truy vấn @media,
1. Chọn lớp moon.
2. Đặt chiều rộng và chiều cao thành 160px.

Nếu chưa chắc, hãy xem gợi ý. Giờ đây, khi điều chỉnh kích thước màn hình, mặt trăng sẽ lớn lên hoặc thu nhỏ tương ứng!

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Viết code HTML ở đây -->
        <script src="script.js"></script>
    </body>
</html>

Tất cả bài học trong Dự án HTML/CSS: hoạt ảnh nhật thực

1HTML

Bạn sẽ tạo gì?Thiết lập code Khung chứa Mặt Trăng

2CSS

Phần tử giả của lớp moon

Hoạt ảnh nhật thực

Tính thích ứng Bài học dự án

Tự luyện tập: Playground Web