CSS hình nền chất lỏng

Bây giờ chúng ta có thể dễ dàng tạo hình nền này để bao phủ toàn bộ không gian có sẵn và biến nó thành hình nền toàn trang

Chỉ cần thay

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Ghi chú. Nếu bạn muốn kéo giãn ảnh ra hết chiều cao và chiều rộng có sẵn, hãy nhớ sử dụng ảnh có đủ độ phân giải cao. Tuy nhiên, hãy cẩn thận đừng lạm dụng nó. Hình ảnh có độ phân giải cao rất nặng và có thể làm chậm trang web của bạn

Stephen Thomas là Nhà phát triển giao diện người dùng tại Học viện Công nghệ Georgia với kinh nghiệm trong tất cả các khía cạnh của thiết kế và phát triển Web hiện đại với … Thông tin thêm về Stephen ↬

Bản tin email

Mẹo hàng tuần về giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.

• Thử ngay bây giờ

• Danh sách kiểm tra thiết kế giao diện thông minh

• Bắt đầu miễn phí

• Giao diện người dùng SmashingConf 2023

• Các mẫu thiết kế giao diện thông minh, khóa học 8h-video

• Hệ thống thiết kế thành công

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Ghi chú của biên tập viên. Bài viết này chỉ giới thiệu một trong nhiều giải pháp dưới mức tối ưu cho hình ảnh phản hồi. Chúng tôi khuyên bạn nên xem xét các cách tiếp cận khác nhau trước khi chọn một giải pháp hình ảnh phản hồi cụ thể, bao gồm cả hai giải pháp này. Cách tránh tải xuống trùng lặp trong hình ảnh đáp ứng và chọn giải pháp hình ảnh đáp ứng

Với tất cả các cuộc thảo luận về các tiêu chuẩn HTML5 mới như thuộc tính

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Đọc thêm trên SmashingMag.

• Hình ảnh phản hồi theo định hướng nghệ thuật tự động?
• Hình ảnh phản hồi hiện đã có trong WordPress Core
• Hình ảnh phản hồi gọn gàng hơn với gợi ý của khách hàng

Tuy nhiên, cách tiếp cận này có một số hạn chế và nó không hoạt động trong mọi trường hợp. Nhưng nếu yêu cầu của bạn không phức tạp và nếu bạn sẵn sàng nỗ lực hơn nữa để đảm bảo hình ảnh của mình có thể truy cập được, hình nền CSS có thể là tất cả những gì bạn cần

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người dùng & giao diện người dùng, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Stephanie Troeth và rất nhiều người khác

Trong bài viết này, chúng ta sẽ xem xét cách tiếp cận nền CSS theo một số bước

1. Trước tiên, chúng tôi sẽ xem xét các mục tiêu và yêu cầu đối với hình ảnh phản hồi
2. Sau đó, chúng ta sẽ xem các truy vấn phương tiện CSS có thể giúp xác định các đặc điểm quan trọng của thiết bị của người dùng như thế nào
3. Chúng ta sẽ khám phá thuộc tính CSS

   @media only screen and (max-width: 320px) {
       /* styles for narrow screens */
   }
   

   0 chính cho phép chúng ta phản hồi những đặc điểm đó
4. Chúng tôi sẽ xem xét một chiến lược để tối ưu hóa các hình ảnh riêng lẻ tạo nên một bộ phản hồi
5. Chúng tôi sẽ xem xét những hạn chế của phương pháp này;
6. Và cuối cùng, chúng tôi sẽ mô tả các vấn đề với cách tiếp cận này mà không có cách giải quyết

Ghi chú. Cách tiếp cận này yêu cầu kiểm soát rõ ràng các biểu định kiểu trang web của bạn cũng như đánh dấu HTML của nó. Nếu trang web của bạn dựa vào hệ thống quản lý nội dung (CMS), thì bạn có thể không có đủ quyền kiểm soát đối với các khía cạnh đó của trang web

Nhu cầu về một hình nền đáp ứng

