Xác định các điểm ngắt cho một thiết kế đáp ứng

Tác Giả: John Stephens

Ngày Sáng TạO: 23 Tháng MộT 2021

CậP NhậT Ngày Tháng: 19 Có Thể 2024

Băng Hình: Электрический или водяной полотенцесушитель? Что выбрать? Установка. #25

NộI Dung

01. Theo nội dung
02. Tăng cường cho màn hình lớn hơn
03. Sử dụng ems cho các truy vấn phương tiện linh hoạt hơn
Thích cái này? Đọc những thứ này!

Kiến thức cần thiết: CSS trung cấp và sự quen thuộc với thiết kế đáp ứng
Đòi hỏi: Trình soạn thảo văn bản và trình duyệt
Thời gian dự án: 30 phút
Tệp hỗ trợ

Đây là một đoạn trích đã được chỉnh sửa từ Chương 3 của Triển khai thiết kế đáp ứng, được xuất bản bởi Peachpit Press, đã được bán vào tuần trước.

Phương pháp thông thường để xác định điểm ngắt là sử dụng một số độ rộng khá chuẩn: 320px (nơi iPhone và một số thiết bị di động khác tiếp đất trên quang phổ), 768px (iPad) và 1024px. Tuy nhiên, có một vấn đề khi dựa vào các điểm ngắt "mặc định" này.

Khi bạn bắt đầu xác định các điểm ngắt hoàn toàn theo độ phân giải của các thiết bị thông thường, bạn có nguy cơ phát triển đặc biệt cho các chiều rộng đó và bỏ qua phần giữa (trường hợp điển hình là xoay iPhone sang ngang và bạn vừa giới thiệu chiều rộng 480px) . Đây cũng không phải là một cách tiếp cận đặc biệt thân thiện với tương lai. Những gì phổ biến hôm nay có thể không phổ biến vào ngày mai. Khi thiết bị nóng tiếp theo xuất hiện, bạn sẽ buộc phải thêm một điểm ngắt khác chỉ để theo kịp. Đó là một trận thua.

01. Theo nội dung

Một cách tiếp cận tốt hơn là để nội dung quy định vị trí các điểm ngắt của bạn xảy ra và bạn cần bao nhiêu điểm ngắt trong số đó. Bắt đầu thay đổi kích thước cửa sổ trình duyệt của bạn và xem có chỗ nào cần cải thiện.

Bằng cách cho phép nội dung hướng dẫn bạn, bạn đang tách bố cục của mình ra khỏi một độ phân giải cụ thể. Bạn đang để dòng chảy của trang quyết định khi nào bố cục cần điều chỉnh — một bước đi khôn ngoan và thân thiện với tương lai.

Để xác định các điểm ngắt của mình, bạn có thể giảm cửa sổ trình duyệt của mình xuống khoảng 300px (giả sử trình duyệt của bạn cho phép bạn tiến xa đến mức đó) và sau đó từ từ tăng kích thước của cửa sổ cho đến khi mọi thứ bắt đầu giống như cần chỉnh sửa.

Khoảng 600px, các hình ảnh trong phần “Nhiều hơn trong bóng đá” bắt đầu hơi khó chịu. Giới thiệu một truy vấn phương tiện ở đây để làm trôi những câu chuyện đó sang một bên, như chúng đã có trong Chương 2, “Bố cục linh hoạt”, có lẽ rất hợp lý:

@media all và (min-width: 600px) {
.slats li {
float: trái;
margin-right: 2,5316456%; / * 24px / 948px * /
chiều rộng: 31,6455696%; / * 300/948 * /
}
.slats li: last-child {
margin-right: 0;
}
}

Khoảng 860px, tất cả nội dung sang một bên bắt đầu bị giãn cách. Cửa sổ vẫn còn quá hẹp để đặt phần bên phải sang một bên, vì vậy, thay vào đó, hãy thả nổi các phần sang một bên để chúng xếp thành hai hàng:

