Media Queries: Thiết kế website responsive hiệu quả

Với cách làm này, bạn không cần tạo nhiều website cho điện thoại, máy tính bảng và máy tính. Bạn chỉ cần xây dựng một cấu trúc HTML, rồi dùng CSS để điều chỉnh giao diện theo kích thước viewport, loại thiết bị hiển thị hoặc hướng xoay màn hình.

Media Queries hoạt động như thế nào?

Media Queries là một khối điều kiện trong CSS. Khi điều kiện đúng, các khai báo CSS bên trong sẽ được áp dụng và có thể ghi đè lên kiểu CSS mặc định đã viết ở phía trên.

Ví dụ, bạn có một khối .box mặc định nền xanh, rộng 300px và cao 300px. Khi chiều rộng màn hình nhỏ hơn hoặc bằng 600px, bạn có thể đổi nền sang đỏ và thu kích thước khối xuống 200px.

.box {
background: blue;
width: 300px;
height: 300px;
}
@media (max-width: 600px) {
.box {
background: red;
width: 200px;
height: 200px;
}
}

Ở ví dụ này, khi viewport lớn hơn 600px, khối vẫn giữ nền xanh với kích thước 300px. Khi viewport bằng hoặc nhỏ hơn 600px, các thuộc tính bên trong @media sẽ ghi đè, khiến khối chuyển sang đỏ và thu về 200px.

Ba cách dùng điều kiện chiều rộng quan trọng

Khi thiết kế website responsive, bạn sẽ dùng max-width, min-width và các điều kiện kết hợp nhiều nhất. Điểm cần nhớ là các giá trị này đều tính theo chiều rộng của viewport, tức vùng hiển thị của trình duyệt.

1. Dùng max-width cho màn hình nhỏ hơn một ngưỡng

max-width nghĩa là chiều rộng tối đa. Nếu bạn đặt max-width: 600px, CSS trong khối sẽ chạy khi màn hình rộng 600px hoặc nhỏ hơn.

@media (max-width: 600px) {
.box {
background: red;
}
}

Điều kiện này rất phù hợp để tinh chỉnh giao diện điện thoại. Chẳng hạn, bạn có thể giảm kích thước chữ, đổi bố cục nhiều cột thành một cột, thu khoảng cách hoặc ẩn bớt thành phần không cần thiết.

2. Dùng min-width cho màn hình từ một ngưỡng trở lên

min-width nghĩa là chiều rộng tối thiểu. Nếu đặt min-width: 1000px, CSS bên trong chỉ chạy từ 1000px trở lên.

@media (min-width: 1000px) {
.box {
width: 500px;
height: 500px;
}
}

Ở chiều rộng 999px, điều kiện chưa đúng nên giao diện vẫn dùng CSS mặc định. Chỉ cần tăng thêm 1px để đạt 1000px, CSS trong Media Query sẽ có hiệu lực và ghi đè các thuộc tính liên quan.

3. Kết hợp nhiều điều kiện để tạo khoảng giao diện

Bạn có thể kết hợp min-width và max-width bằng từ khóa and để chỉ áp dụng CSS trong một khoảng chiều rộng cụ thể.

@media (min-width: 600px) and (max-width: 1000px) {
.box {
background: red;
}
}

Khối CSS này chỉ hoạt động trong khoảng từ 600px đến 1000px. Đây là cách hữu ích khi bạn muốn giao diện máy tính bảng khác với điện thoại và máy tính để bàn.

Cần phân biệt điều kiện dùng dấu phẩy với điều kiện dùng and. Dấu phẩy biểu thị quan hệ hoặc, nghĩa là chỉ cần một trong các điều kiện đúng thì CSS được áp dụng.

@media (max-width: 600px), (min-width: 1000px) {
.box {
background: red;
}
}

Trong trường hợp này, khối CSS chạy ở vùng từ 0 đến 600px và từ 1000px trở lên. Khoảng giữa 601px đến 999px sẽ quay về CSS mặc định.

Phân biệt screen, print và trường hợp không khai báo loại media

Media Query có thể xác định loại phương tiện hiển thị. Hai loại thường gặp là screen và print.

Loại media	Ý nghĩa	Ứng dụng phù hợp
screen	Áp dụng cho thiết bị có màn hình	Điện thoại, máy tính bảng, laptop, màn hình máy tính
print	Áp dụng khi in trang	Điều chỉnh bố cục, màu sắc và nội dung khi nhấn Ctrl + P
Không khai báo	Được hiểu là áp dụng cho mọi loại media	Các điều kiện responsive thông thường

Ví dụ sau chỉ áp dụng cho màn hình có chiều rộng tối đa 600px:

@media screen and (max-width: 600px) {
.box {
background: red;
}
}

Nếu không cần giới hạn loại thiết bị, bạn có thể bỏ screen và chỉ giữ điều kiện chiều rộng. Cách viết này thường đủ cho phần lớn tình huống thiết kế responsive.

Với print, bạn có thể thay đổi giao diện khi người dùng mở cửa sổ in trang. Ví dụ dưới đây đổi màu nền của khối khi in:

@media print {
.box {
background: yellow;
}
}

Lưu ý rằng trình duyệt thường mặc định ẩn màu nền khi in để tiết kiệm mực. Nếu cần in nền, bạn phải bật tùy chọn in đồ họa nền trong phần cài đặt in của trình duyệt.