Hình ảnh đáp ứng là một thành phần quan trọng của thiết kế Web đáp ứng (RWD), một chiến lược thiết kế do Ethan Marcotte phát triển để đối phó với sự phổ biến đáng ngạc nhiên của các thiết bị di động để xem Web. Ethan nhận ra rằng phương pháp hay nhất trước đây — phát triển các trang web riêng biệt cho các loại thiết bị khác nhau — đơn giản là không thể đối phó với nhiều loại thiết bị đáng kinh ngạc mà người dùng Web có thể sử dụng để truy cập các trang web mà chúng tôi xây dựng

RWD có một cách tiếp cận hoàn toàn khác. tạo một trang web duy nhất nhưng để trang web đó nhận ra và phản hồi theo ngữ cảnh của nó. Ví dụ: nếu người dùng có trình duyệt máy tính để bàn với màn hình rộng, hãy cho phép nội dung trang web trải rộng trên nhiều cột. Tuy nhiên, trên điện thoại thông minh, hãy sắp xếp lại nội dung để giới hạn nội dung đó trong một cột duy nhất

Trong nhiều trường hợp, đó là điểm dừng của thiết kế đáp ứng - những điều chỉnh đơn giản đối với bố cục và cách trình bày. Tuy nhiên, nếu đó là tất cả những gì chúng tôi xem xét, thì chúng tôi không tôn trọng mục tiêu của thiết kế đáp ứng và chúng tôi đang bán rẻ người dùng của mình.

Đáp ứng thực sự ngữ cảnh của người dùng yêu cầu một thiết kế xem xét tất cả các khía cạnh của trải nghiệm và thường bao gồm hình ảnh. Đối với một ví dụ thực tế, hãy xem xét một trang web như contfont. bọc lưới. Trang web một trang đó có một hình ảnh chính và một bộ HTML, biểu định kiểu, phông chữ và tệp JavaScript điển hình

Trang web trông tuyệt đẹp trên các máy tính có màn hình độ phân giải siêu cao vì nó bao gồm phiên bản có độ phân giải cao của hình ảnh chính. Tuy nhiên, việc cung cấp tệp hình ảnh đó không hề rẻ;

Trang web có thể sử dụng cùng một tệp hình ảnh đó cho tất cả người dùng mà không ảnh hưởng đến trải nghiệm hình ảnh. Các trình duyệt web trên các thiết bị nhỏ hơn như điện thoại thông minh sẽ thay đổi kích thước của nó để phù hợp với màn hình. Mặc dù cách tiếp cận đó sẽ duy trì sự hấp dẫn trực quan của trang web, nhưng trải nghiệm người dùng tổng thể sẽ bị ảnh hưởng đáng kể

Điều đó có ý nghĩa gì đối với người dùng duyệt trang web trên điện thoại thông minh thế hệ trước? . Nếu không có cách tiếp cận hình ảnh phản hồi, trang web sẽ buộc người dùng tải xuống thêm 429 KB dữ liệu hoàn toàn lãng phí. Sự dư thừa này không chỉ mang tính học thuật; . Người dùng điện thoại thông minh có thể đang truy cập trang web qua kết nối 3G thông thường với tốc độ 2 Mb/giây. Không cung cấp hình ảnh phản hồi làm tăng thời gian tải từ 1. 3 giây đến 3 giây đầy đủ, nhiều hơn đáng kể so với gấp đôi

Mục tiêu chính của cách tiếp cận hình ảnh đáp ứng là đơn giản. chỉ cung cấp các pixel mà thiết bị của người dùng thực sự có thể sử dụng

Xác định ngữ cảnh của người dùng

Nếu các trang web của chúng tôi sẽ phản hồi ngữ cảnh của người dùng, thì chúng tôi cần một cách để xác định ngữ cảnh đó. Ngày nay, CSS cung cấp cách hiệu quả nhất để phân biệt các thiết bị khác nhau. CSS cung cấp cho chúng tôi câu trả lời cho hai câu hỏi quan trọng. kích thước màn hình của người dùng là bao nhiêu?

