Xây dựng một trang web đáp ứng trong một tuần: truy vấn phương tiện (phần 4)

NộI Dung

• 01. Thêm truy vấn phương tiện
• 02. Giải phẫu của một truy vấn phương tiện
• 03. Một điều nữa…
• 04. Chọn điểm ngắt
• 05. Điều chỉnh hình thu nhỏ của chúng tôi
• 06. Không chỉ chiều rộng

• Kiến thức cần thiết: CSS và HTML trung gian
• Đòi hỏi: Trình soạn thảo văn bản, trình duyệt hiện đại, phần mềm đồ họa
• Thời gian dự án: 1 giờ (tổng cộng 5 giờ)
• Tệp hỗ trợ

Một phần tương đối mới của đặc tả CSS, truy vấn phương tiện chắc chắn là khía cạnh thú vị nhất của thiết kế web đáp ứng và là một lĩnh vực chín muồi để thử nghiệm thêm.

Sau khi chấp nhận nhu cầu về bố cục thích ứng, một số người đã xem truy vấn phương tiện như một phương tiện để trang bị thêm bố cục thích ứng cho các trang web có chiều rộng cố định hiện có. Trong số những người đã sử dụng bố cục đáp ứng, nhiều người đã làm như vậy từ góc độ của màn hình, ẩn nội dung và các tính năng khi chế độ xem thu hẹp.

Trong suốt hướng dẫn này, chúng tôi đã thực hiện một cách tiếp cận thay thế, trước tiên là thiết bị di động. Bây giờ, khi chúng tôi muốn bao gồm các truy vấn phương tiện, chúng tôi có thể nghĩ về thêm vào các tính năng khi bất động sản trên màn hình tăng lên, an toàn khi biết rằng đánh dấu và thiết kế làm nền tảng cho trang web của chúng tôi cung cấp một đường cơ sở đáng tin cậy.

Hôm nay, chúng tôi sẽ vượt ra ngoài danh mục mẫu của mình và xây dựng các trang riêng lẻ cần thiết cho trang web của chúng tôi. Khi làm như vậy, chúng ta sẽ thấy cách các truy vấn phương tiện được xây dựng và triển khai chúng theo cách thực sự đáp ứng.

01. Thêm truy vấn phương tiện

Với các thành phần trong danh mục mẫu của chúng tôi đã hoàn chỉnh và hoạt động bên ngoài giới hạn của bất kỳ bố cục nào, đã đến lúc chuyển chúng vào các trang khác nhau tạo nên trang web của chúng tôi.

Chúng tôi sẽ bắt đầu với trang chủ của chúng tôi. Từ thiết kế hướng vào máy tính để bàn, chúng ta có thể thấy rằng trong các khung nhìn rộng hơn, bố cục của chúng ta sẽ xuất hiện như sau:

Lấy các phép đo từ thiết kế của chúng tôi, chúng tôi có thể mô tả vùng tài liệu trong CSS như sau:

.document {
đệm lót: 0 5%;
}
.chủ yếu {
chiều rộng: 74,242424242424%; / * 784/1056 * /
float: trái;
}
.bổ túc {
chiều rộng: 22,727272727273%; / * 240/1056 * /
float: phải;
}

Như chúng ta đã học trong phần thứ hai của hướng dẫn này, chúng ta đang sử dụng công thức sau để tính chiều rộng phần trăm của các cột này:

(target / context) * 100 = result

Khi chúng tôi thay đổi kích thước trình duyệt của mình, chúng tôi sẽ thấy rằng bố cục màn hình của chúng tôi sẽ thay đổi từ màn hình có kích thước nhỏ nhất đến lớn nhất. Tất nhiên, ở kích thước nhỏ, các cột quá hẹp và độ dài dòng quá ngắn nên khó đọc nội dung. Chúng tôi chỉ muốn bố cục này khi có đủ không gian để nó hoạt động.

Đây là nơi xuất hiện các truy vấn phương tiện. Giả sử rằng bố cục này chỉ có hiệu lực khi trình duyệt rộng hơn 768px, chúng ta có thể thêm CSS sau:

.document {
đệm lót: 0 5%;
}
@media screen and (min-width: 768px) {
.chủ yếu {
chiều rộng: 74,242424242424%; / * 784/1056 * /
float: trái;
}
.bổ túc {
chiều rộng: 22,727272727273%; / * 240/1056 * /
float: phải;
}
}

