Ngày nay, trong lĩnh vực lập trình web, chúng ta nhanh chóng nhận ra rằng không thể theo kịp với sự phát triển chóng mặt của các thiết bị điện tử (smartphone, tablet,..) mới với những độ phân giải màn hình khác nhau. Chính vì vậy thay vì thiết kế từng phiên bản phù hợp cho từng thiết bị thì giải pháp tối ưu là sử dụng responsive design – giúp trang web của chúng ta có thể phù hợp với tất cả các thiết bị.
Responsive Web Design (RWD) là xu hướng mới theo đó quy trình thiết kế và phát triển web sẽ đáp ứng mọi thiết bị và môi trường của người dùng theo các tiêu chí kích thước và chiều của màn hình thiết bị. Responsive Web Design được tạo nên từ 3 thành phần cơ bản:
- Flexible Grid based layout
- Media Queries
- Flexible Media
Để viết responsive ta dùng code đơn giản như sau:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Giải thích:
@media only screen and (max-width: 600px) Khi chiều rộng tối đa 600px thì sẽ áp dụng đoạn css nằm trong nó.
1. Bố cục linh hoạt
Phần nào bao gồm cách thức xây dựng bố cục đơn giản nhưng linh hoạt, có thể resize chiều dài (width) tới bất kỳ khung hình nào. Các lưới linh hoạt này được xây dựng trên các đơn vị tính, hầu hết nên sử dụng phần trăm (%), chẳng hạn cột có độ rộng là 25%, và đơn vị em (để tạo ra khoảng cách giữa các cột). Các đơn vị này thường được sử dụng để khai báo các thuộc tính của lưới (grid) như chiều rộng, lề hai bên, và lề bên trong.
Ngược lại với cách viết CSS cũ, cách viết này yêu cầu bạn nên sử dụng các con số linh hoạt, TRÁNH sử dụng các đơn vị truyền thống như pixel hay inch. Bởi vì sự thay đổi của khung màn hình liên tục dẫn tới sự thích nghi của bố cục web cần thay đổi theo tỷ lệ.
Chẳng hạn, với bố cục 1 cột bên, ta có các đối tượng sau:
.wrapper {
display: flex;
flex-wrap: wrap; /* To make it responsive when needed */
}
.sidebar {
width: 25%;
}
.content {
width: 75%;
}
Để tạo ra khoảng cách giữa các đối tượng, bạn nên sử dụng padding.
.sidebar {
width: 25%;
padding: 0 1em;
}
.content {
width: 75%;
padding: 0 1em;
}
Để bù lại khoảng cách này, đối tượng cha của cả hai đối tượng con nên sử dụng margin âm:
.wrapper {
display: flex;
flex-wrap: wrap;
margin: 0 -1em;
}
Để tạo các bố cục với độ rộng khác nhau, chẳng hạn như giới hạn tối đa của bố cục, ta thường sử dụng .container bên trong:
.container {
width: 100%;
max-width: 70em;
margin: 0 auto; /* Center alignment */
padding: 0 1em;
}
2. Media Queries
Media Queries được xây dựng như một cách mở rộng các đối tượng. Nó giúp chúng ta đặt các kiểu style khác nhau cho đối tượng trên các trình duyệt và tỷ lệ khung hình khác nhau.
Cách thức sử dụng Media Queries
Có một vài cách bạn có thể sử dụng Media Queries.
- Sử dụng trực tiếp cú pháp @media ở trong fle style sẵn có.
- Tạo 1 file chứa Media Queries riêng và @import nó vào CSS.
- Gắn riêng mỗi file style trên các khung hình khác nhau vào qua HTML.
Chẳng hạn, bạn có thể gắn như thế này trong thẻ <head> của website để áp dụng file style cho khung hình cụ thể nào đó:
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">
Hoặc trong file CSS style của website, bạn thêm các Media Queries:
/* @media Rule */
.hero { width: 50%; }
@media all and (max-width: 1024px) {
.hero { width: 100%; }
}
/* @import Rule */
@import url(styles.css) all and (max-width: 1024px) {...}
Trong file SCSS, bạn có thể nhập lồng vào trong khung như thế này:
$tablet-breakpoint: 1024px;
.hero {
width: 100%;
@media (max-width: $tablet-breakpoint) {
width: 50%;
}
}
3. Các logic điều kiện trong Media Queries
Việc sử dụng hợp lý các điều kiện trong Media Queries giúp truy vấn vào các khung màn hình khác nhau hoạt động trơn tru.
3.1. Mobile Responsive
Mobile Responsive là các điều kiện ưu tiên cho đối tượng được đặt cho khung từ 0 đến 320px (hoặc 480px, tuỳ theo từng project), và được ghi đè ở các khung lớn hơn.
// SCSS
$mobile-breakpoint: 320px;
$tablet-breakpoint: 1024px;
.menu-item {
// Mobile value
width: 100%;
@media (min-width: $mobile-breakpoint) {
width: 50%;
}
@media (min-width: $tablet-breakpoint) {
width: 33.33%;
}
}
3.2. Đa khung hình phức tạp
Trong một số trường hợp, các thuộc tính chỉ tồn tại ở một khoảng độ rộng màn hình nào đó, ví dụ từ 800px đến 1024px, thì ta có thể dùng điều kiện and:
@media all and (min-width: 800px) and (max-width: 1024px) {...}
Ngược lại, nếu ở một khung hình nào đó ta không có giá trị cần nêu ra và chỉ áp dụng trong các khung hình còn lại, ta sẽ sử dụng not:
@media not screen and (color) {...}
Sử dụng “only” sẽ không hỗ trợ trên các trình duyệt sử dụng HTML4, bởi vậy code ví dụ như dưới đây sẽ không được kích hoạt nếu không phải màn hình xoay dọc.
Media Queries không thể hoạt động với IE8 và các phiên bản thấp hơn. Một số thư viện hỗ trợ sẽ cung cấp cách xử lý bằng Javascript bao gồm Respond.js và CSS3-MediaQueries.js.
Chúc các bạn thành công!
Và phần khai báo viewport mình đã có 1 bài chi tiết về vấn đề này: Xem tại đây