Sửa riêng cho điện thoại

Trang của bạn phải trông ổn trên màn hình rộng lẫn trên điện thoại. Cách làm là chuyển sang khổ nhỏ hơn trên thanh breakpoint rồi chỉnh — và những gì bạn chỉnh ở đó chỉ áp dụng cho khổ đó và các khổ nhỏ hơn nữa.

Quy tắc lan truyền là phần đáng đọc kỹ. Nó tiết kiệm cho bạn rất nhiều công, và nếu không biết thì nó sẽ làm bạn bối rối.

Bốn khổ, và bề rộng thật của chúng

Khổ	en	Phục vụ bề rộng
Máy tính	Desktop	từ 1440px trở lên — không có giới hạn trên
Máy tính xách tay	Laptop	1025–1439px
Máy tính bảng	Tablet	768–1024px
Điện thoại	Mobile	767px trở xuống

Bốn khổ này phủ kín mọi bề rộng, không chừa khoảng trống và không chồng lấn: mọi màn hình đều rơi vào đúng một khổ. Một màn hình 4K dùng khổ Máy tính — đó là khổ duy nhất không có trần.

Cố ý chỉ có bốn. Trong một trình dựng trực quan, một breakpoint không phải một dòng media query rẻ tiền — nó là một tab bạn phải nhớ ghé qua và thêm một chỗ nữa để một giá trị lẩn vào. Muốn kiểm tra một bề rộng bất kỳ thì kéo mép canvas, khỏi cần tạo thêm khổ để chứa giá trị.

Quy tắc lan truyền

Đọc chậm phần này, vì nó chạy theo cả hai chiều.

Chiều xuống — đây là chiều bạn dựa vào. Đặt một giá trị ở khổ rộng thì nó áp dụng cho mọi khổ hẹp hơn, cho tới khi có khổ nào đó tự đặt giá trị khác. Đặt cỡ chữ tiêu đề ở Máy tính là laptop, tablet và điện thoại đều dùng cỡ đó. Đổi riêng ở Điện thoại thì chỉ điện thoại đổi.

Đó là lý do quy trình đúng là dựng ở Máy tính trước, rồi đi xuống các khổ hẹp hơn để sửa những chỗ vỡ. Bạn không phải đặt lại mọi thứ ở mọi khổ.

Chiều lên — đây là chiều làm người ta bất ngờ. Một giá trị chỉ đặt ở khổ hẹp sẽ được dùng ở các khổ rộng hơn nào chưa có giá trị nào cho khoá đó.

Nghe lạ, nhưng nó tồn tại để bảo vệ bạn: nếu không có nó, một giá trị bạn đặt duy nhất ở Điện thoại sẽ đơn giản là biến mất khi bạn quay lại Máy tính — phần tử trông như chưa từng được chỉnh. Chiều lên chỉ lấp chỗ trống; nó không bao giờ đè lên một giá trị đã có.

Gộp lại, thứ tự ưu tiên cho một thuộc tính, từ cao xuống thấp:

1. giá trị đặt ở chính khổ này
2. giá trị đặt ở khổ rộng hơn, gần nhất trước
3. giá trị gốc của phần tử
4. giá trị đặt ở khổ hẹp hơn, gần nhất trước — chỉ khi ba mục trên đều trống

Ngoại lệ duy nhất: ẩn một phần tử

Ẩn không lan theo chiều nào cả. Nó chỉ áp dụng đúng khổ mà bạn bật nó.

Điều này là cố ý, và cả hai chiều đều có lý do:

• Ẩn một phần tử ở Máy tính thì nó không kéo theo điện thoại. Nếu ẩn lan xuống, mọi thứ bạn giấu trên bản desktop sẽ biến mất luôn khỏi bản mobile.
• Ẩn một phần tử ở Điện thoại thì nó không dội ngược lên desktop. Nếu ẩn dội lên, việc gọn hoá bản mobile sẽ vô tình xoá trắng bản desktop.

Nên "ẩn banner này trên điện thoại" chính xác là ẩn nó trên điện thoại, không hơn. Đây là thao tác responsive bạn sẽ dùng nhiều nhất.

Cách làm việc trong thực tế

1. Dựng cả trang ở Máy tính cho tới khi bạn hài lòng.
2. Sang Máy tính bảng. Sửa những chỗ chật: thường là một hàng cần xuống thành cột, và vài khoảng đệm cần nhỏ lại.
3. Sang Điện thoại. Chỗ này sửa nhiều nhất: cỡ chữ, hướng xếp, và ẩn bớt những thứ chỉ hợp với màn hình rộng.
4. Máy tính xách tay thường không phải đụng tới. Nó nhận toàn bộ từ Máy tính, và đó là điều bình thường.

Kéo mép canvas để nhìn các bề rộng ở giữa. Thanh breakpoint sẽ tự nhảy sang khổ đang thật sự phục vụ bề rộng đó, nên bạn luôn biết mình đang sửa khổ nào.

Khi một thay đổi "không ăn"

Gần như luôn là một trong ba chuyện, theo thứ tự đáng kiểm:

Bạn đang ở nhầm khổ. Nhìn thanh breakpoint. Sửa ở Máy tính trong khi tưởng đang sửa Điện thoại là lỗi phổ biến nhất, và nó lại còn có vẻ hoạt động — vì thay đổi đó lan xuống, nên điện thoại cũng đổi theo, cho tới lúc bạn phát hiện desktop cũng đổi.

Bạn đang chọn nhầm phần tử. Trong một cây lồng nhau, cú bấm rất dễ trúng phần tử con. Mở Lớp và bấm thẳng vào nhánh bạn muốn, hoặc bấm ⌘ ↑ để đi ra phần tử cha.

Thứ bạn đang chỉnh không nằm trên phần tử đó. Khoảng cách giữa hai thứ thuộc về khung chứa chúng, không thuộc về từng thứ. Nếu chỉnh khoảng đệm của một phần tử mà không thấy gì đổi, nhiều khả năng bạn cần chỉnh khoảng cách của khung bao ngoài.