Bây giờ, khi khung nhìn hẹp hơn 768px, mọi thứ bên trong truy vấn phương tiện sẽ bị bỏ qua. Nó sẽ bị bỏ qua bởi bất kỳ trình duyệt nào không hỗ trợ các truy vấn phương tiện.

02. Giải phẫu của một truy vấn phương tiện

Để hiểu điều gì đang xảy ra ở đây, hãy xem cách tạo truy vấn phương tiện. Chúng ta có thể chia nó thành hai phần:

• Màn hình @media: Phần đầu tiên của truy vấn phương tiện là loại phương tiện. Bạn có thể nhận ra cú pháp này nếu bạn đã từng bao gồm các kiểu in trong CSS của mình. Bạn cũng có thể nhận ra tên loại từ phương tiện truyền thông thuộc tính trên liên kết> thành phần. Đó là bởi vì cả hai đều chấp nhận tập hợp các loại phương tiện đã được phê duyệt được tìm thấy trong đặc tả CSS 2.1.
• (chiều rộng tối thiểu: 768px): Phần thứ hai là truy vấn. Điều này bao gồm đặc tính được truy vấn (trong trường hợp này là chiều rộng tối thiểu của khung nhìn) và giá trị để kiểm tra (768px).

Khi chúng ta nói về thiết kế web đáp ứng, có xu hướng tập trung vào chiều rộng, nhưng có những tính năng khác mà chúng ta có thể thử nghiệm:

• (min- | max-) width và (min- | max-) height: Chúng cho phép chúng tôi truy vấn chiều rộng và chiều cao của khung nhìn (tức là cửa sổ trình duyệt).
• (min- | max-) device-width và (min- | max-) device-height: Chúng cho phép chúng tôi truy vấn chiều rộng của toàn bộ màn hình. Theo kinh nghiệm của tôi, thường hợp lý hơn khi bố trí dựa trên khung nhìn hơn là màn hình.
• sự định hướng: Bạn có thể nghĩ ngay đến các khả năng ở đây; nghĩ về các ứng dụng hiển thị nội dung khác nhau dựa trên hướng điện thoại của bạn - điều này cũng có thể xảy ra trên web.
• (min- | max-) co-ratio: Điều này cho phép chúng tôi điều chỉnh bố cục dựa trên tỷ lệ của cửa sổ trình duyệt…
• (min- | max-) device-co-ratio: … Và điều này cho phép chúng tôi làm điều tương tự dựa trên tỷ lệ khung hình của thiết bị. Owen Gregory đã viết một bài báo tuyệt vời vào năm ngoái khám phá cách chúng ta có thể sử dụng truy vấn này để gắn thiết kế của chúng ta với các thiết bị mà chúng xuất hiện.
• (tối thiểu- | tối đa-) đơn sắc: Chúng tôi cũng có thể kiểm tra xem thiết bị có màn hình đơn sắc hay không. Hãy tưởng tượng điều này sẽ hữu ích như thế nào nếu các thiết bị Kindle e-ink của Amazon không nói dối và báo cáo màn hình của chúng là màu!

Phần cuối cùng của truy vấn của chúng tôi có thể là hữu ích nhất. Bằng cách sử dụng và, chúng tôi có thể kiểm tra nhiều tính năng trong một truy vấn. Ví dụ:

màn hình @media và (chiều rộng tối thiểu: 768px) và (hướng: ngang) {
...
}

Như bạn có thể thấy, các truy vấn phương tiện truyền thông có thể giúp chúng tôi xây dựng trải nghiệm khá hấp dẫn - và tôi chỉ mới chạm vào bề nổi. Nếu bạn đang tìm kiếm một số đọc nhẹ trước khi đi ngủ, bạn có thể làm tệ hơn là đọc đặc tả truy vấn phương tiện W3C mô tả tất cả các tính năng mà chúng tôi có thể kiểm tra.

03. Một điều nữa…

Mặc dù chúng tôi đã đưa các truy vấn phương tiện vào CSS của mình, nhưng nếu chúng tôi xem trang web của mình trên thiết bị di động, bạn sẽ nhận thấy rằng trang web của chúng tôi vẫn đang được hiển thị như thể màn hình rộng hơn 768px.

Để hiểu tại sao điều này lại xảy ra, chúng ta cần học một bài học lịch sử ngắn gọn.