Công cụ CSS cung cấp cho chúng tôi thông tin này là truy vấn phương tiện. Truy vấn phương tiện xác định một tập hợp các thuộc tính kiểu CSS chỉ áp dụng cho các thiết bị có chất lượng cụ thể. Ban đầu, các truy vấn phương tiện được giới hạn ở các loại phương tiện. Thông số kỹ thuật CSS xác định một số lượng lớn chúng bao gồm, ví dụ:

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

Tuy nhiên, CSS3 đã mở rộng việc sử dụng truy vấn phương tiện bằng cách cho phép biểu định kiểu chỉ định các tính năng cụ thể của thiết bị cũng như loại phương tiện. Và trong trường hợp thiết bị

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

Đây là cách truy vấn phương tiện có thể giúp chúng tôi giải quyết vấn đề nan giải của phần trước. Ví dụ: MacBook Pro 15 inch có chiều rộng màn hình là 1440 pixel (hiện tại bỏ qua tùy chọn màn hình Retina). Để xác định các kiểu áp dụng cho màn hình có kích thước này (và lớn hơn), chúng ta có thể viết biểu định kiểu của mình dưới dạng

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Bất kỳ kiểu nào được xác định trong khối đó sẽ chỉ áp dụng khi người dùng truy cập trang Web bằng thiết bị có kích thước màn hình 1440 pixel. Tuy nhiên, có một nhược điểm. Kích thước màn hình phương tiện không áp dụng cho phần cứng của thiết bị; . Chế độ xem là kích thước của cửa sổ trình duyệt sau khi trừ đi bất kỳ trình duyệt chrome nào, chẳng hạn như thanh công cụ

Trừ khi người dùng đang duyệt ở chế độ toàn màn hình, cửa sổ trình duyệt thực tế sẽ có chiều rộng nhỏ hơn 1440 pixel một chút. Do đó, đối với trường hợp phổ biến hơn này, chúng tôi có thể muốn viết lại biểu định kiểu một chút. Có lẽ 1200 pixel là thực tế hơn

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Truy vấn phương tiện có hai phần. Phần đầu tiên,

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Chúng ta có thể sử dụng một kỹ thuật tương tự để xác định kiểu cho điện thoại thông minh ở chế độ dọc

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

Trong trường hợp này, chúng tôi có thể tiếp tục và sử dụng kích thước màn hình thiết bị thực tế trong truy vấn. Trình duyệt web trên điện thoại thông minh luôn có chiều rộng toàn màn hình