@media all và (min-width: 860px) {
qua một bên{
hiển thị: khối;
margin-bottom: 1em;
đệm lót: 0 1%;
chiều rộng: tự động;
}
phần sang một bên {
float: trái;
margin-right: 2%;
chiều rộng: 48%;
}
.article-tags {
rõ ràng: cả hai;
}
.ad {
text-align: center;
đệm-đầu: 2,5em;
}
}

Tại điểm ngắt này, có vẻ như các mục điều hướng có thể được thả nổi một lần nữa, thay vì được xếp chồng lên nhau (xem bên dưới). Những kiểu này nằm trong CSS đã nhận xét, vì vậy chúng tôi sẽ lấy chúng và đặt chúng trong truy vấn phương tiện. Chúng tôi cũng sẽ xóa đường viền trên các mục điều hướng:

@media all và (min-width: 860px) {
...
nav [role = "navigation"] li {
float: trái;
border-top: 0;
}
nav [role = "navigation"] a {
float: trái;
}
footer [role = "contentinfo"] .top {
float: phải;
}
}

Cuối cùng, có vẻ như một bên có thể được đưa lên trở lại và bên phải khoảng 940px. Các phần ở một bên cũng sẽ cần được yêu cầu không nổi và chiếm toàn bộ chiều rộng một lần nữa:

@media all và (min-width: 940px) {
.chủ yếu {
hiển thị: table-cell;
padding-right: 2,5316456%; / * 24px / 948px * /
}
qua một bên {
hiển thị: table-cell;
chiều rộng: 300px;
}
sang một bên img {
chiều rộng tối đa: 100%;
}
phần sang một bên {
float: không có;
chiều rộng: 100%;
}
}

Tại thời điểm này, bố cục ở 940px hoặc rộng hơn trông rất giống ở phần cuối của Chương 2, “Bố cục linh hoạt”.

02. Tăng cường cho màn hình lớn hơn

Việc mở rộng cửa sổ trình duyệt hơn nữa cho thấy rằng không lâu nữa độ dài dòng của bài viết bắt đầu khó đọc. Nhiều trang web triển khai chiều rộng tối đa ở đây để giới hạn khoảng cách cửa sổ trình duyệt có thể được thay đổi kích thước hoặc tăng kích thước phông chữ để cải thiện độ dài dòng.

Thay vì chỉ giới hạn chiều rộng của trang, hãy sử dụng bố cục nhiều cột CSS3.

Mô-đun bố cục nhiều cột cho phép bạn yêu cầu trình duyệt hiển thị nội dung trong một số cột nếu cần. Hỗ trợ không quá tệ: Opera, Firefox, Internet Explorer 10 và WebKit đều hỗ trợ nó. Chỉ cần đảm bảo sử dụng các tiền tố chính xác trong trường hợp của Firefox và WebKit. Không cần tiền tố cho Opera hoặc Internet Explorer. Vì đây là một tính năng tuyệt vời cần có, nhưng không cần thiết cho trang web, chúng tôi có thể nâng cao dần trải nghiệm cho các trình duyệt này:

@media all và (min-width: 1300px) {
.phần chính {
-moz-cột-đếm: 2; / * Firefox * /
-webkit-column-count: 2; / * Safari, Chrome * /
cột-số: 2;
-moz-cột-khe hở: 1,5em; / * Firefox * /
-webkit-cột-khoảng cách: 1,5em; / * Safari, Chrome * /
cột-khe hở: 1,5em;
-moz-column-rule: 1px dotted #ccc; / * Firefox * /
-webkit-column-rule: 1px dotted #ccc; / * Safari, Chrome * /
quy tắc cột: 1px chấm #ccc;
}
}

Dòng 3–5 cho trình duyệt biết trình duyệt nên sử dụng bao nhiêu cột để hiển thị bài viết. Các dòng 6–7 yêu cầu trình duyệt chèn khoảng cách 1,5em (24px) giữa các cột. Cuối cùng, các dòng 9-11 yêu cầu trình duyệt bao gồm một đường chấm màu xám nhạt, 1px trong khoảng trống đó để cung cấp sự phân tách trực quan hơn một chút (xem hình bên dưới).