Khi iPhone đầu tiên được công bố vào năm 2007, một trong những điểm bán hàng lớn của nó là khả năng duyệt 'web thực', ngay cả khi điều đó có nghĩa là các trang web định hướng màn hình có chiều rộng cố định cần được thu nhỏ lại để vừa với màn hình nhỏ của nó. IPhone đã có thể làm điều này bằng cách báo cáo màn hình của nó có chiều rộng 980px, trước khi thu nhỏ các trang web xuống để vừa với màn hình rộng 320px.

Nhưng iPhone đã được giới thiệu trước khi có thiết kế đáp ứng. Bây giờ các tác giả đang thiết kế các trang web được thiết kế cho điện thoại di động, tính năng này ít hữu ích hơn. Rất may, Apple đã đưa vào một phương tiện để bỏ qua hành vi này và vì nó đã được các nhà sản xuất khác áp dụng, nó đã gần như trở thành một trên thực tế Tiêu chuẩn. Nó chỉ đơn giản là thêm một meta yếu tố đánh dấu của chúng tôi:

meta name = "viewport" content = "initial-scale = 1.0, width = device-width" />

Điều này cho các trình duyệt biết chế độ xem biết rằng một trang web không nên được thu nhỏ lại và chiều rộng của cửa sổ trình duyệt phải được coi như chiều rộng tổng thể của thiết bị. Khi chúng tôi đã thêm dòng này, trang web của chúng tôi sẽ xuất hiện với bố cục dự định:

04. Chọn điểm ngắt

Hãy quay lại truy vấn phương tiện truyền thông của chúng tôi:

@media screen and (min-width: 768px) {
...
}

Các giá trị mà tại đó bố cục thích ứng thường được gọi là các điểm ngắt. Nếu bạn nhớ lại, trong phần hai, tôi đã nói rằng sử dụng pixel là dấu hiệu của suy nghĩ thiếu phản ứng, nhưng ở đây tôi đã chọn 768px, có lẽ vì đó là chiều rộng của một thiết bị quen thuộc.

Thay vì chọn các điểm ngắt dựa trên đặc điểm của các thiết bị phổ biến, có thể hiệu quả hơn khi xem xét các giá trị bắt nguồn từ nội dung của chúng tôi, chẳng hạn như độ dài dòng thoải mái để đọc hoặc kích thước tối đa của hình ảnh.

Với loại của chúng tôi có kích thước bằng cách sử dụng ems, có vẻ hợp lý đối với các truy vấn phương tiện truyền thông của chúng tôi cũng sử dụng ems. Trên thực tế, làm như vậy có một lợi ích bổ sung. Khi người dùng thay đổi kích thước văn bản trong trình duyệt, các trang sẽ thích ứng để sử dụng các điểm ngắt nhỏ hơn. Không chỉ trang web của chúng tôi sẽ thích ứng dựa trên kích thước của khung nhìn mà còn cả kích thước của phông chữ. Trên thực tế, chỉ khi tôi thấy Jeremy Keith thể hiện các truy vấn trên phương tiện truyền thông dựa trên em, tôi mới nhận ra rằng chúng có thể mạnh mẽ như thế nào.

Mặc dù thiết kế của chúng tôi có thể cung cấp một số dấu hiệu về các điểm ngắt có thể xảy ra, nhưng cách tốt nhất để chọn chúng là thông qua thử nghiệm. Bằng cách điều chỉnh chiều rộng của cửa sổ trình duyệt, tôi đã quyết định rằng 800px là chiều rộng tốt để hoán đổi sang một bố cục phức tạp hơn.

Làm thế nào để chúng tôi thể hiện 800px trong ems? Một lần nữa, chúng ta có thể sử dụng công thức của mình, nhưng bối cảnh là gì? Khi tính toán ems cho các truy vấn phương tiện, ngữ cảnh luôn là kích thước phông chữ mặc định của trình duyệt bất kể giá trị này đã được ghi đè trong CSS của bạn hay chưa. Mặc định này thường là 16px, cung cấp cho chúng tôi:

800 / 16 = 50

Bây giờ chúng tôi có thể cập nhật truy vấn phương tiện của mình như sau:

@media screen and (min-width: 50em) {/ * 800px * /
...
}

05. Điều chỉnh hình thu nhỏ của chúng tôi