Thông số kỹ thuật của tính năng

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Cuối cùng, tất cả các trình duyệt sẽ hỗ trợ ký hiệu dấu chấm trên mỗi pixel tiêu chuẩn (

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Thuộc tính hình nền CSS

Nếu CSS có thể xác định ngữ cảnh của người dùng một cách đáng tin cậy, bạn có thể nghĩ rằng sẽ dễ dàng hỗ trợ hình ảnh phản hồi. Một cách tiếp cận có vẻ hợp lý là đặt

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Đoạn mã trên sẽ hiển thị hình ảnh chính xác dựa trên kích thước màn hình; . Trình duyệt điện thoại thông minh sẽ tải xuống hình ảnh lớn mặc dù nó không bao giờ được hiển thị. Thật không may, cách tiếp cận rõ ràng này không đạt được mục tiêu chính cho hình ảnh phản hồi

Sự cố xảy ra do trình duyệt xử lý HTML riêng biệt với CSS. Đánh dấu HTML yêu cầu hai tệp hình ảnh, vì vậy trình duyệt sẽ tìm nạp cả hai. Sau đó, nó phân tích các kiểu CSS chỉ để phát hiện ra rằng một trong những hình ảnh không được hiển thị, nhưng lúc đó thì đã quá muộn

Các truy vấn phương tiện CSS của chúng tôi sẽ chỉ hoạt động nếu chúng tôi có thể sử dụng chúng một cách nghiêm ngặt cho các thuộc tính CSS chứ không phải nội dung HTML. Điều đó có vẻ bất khả thi, nhưng hóa ra có một cách lén lút để chỉ sử dụng CSS cho hình ảnh — thuộc tính

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

1. Trong phần đánh dấu HTML, không bao gồm các tham chiếu đến bất kỳ tệp hình ảnh nào. Thay vào đó, chỉ cần sử dụng các phần tử

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   89 hoặc

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   60 trống
2. Đặt một hình ảnh vào

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   89 hoặc

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   60 trống bằng cách đặt thuộc tính

   @media only screen and (max-width: 320px) {
       /* styles for narrow screens */
   }
   

   0 của nó
3. Sử dụng truy vấn phương tiện để thay thế hình ảnh phản hồi thích hợp, tùy thuộc vào kích thước và độ phân giải màn hình

Sử dụng các quy tắc này, chúng tôi có thể sửa đổi ví dụ trên để hình ảnh phản hồi thực sự hoạt động chính xác

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Tóm lại đó là cách hỗ trợ ảnh responsive với ảnh nền CSS. Bất kỳ ứng dụng thực tế nào cũng sẽ yêu cầu thêm một chút mã (ví dụ: chúng tôi cần một số cách để chỉ ra kích thước hình ảnh). Tuy nhiên, mã bổ sung là CSS tiêu chuẩn mà không cần bất kỳ thủ thuật nào

Tạo hình ảnh đáp ứng

Với sự hiểu biết về cách sử dụng hình ảnh phản hồi, bước tiếp theo thực sự là tạo các biến thể hình ảnh. Hình ảnh nguồn ban đầu phải có độ phân giải cao nhất có thể, ít nhất là cao bằng hình ảnh chi tiết nhất mà trang web của bạn sẽ cung cấp. (Trong trường hợp của phông chữ. net, hình ảnh nguồn là 3888 × 2592 pixel. ) Chương trình đồ họa bạn chọn sẽ có thể thay đổi kích thước hình ảnh nguồn đó để phù hợp với các điểm dừng của trang web của bạn

Miễn là bạn đang làm việc trong chương trình đồ họa của mình, hãy đảm bảo tối ưu hóa ngay cả những hình ảnh có độ phân giải cao nhất có thể, chẳng hạn như bằng cách sử dụng cài đặt chất lượng thấp nhất khả thi cho hình ảnh. Ngay cả người dùng trên màn hình có độ phân giải cao cũng sẽ đánh giá cao thời gian tải trang nhanh hơn. Nếu hình ảnh ở định dạng JPEG, bạn cũng có thể bật tùy chọn lũy tiến khi xuất ảnh. Tùy chọn này cho phép trình duyệt hiển thị nhanh phiên bản hình ảnh có độ trung thực thấp trong khi tiếp tục tải xuống toàn bộ hình ảnh

Khi đề cập đến các điểm ngắt, bạn không nên bị cám dỗ sử dụng các điểm ngắt giống nhau cho hình ảnh của mình giống như bạn đang sử dụng cho bố cục của trang web. Hiếm khi các điểm dừng bố cục tốt nhất cũng là điểm ngắt hình ảnh tốt nhất. Thay vào đó, hãy tối ưu hóa các điểm ngắt hình ảnh của bạn cho hình ảnh. Đây là một chiến lược tôi thích để tìm kích thước hình ảnh tối ưu

Trước tiên, hãy xác định hình ảnh có độ phân giải nhỏ nhất phù hợp với trang web của bạn để phân phối. Trong trường hợp của phông chữ. net, kích thước khung nhìn thực tế nhỏ nhất là 320 pixel, tương ứng với iPhone không có Retina ở hướng dọc. (Các thiết bị có khung nhìn nhỏ hơn tồn tại và có khả năng tồn tại trong tương lai - đồng hồ thông minh, có ai không? - nhưng những thiết bị đó không có khả năng truy cập trang web. ) Trên phông chữ. net, kích thước khung nhìn là 320 pixel để lại 290 pixel cho chiều rộng hình ảnh, vì vậy hình ảnh có độ phân giải thấp nhất chúng tôi cần là 290 × 183 pixel. Yêu cầu chương trình đồ họa của bạn thay đổi kích thước hình ảnh nguồn thành kích thước đó

Tiếp theo tạo một trang thử nghiệm đơn giản cho hình ảnh đó. Đây là đánh dấu tôi sử dụng

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Trang này hiển thị hình ảnh thử nghiệm và kích thước cửa sổ hiện tại. Mở nó trong trình duyệt của bạn và thay đổi kích thước cửa sổ trình duyệt sao cho chiều rộng của nó bằng kích thước của điểm ngắt nhỏ nhất của bạn. Vì hình ảnh thử nghiệm phù hợp với chiều rộng này, nên nó sẽ ổn

Bây giờ, từ từ thay đổi kích thước cửa sổ trình duyệt của bạn bằng cách tăng chiều rộng của nó. Khi chiều rộng tăng lên, trình duyệt sẽ tự động nội suy và thay đổi kích thước hình ảnh. Khi số lượng phép nội suy tăng lên, chất lượng hình ảnh sẽ bị ảnh hưởng và tại một số điểm, hình ảnh sẽ trông kém ở mức không thể chấp nhận được. Lưu ý chiều rộng màn hình khi điểm đó xảy ra, vì chiều rộng màn hình đó là điểm dừng đầu tiên của bạn

Khi bạn đã tìm thấy điểm dừng đầu tiên, hãy sử dụng chương trình đồ họa của mình để tạo một hình ảnh thử nghiệm mới ở kích thước đó từ nguồn ban đầu. Lặp lại quy trình với hình ảnh thử nghiệm mới để tìm điểm dừng tiếp theo và tiếp tục cho đến khi bạn đạt đến chiều rộng khung nhìn tối đa mà trang web của bạn sẽ hỗ trợ

Tại thời điểm này, bạn sẽ có các điểm ngắt hình ảnh và một tập hợp các hình ảnh phù hợp. Đối với màn hình Retina, hãy tạo thêm hình ảnh ở độ phân giải gấp đôi. Đây là danh sách đầy đủ các hình ảnh cho contfont. trang mạng

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Bạn có thể sử dụng phương pháp này riêng cho từng hình ảnh trên trang web của mình, vì không có lý do gì mà tất cả các hình ảnh phải sử dụng cùng một điểm ngắt. Tuy nhiên, nếu trang web của bạn có nhiều hình ảnh, có thể hiệu quả hơn nếu bạn tìm một số điểm dừng phổ biến bằng cách sử dụng một vài hình ảnh của trang web và sau đó lặp lại các điểm dừng đó cho tất cả các hình ảnh trên trang web

Vượt qua giới hạn

Trong các trường hợp đơn giản nhất, các bước trên là tất cả những gì cần thiết để hỗ trợ hình ảnh phản hồi. Tất nhiên, các trang web hiếm khi đơn giản như vậy và trên thực tế, chúng tôi có thể thực hiện một số bước để cải thiện cách tiếp cận

Làm cho hình ảnh có thể truy cập được

Thẻ

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Thuộc tính bổ sung đầu tiên,

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Chia tỷ lệ hình ảnh trong trình duyệt

Có một thuộc tính hữu ích khác của thẻ

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

Trình duyệt tự động điều chỉnh hình ảnh phù hợp với

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Nhờ cách tiếp cận được mô tả đầu tiên bởi Grady Kuhline, chúng tôi có thể đạt được hiệu ứng tương tự với hình nền CSS cho các trình duyệt hiện đại. (Cảnh báo. Cách tiếp cận mà tiểu mục này mô tả không hoạt động trong Internet Explorer phiên bản 8 trở xuống, vì các trình duyệt đó không hỗ trợ các thuộc tính CSS cần thiết. )

Phần dễ giải quyết nhất là chia tỷ lệ chiều rộng. Như với thẻ

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

Chúng tôi phải kết hợp một số thuộc tính CSS để đặt chiều rộng;

1. Đặt thuộc tính

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   58 của phần tử

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   59 thành

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   70. Nếu không có thuộc tính này, CSS sẽ hiển thị phần tử

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   60 dưới dạng

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   72 và chúng tôi sẽ không thể cung cấp cho nó chiều rộng hoặc (trong một phút) chiều cao
2. Đặt

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   73 của phần tử đó thành

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   74 để hình ảnh của chúng ta lấp đầy phần chứa

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   89
3. Đặt các thuộc tính

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   76 và

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   77 thành

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   78 để mọi nội dung trong

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   79 không ảnh hưởng đến kích thước của nó
4. Đặt thuộc tính

   @media only screen and (max-width: 320px) {
       /* styles for narrow screens */
   }
   

   70 thành

   @media only screen and (max-width: 320px) {
       /* styles for narrow screens */
   }
   

   71 để căn giữa phần tử hình ảnh theo chiều dọc trong phần chứa

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   89
5. Đặt thuộc tính

   @media only screen and (max-width: 320px) {
       /* styles for narrow screens */
   }
   

   73 thành

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   74 để hình ảnh của chúng tôi lấp đầy phần tử hình ảnh
6. Đặt thuộc tính ________ 575 thành ________ 576 để căn chỉnh hình nền trong thành phần hình ảnh
7. Đặt thuộc tính

   @media only screen and (max-width: 320px) {
       /* styles for narrow screens */
   }
   

   77 thành

   @media only screen and (max-width: 320px) {
       /* styles for narrow screens */
   }
   

   78 để ngăn trình duyệt xếp ảnh theo chiều ngang hoặc chiều dọc

CSS kết quả đặt kiểu cho phần tử hình ảnh (phần tử

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Các bước đó đảm nhiệm việc cung cấp cho hình ảnh chiều rộng, nhưng chúng tôi vẫn chưa xử lý chiều cao. Không có gì trong đánh dấu hoặc kiểu ở trên cho trình duyệt biết chiều cao của thành phần hình ảnh. Kết quả là, nó sẽ mặc định là chiều cao tự nhiên của nó, than ôi, bằng 0, vì không có nội dung thực tế trong

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Trước tiên, chúng ta cần thêm một phần tử

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Bây giờ, chúng tôi xác định một vài thuộc tính kiểu cho

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

1. Đặt thuộc tính

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   58 của nó thành

   @media only screen and (max-width: 320px) {
       /* styles for narrow screens */
   }
   

   26 để nó có chiều cao và chiều rộng
2. Đặt

   @media only screen and (max-width: 320px) {
       /* styles for narrow screens */
   }
   

   27 thành

   @media only screen and (min-width: 1200px) {
       /* styles for wide screens */
   }
   

   78 vì nó không có bất kỳ nội dung thực tế nào
3. Thêm thuộc tính

   @media only screen and (max-width: 320px) {
       /* styles for narrow screens */
   }
   

   29 chỉ định tỷ lệ phần trăm bằng tỷ lệ chiều cao trên chiều rộng của hình ảnh

Bước cuối cùng đó là chìa khóa. Mặc dù

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Tất cả cùng nhau bây giờ

Để xem tất cả các thành phần này khớp với nhau như thế nào, đây là mã cho contfont. net mà chúng tôi đã sử dụng làm ví dụ. Đầu tiên là đánh dấu HTML bao gồm hình ảnh trang web chính

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Biểu định kiểu xác định các thuộc tính làm cho tỷ lệ hình ảnh theo tỷ lệ

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Và cuối cùng, một tập hợp các truy vấn phương tiện chọn tệp hình ảnh phù hợp dựa trên ngữ cảnh của người dùng. (Ví dụ dưới đây bỏ qua tiền tố nhà cung cấp cho ngắn gọn. )

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Vấn đề tiềm ẩn

Hình nền CSS là một cách thuận tiện để cung cấp hình ảnh phản hồi ngày nay, nhưng cách tiếp cận này không hoàn hảo. Ở cấp độ cơ bản, nó vi phạm một trong những triết lý cơ bản của các tiêu chuẩn Web hiện đại - tách biệt nội dung khỏi cách trình bày. Các phiên bản nâng cao của phương pháp này cũng gặp phải những lo ngại về khả năng tương thích của trình duyệt và phương pháp này không giải quyết được một số vấn đề sâu hơn với hình ảnh phản hồi nói chung

Tách phong cách và nội dung

CSS được phát triển đặc biệt để tách phong cách khỏi nội dung. Trên web hiện đại, các trang HTML cung cấp tất cả nội dung của trang web, trong khi biểu định kiểu chỉ ảnh hưởng đến việc trình bày nội dung đó. Biểu định kiểu không nên tự xác định nội dung. Tất nhiên, sự tách biệt giữa phong cách và nội dung đã bị vi phạm phần nào với các thuộc tính CSS

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Chỉ định hình ảnh trang web chính bằng CSS là một cấp độ hoàn toàn khác. Bằng cách chỉ định nội dung chính bằng CSS thay vì HTML, chúng tôi làm cho các trang web của mình khó khắc phục sự cố hơn, chúng tôi làm cho chúng khó bảo trì hơn và chúng tôi tạo ra các rào cản đối với các hệ thống có thể cố gắng tự động phân tích cú pháp các trang web của chúng tôi

Thật không may, thực sự không có cách giải quyết vấn đề này. Nếu sự tách biệt chặt chẽ giữa phong cách và nội dung là quan trọng đối với bạn, thì bạn sẽ phải xem xét các phương pháp thay thế cho hình ảnh phản hồi

Hỗ trợ trình duyệt cho hình ảnh được chia tỷ lệ

Như đã lưu ý ở trên, các cải tiến mà chúng tôi đã thêm vào phương pháp cơ bản dành cho hình ảnh được chia tỷ lệ sẽ không hoạt động trong Internet Explorer phiên bản 8 trở xuống. Các cách tiếp cận được tiêu chuẩn hóa như

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

Nếu bạn cần hỗ trợ IE8 ngay bây giờ, bạn có thể cân nhắc tạo một biểu định kiểu riêng cho IE8 chỉ định kích thước hình ảnh cố định thay vì chia tỷ lệ hình ảnh. Tất nhiên, bạn sẽ muốn đưa biểu định kiểu đó vào một nhận xét có điều kiện của IE để các trình duyệt khác không nhìn thấy nó

Vấn đề thực sự của bối cảnh người dùng

Có lẽ vấn đề cơ bản nhất với phương pháp này là vấn đề với hình ảnh phản hồi nói chung. Chúng tôi đang sử dụng chiều rộng màn hình và mật độ điểm ảnh để xác định bối cảnh người dùng, nhưng không rõ ràng rằng cách tiếp cận như vậy luôn phù hợp. Ví dụ: hãy xem xét một người dùng máy tính xách tay truy cập Web qua điểm truy cập Wi-Fi của điện thoại thông minh

Trình duyệt Web của người dùng đó sẽ hiển thị tất cả các đặc điểm của một thiết bị màn hình rộng, mật độ cao và một trang web đáp ứng sẽ cung cấp hình ảnh lớn, độ phân giải cao. Bất cứ thứ gì ít hơn sẽ trông kém trên màn hình của người dùng của chúng tôi, nhưng những hình ảnh này có thể mất nhiều thời gian để tải qua mạng không dây. Họ có thể tăng đáng kể thời gian tải của trang web và cuối cùng họ có thể khiến người dùng của chúng tôi phải trả tiền thật cho hóa đơn không dây của họ. Nếu được lựa chọn, họ có thể thích hình ảnh có độ phân giải thấp hơn

Hóa ra đây là một vấn đề thực sự khó giải quyết. Những người thông minh trong cộng đồng Web chắc chắn đang thảo luận về nó, nhưng cho đến nay có rất ít sự đồng thuận về một giải pháp thiết thực. Hiện tại, khám phá ngữ cảnh dựa trên CSS là kỹ thuật tốt nhất hiện có

Sự nhìn nhận

Xin gửi lời cảm ơn đặc biệt đến Grady Kuhnline vì lần đầu tiên mô tả cách tạo kiểu cho hình ảnh có thể chia tỷ lệ theo tỷ lệ. Ngoài ra, phông chữ. net mà bài viết này sử dụng làm ví dụ có sẵn để tham khảo trên github