Độ dài dòng hiện đã tốt hơn nhiều, nhưng trang vẫn có thể được hưởng lợi từ sự tách biệt giữa bài viết và thông tin tác giả. Hình ảnh cũng có thể sử dụng khoảng cách xa hơn một chút so với nội dung:

@media all và (min-width: 1300px) {
.main section img {
margin-bottom: 1em;
border: 3px solid #dbdbdb;
}
.main .articleInfo {
border-bottom: 2px solid #dbdbdb;
}
...
}

Với đường viền được đặt xung quanh hình ảnh và phía trên phần, và việc bổ sung thêm phần đệm, thiết kế một lần nữa trông khá sắc nét.

03. Sử dụng ems cho các truy vấn phương tiện linh hoạt hơn

Mọi người duyệt Web với trình duyệt của họ được đặt thành các hệ số thu phóng khác nhau. Một người nào đó gặp khó khăn trong việc xem có thể thấy rằng phần lớn các trang web có kích thước phông chữ khó đọc, vì vậy anh ta có thể đặt tùy chọn để phóng to theo mặc định.

Khi mọi người sử dụng các hệ số thu phóng khác nhau, kích thước phông chữ tăng (hoặc giảm). Trong Firefox và Opera, đây không phải là vấn đề; các truy vấn phương tiện dựa trên pixel được tính toán lại và áp dụng theo hệ số thu phóng. Tuy nhiên, trên các trình duyệt khác, các điểm ngắt pixel được đặt hoàn hảo của chúng tôi khiến chúng tôi thất bại. Đột nhiên mọi thứ bắt đầu trôi theo những cách khó xử và độ dài đường thẳng lý tưởng của chúng tôi bị ném ra ngoài cửa sổ một cách không thương tiếc. Vấn đề tương tự này phát sinh khi, như chúng ta đã thảo luận trong Chương 2, “Bố cục linh hoạt”, một thiết bị sử dụng kích thước phông chữ mặc định khác. Ví dụ: phông chữ có kích thước 26px của Kindle sẽ tàn phá các truy vấn phương tiện dựa trên pixel. Chúng tôi có thể chống lại những vấn đề này và làm cho trang web của chúng tôi linh hoạt hơn nữa bằng cách chuyển đổi các điểm ngắt thành ems.

Như chúng ta cũng đã thảo luận trong Chương 2, việc chuyển đổi các phép đo dựa trên pixel thành ems đơn giản như chia mục tiêu (điểm ngắt) cho ngữ cảnh (trong trường hợp này là 16px, kích thước phông chữ nội dung):

/ * 600px / 16px = 37,5em * /
@media all và (min-width: 37,5em) {
...
}
/ * 860px / 16px = 53,75em * /
@media all và (min-width: 53,75em) {
...
}
/ * 940px / 16px = 58,75em * /
@media all và (min-width: 58,75em) {
...
}
/ * 1300px / 16px = 81,25em * /
@media all và (min-width: 81,25em) {
...
}

Với các truy vấn phương tiện hiện được đặt bằng cách sử dụng ems, ngay cả khi trang web được phóng to ở một vài cấp độ, các truy vấn phương tiện sẽ xuất hiện, đảm bảo rằng bố cục vẫn được tối ưu hóa.

Sử dụng các truy vấn phương tiện dựa trên các đơn vị em là một cách khác để nắm bắt tính linh hoạt và không thể đoán trước của web. Nó cho phép người dùng kiểm soát trải nghiệm và cho phép nội dung quyết định bố cục.

Tim Kadlec là một nhà phát triển web sống ở phía bắc Wisconsin. Nền tảng đa dạng của anh ấy khi làm việc với các công ty nhỏ đến các nhà xuất bản lớn và các tập đoàn công nghiệp đã cho phép anh ấy thấy việc áp dụng cẩn thận các công nghệ web có thể tác động đến các doanh nghiệp thuộc mọi quy mô như thế nào. Ông là người đồng sáng lập Hội nghị phát triển đột phá, một trong những hội nghị đầu tiên dành riêng cho việc thiết kế và phát triển các thiết bị di động sử dụng công nghệ web.