Bạn sẽ nhớ rằng trong phần 2, chúng tôi đã tạo kiểu cho hình thu nhỏ của mình trở nên phản hồi. Tuy nhiên, một khi các hình ảnh bên trong các hình thu nhỏ này đạt đến toàn bộ chiều rộng của chúng, một vùng khoảng trắng sẽ xuất hiện ở bên phải của mỗi hình ảnh. Một lần nữa, các truy vấn phương tiện truyền thông cho phép chúng tôi khắc phục điều này.

Đây là CSS gốc của chúng tôi:

ol.media li.media-item {
màu nền: #fff;
ký quỹ: 0 4,16666666667% 4,16666666667% 0;
chiều rộng: 47,91666666667%;
float: trái;
}
ol.media li.media-item: nth-child (2n) {
margin-right: 0;
}

Điểm mà khoảng trắng này xuất hiện cũng giống như trình duyệt mở rộng hơn so với 560px.Chúng tôi sẽ chọn giá trị này để hoán đổi thành hiển thị ba hình thu nhỏ trên mỗi hàng. Chúng tôi có thể làm điều đó bằng cách thêm CSS sau:

@media screen and (min-width: 35em) {
.media-item {
chiều rộng: 30,612244897959%; / * 240/784 * /
ký quỹ: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
margin-right: 0;
}
}

Lưu ý rằng chúng tôi không cần phải viết lại tất cả các kiểu cần thiết cho hình thu nhỏ bên trong truy vấn phương tiện này, chỉ những phần chúng tôi muốn điều chỉnh.

Khi xem thay đổi này trong trình duyệt, bạn sẽ lưu ý rằng không có lề ở bên phải của mỗi hình thu nhỏ thứ hai. Điều này là do quy tắc CSS sau vẫn hoạt động:

ol.media li.media-item: nth-child (2n) {
margin-right: 0;
}

Chúng tôi cần sửa đổi CSS trong truy vấn phương tiện của mình để đặt lại giá trị đó:

@media screen and (min-width: 35em) {
.media-item {
chiều rộng: 30,612244897959%; / * 240/784 * /
ký quỹ: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
margin-right: 4,081632653061%;
}
.media-item: nth-child (3n) {
margin-right: 0;
}
}

Khi tạo các truy vấn phương tiện, hãy luôn lưu ý các vấn đề kế thừa như thế này.

06. Không chỉ chiều rộng

Điều quan trọng là phải suy nghĩ về các truy vấn phương tiện không chỉ về chiều rộng mà còn cả các biến số khác. Ví dụ: video trên trang mục phương tiện của chúng tôi bị ẩn một phần khi chiều cao khung nhìn giảm. Chúng tôi có công nghệ:

.media-object-wrapper {
đệm lót: 56,25%;
chiều rộng: 100%;
chiều cao: 0;
chức vụ: thân nhân;
}
@ màn hình phương tiện và (chiều cao tối đa: 35em) và (hướng: ngang) {/ * 560px * /
.media-object-wrapper {
chiều rộng: 60%;
đệm lót: 33,75%;
}
}

Tôi thậm chí đã bao gồm một truy vấn định hướng để cải thiện hành vi này hơn nữa.

Chúng tôi có thể thực hiện theo một cách tiếp cận tương tự cho các phần khác của thiết kế của chúng tôi, hoán đổi trong phiên bản tiêu đề lớn hơn và di chuyển các liên kết điều hướng lên đầu trang khi có dung lượng.

• Xem trang chủ đáp ứng của chúng tôi
• Xem trang mục phương tiện đáp ứng của chúng tôi

Và chúng tôi đã có nó! Chúng tôi đã xây dựng một trang web đáp ứng - và có một ngày để rảnh rỗi! Chà, không hoàn toàn. Bố cục linh hoạt, hình ảnh và truy vấn phương tiện chỉ là bước khởi đầu của quá trình thiết kế đáp ứng.

Ngày mai: Trong phần cuối cùng của hướng dẫn này, chúng ta sẽ vượt ra ngoài thiết kế web đáp ứng và xem xét cách chúng ta có thể xây dựng các trang web đáp ứng thực sự.

Paul là một nhà thiết kế tương tác có trụ sở tại Brighton, Anh. Anh ấy hạnh phúc nhất khi tạo ra các giao diện đơn giản nhưng hấp dẫn dành cho web.