Điều chỉnh giao diện khi xoay màn hình

Ngoài chiều rộng, Media Queries còn có thể kiểm tra hướng hiển thị bằng thuộc tính orientation. Hai giá trị thường dùng là portrait cho màn hình dọc và landscape cho màn hình ngang.

@media (orientation: landscape) {
.box {
background: red;
}
}

Điều kiện trên được áp dụng khi chiều rộng màn hình lớn hơn chiều cao. Vì vậy, không chỉ điện thoại xoay ngang mà cả cửa sổ trình duyệt có tỷ lệ ngang rộng cũng có thể kích hoạt kiểu CSS này.

Chọn breakpoint để xây dựng website responsive

Breakpoint là điểm ngắt, tức ngưỡng chiều rộng khiến giao diện chuyển sang một bộ CSS khác. Bạn có thể tự đặt breakpoint theo nhu cầu bố cục, hoặc tham khảo hệ thống kích thước có sẵn từ Bootstrap.

Nhóm kích thước	Ngưỡng chiều rộng
Extra small	Nhỏ hơn 576px
Small	Từ 576px trở lên
Medium	Từ 768px trở lên
Large	Từ 992px trở lên
Extra large	Từ 1200px trở lên
Extra extra large	Từ 1400px trở lên

Các mốc này là điểm tham khảo để bạn tổ chức CSS nhất quán. Khi triển khai thực tế, điều quan trọng hơn là bố cục có bắt đầu chật, vỡ hàng hoặc khó thao tác hay không. Đó mới là lúc bạn nên thêm breakpoint.

Bài tập chia giao diện theo bốn khoảng màn hình

Một cách hiệu quả để hiểu Media Queries là tạo một khối có màu nền thay đổi theo chiều rộng màn hình. Bài tập này chia giao diện thành bốn khoảng rõ ràng: điện thoại nhỏ, điện thoại hoặc máy tính bảng, laptop và màn hình lớn.

@media (min-width: 319px) and (max-width: 480px) {
.box {
background: yellow;
}
}
@media (min-width: 481px) and (max-width: 1200px) {
.box {
background: chocolate;
}
}
@media (min-width: 1201px) and (max-width: 1600px) {
.box {
background: green;
}
}
@media (min-width: 1601px) {
.box {
background: purple;
}
}

Kết quả mong muốn là màu vàng trong vùng 319px đến 480px, màu chocolate từ 481px đến 1200px, màu xanh lá từ 1201px đến 1600px và màu tím từ 1601px trở lên. Nếu màn hình nhỏ hơn 319px, phần tử sẽ sử dụng kiểu mặc định vì chưa có điều kiện nào khớp.

Những lỗi thường gặp khi dùng Media Queries

• Nhầm max-width với min-width: max-width áp dụng từ ngưỡng trở xuống, còn min-width áp dụng từ ngưỡng trở lên.
• Bỏ quên CSS mặc định: Media Query là CSS có điều kiện. Bạn vẫn cần một kiểu cơ bản để giao diện hiển thị đúng khi không điều kiện nào được đáp ứng.
• Tạo các khoảng bị chồng chéo: Nếu nhiều điều kiện cùng đúng và cùng sửa một thuộc tính, CSS viết sau sẽ có thể ghi đè CSS viết trước.
• Để khoảng trống không chủ đích: Hãy kiểm tra kỹ các ngưỡng như 480px, 481px, 1200px và 1201px để giao diện không rơi vào vùng không có kiểu phù hợp.
• Chỉ kéo cửa sổ để kiểm tra: Công cụ responsive trong phần kiểm tra của trình duyệt giúp bạn nhập chính xác chiều rộng và quan sát đúng thời điểm breakpoint thay đổi.
• Lạm dụng breakpoint: Không phải thay đổi nhỏ nào cũng cần một Media Query mới. Hãy ưu tiên bố cục linh hoạt trước, rồi thêm điểm ngắt khi nội dung thực sự cần đổi cách hiển thị.

FAQ

Media Queries có làm thay đổi HTML không?

Không. Media Queries chỉ thay đổi cách CSS được áp dụng khi điều kiện phù hợp. Cấu trúc HTML của bạn vẫn giữ nguyên.

max-width 600px có áp dụng tại đúng 600px không?

Có. max-width: 600px bao gồm cả chiều rộng 600px và mọi giá trị nhỏ hơn. Khi lên 601px, điều kiện này không còn đúng.

Có cần dùng screen trong mọi Media Query không?

Không cần. Khi không khai báo loại media, điều kiện được hiểu là áp dụng rộng rãi. Bạn chỉ nên dùng screen hoặc print khi cần phân biệt rõ môi trường hiển thị.

orientation landscape có chỉ dành cho điện thoại không?

Không. Điều kiện này đúng khi chiều rộng lớn hơn chiều cao, vì vậy cửa sổ trình duyệt ngang cũng có thể kích hoạt. Bạn nên kiểm tra cả tỷ lệ khung hình thực tế trước khi dùng điều kiện này.

Nếu website của bạn cần hiển thị nhất quán trên điện thoại, máy tính bảng và máy tính, dịch vụ thiết kế website chuẩn responsive của MintStack có thể giúp bạn xây dựng giao diện linh hoạt ngay từ nền tảng.