[Series Responsive Web Design] Phần 2: Media Query & Triết lý "Mobile First" - Vũ khí tối thượng của Front-end

Chào anh em đồng dâm Front-end (và cả Backend thích tọc mạch)! Ở phần 1 chúng ta đã biết Responsive là chân ái, nhưng làm sao để code cho web "hiểu" được lúc nào thì thu nhỏ, lúc nào thì phình to?

Hôm nay mình sẽ giới thiệu cho anh em hai "bảo bối" quyền lực nhất: Media Query và nguyên tắc Mobile First.

1. Media Query – Đôi mắt thần của CSS3

Nói ngắn gọn, Media Query là một module cực xịn được thêm vào từ CSS3 (nâng cấp từ Media Type của CSS2). Nó giúp nhận biết thiết bị truy cập thông qua các thuộc tính của thiết bị đó, từ đó áp dụng các quy luật CSS tương ứng để giao diện không bị vỡ. Hiện tại thì các trình duyệt hiện đại như Webkit, Firefox, Opera hay IE (từ bản 9) đều hỗ trợ tận răng rồi.

Cú pháp thần thánh của nó trông như thế này

@media not only media type and (media feature) {
    CSS-Code;
}

Trong đó anh em cần nhớ:

Media Type: Dùng all (cho mọi thiết bị) , print (cho máy in) , hoặc screen (cho máy tính và smartphone). Media Feature: Thường dùng nhất là max-width (chiều rộng tối đa) và min-width (chiều rộng tối thiểu) của viewport.

Các "điểm ngắt" (Breakpoint) giắt lưng để chia tỷ lệ màn hình:

Dưới 576px: Điện thoại di động để dọc.

Từ 576px đến dưới 768px: Điện thoại di động để ngang.

Từ 768px đến dưới 992px: Máy tính bảng (Tablet).

Từ 992px đến dưới 1200px: Máy tính để bàn (Desktop).

Từ 1200px trở lên: Màn hình máy tính cực lớn.

2. Lựa chọn phe nào: Mobile First hay Desktop First?

Khi code responsive, anh em sẽ phải chọn 1 trong 2 trường phái này:

Desktop First: Thiết kế cho màn hình to trước, sau đó dùng max-width để bóp nhỏ dần giao diện cho màn hình bé. Giao diện sẽ thay đổi khi độ rộng màn hình nhỏ hơn hoặc bằng breakpoint Mobile First: Thiết kế ứng dụng cho màn hình mobile trước, sau đó dùng min-width để mở rộng dần lên các màn hình lớn. Giao diện sẽ thay đổi khi độ rộng lớn hơn hoặc bằng breakpoint. Khái niệm này được ông Luke Wroblewski khởi xướng từ tít năm 2009 cơ.

3. Tại sao "Mobile First" lại trở thành chân lý?

Ngày xưa anh em thích Desktop First, nhưng giờ ra đường ai cũng dán mắt vào điện thoại. Đây là lý do bạn phải theo hệ Mobile First:

Traffic là vua: Phân tích từ Google Analytics cho thấy lượng người dùng truy cập bằng Mobile chiếm tới 77.4%, trong khi Desktop chỉ lẹt đẹt 17.9%. Ưu tiên số đông là chuẩn bài rồi

Ép bạn phải thiết kế "tinh hoa": Trên màn hình máy tính rộng lớn, bạn thích nhét sidebar hay slider vào cũng được. Nhưng với Mobile First, ngay từ đầu bạn chỉ có vỏn vẹn khoảng 320px chiều rộng. Điều này ép bạn phải tối ưu hóa nội dung, chỉ giữ lại những thành phần quan trọng nhất

Tránh bug ngập mặt: Số lượng thiết bị di động hiện nay đa dạng vô cùng, code theo Mobile First giúp hạn chế lỗi hiển thị cực tốt. Việc quan sát layout và thực hiện code ban đầu cũng nhẹ nhàng hơn vì khung mobile thường không quá phức tạp

Được Google "độ" và Framework "chống lưng": Google đánh giá cực cao các trang web "mobile friendly" trong việc xếp hạng SEO. Hơn nữa, các thư viện Front-end quốc dân như Bootstrap cũng được xây dựng dựa trên nguyên tắc Mobile First