Trang chủ
CSS
Truy vấn phương tiện CSS
Dùng thử: Ví dụ đơn giản về sử dụng truy vấn phương tiện
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,init-scale=1.0"> <style> .wrapper {overflow: auto;} #main {margin- left: 4px;} #leftsidebar { float: none; chiều rộng: tự động; } #menulist { lề: 0; phần đệm: 0; } .menuitem { nền: #CDF0F6; đường viền: 1px liền khối #d4d4d4; bán kính đường viền: 4px; kiểu danh sách: không có; lề: 4px; phần đệm: 2px; } @media screen và (min-width: 480px) { #leftsidebar {width: 200px; float: left;} #main {margin-left: 216px;} } </style> </head> <body> <div class="wrapper"> <div id="leftsidebar"> <ul id="menulist" > <li class="menuitem">Thực đơn 1</li> <li class="menuitem">Thực đơn 2</li> <li class="menuitem">Thực đơn 3</li> < li class="menuitem">Thực đơn mục 4</li> <li class="menuitem">Thực đơn mục 5</li> </ul> </div> <div id="main"> <h1> Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng!</h1> <p>Ví dụ này hiển thị một menu sẽ nổi ở bên trái trang nếu khung nhìn rộng 480 pixel hoặc rộng hơn. Nếu khung nhìn nhỏ hơn 480 pixel, menu sẽ ở trên cùng của nội dung.</p> </div> </div> </body> </html>