Media queries và Responsive design
Với xu hướng thiết kế web hiện đại, responsive design đã trở nên phổ biến. Và nhiều css framework ra đời giúp việc thiết kế trở nên nhanh chóng hơn bao giờ hết.
Vậy nếu bạn muốn tự tay thiết kế 1 trang web có khả năng responsive thì sao? Câu trả lời đó là media queries. Trong bài viết này mình sẽ giới thiệu một cách cơ bản về media queries.
Media Queries
Hiểu 1 cách đơn giản: media queries là cách thức style cho html element dựa trên kích thước/hướng màn hình và "tùm lum thứ khác". Tức là ở mỗi kích thước màn hình bạn có thể cho 1 phần tử có những css khác nhau. Muốn hiểu 1 cách "khoa học" thì 2 liên kết dưới đây sẽ có ích cho bạn:
Syntax
Trong ví dụ dưới đây, khi bạn thu nhỏ màn hình xuống < 768px thì thẻ .mobile sẽ xuất hiện.
Demo
Một trong những ví dụ điển hình chính là menu. Ở màn hình desktop sẽ có dạng hàng ngang, ở các thiết bị màn hình nhỏ thì menu sẽ nằm dọc và trải hết chiều rộng của màn hình. Sau đây mình sẽ demo về ví dụ này.
HTML
CSS
Ở đây đơn giản là khi ở desktop size, cho các list-item float left để hiển thị dạng 1 dòng. Khi chuyển sang màn hình có kích thước < 768px thì bỏ float để hiển thị dạng block.
Nếu muốn dạng menu có thể thu gọn khi ở màn hình nhỏ, ta có thể áp dụng 1 chút jquery vào đó. Việc đó cũng đơn giản thôi, nhưng không phải vào lúc này :v
.png)
Comments
Post a Comment