Ngày của những trang web có chiều rộng cố định, pexel perfect thật sự đã ở phía sau chúng ta. Trong thời đại của màn hình rộng, internet TV, máy tính bảng và điện thoại thông minh có kích thước khác nhau, giờ đây thiết kế của chúng ta có để phục vụ cho tất cả mọi thứ từ chiều rộng 320px cho đến 7680px
Với nhiều mức độ phân giải khác nhau, điều này dẫn đến một nhu cầu cho các hình ảnh để giãn ra hoặc thu nhỏ để phù hợp với các yêu cầu chiều rộng khác nhau. Điều này có thể chứng minh rằng nó có vấn đề, bên ngoài hình ảnh véc tơ ra, hầu hết các hình ảnh có điểm ảnh cụ thể không thể thay đổi dựa trên chiều rộng
Vậy chúng ta làm gì?
Hiện tại, giải pháp phổ biến nhất
Thông thường, bạn sẽ thấy những điều sau đây trong CSS của các trang web có tính năng trả lời
1
img {
2
max-width: 100%;
3
height: auto;
4
}
Đoạn mã này sử dụng thiết lập
height: auto;9 để đảm bảo chắc chắn hình ảnh không bao giờ lớn hơn chiều rộng của phần tử chứa nó. Nếu phần tử cha thu nhỏ hơn chiều rộng của tấm hình, thì tấm hình cũng sẽ thay đổi kích thước theo nó. Thiết lập
40, chắc chắn về tỷ lệ hình ảnh được bảo đảm toàn bộ khi điều này xảy ra
Nó giải quyết vấn đề đối với một khía cạnh, cho phép chúng ta hiển thị cùng một hình ảnh trong nhiều cảnh hoàn toàn khác nhau. Nhưng nó không cho phép chúng ta xác định các hình ảnh khác nhau cho những cảnh hoàn toàn khác nhau
Một giải pháp mới. height: auto;
8
height: auto;8 là một phần tử mới được thiết lập để trở thành một phần chính thức của HTML5
Nó sẽ mang lại quá trình đặt các hình ảnh có tính năng trả lời tương ứng như các phần tử
43 và
44 đang làm. Nó sẽ cho phép bạn đặt nhiều thẻ
45, mỗi cái xác định tên tệp hình ảnh khác nhau cùng với các điều kiện theo đó chúng sẽ được tải
Nó sẽ cho phép bạn tải lên một hình ảnh hoàn toàn khác tùy thuộc vào
- Kết quả của Media Query, ví dụ chiều cao, chiều rộng, hướng của khung nhìn
- Image point mode
Điều này có nghĩa là bạn có thể
- Tải các hình ảnh có kích thước tương ứng, tối ưu hóa việc sử dụng băng thông
- Tải các hình ảnh với kích thước khác nhau để phù hợp với sự thay đổi của bố cục ở các độ rộng khác nhau
- Tải các hình ảnh có độ phân giải cao cho màn hình có điểm ảnh mật độ cao hơn
Phần tử height: auto;
8 hoạt động thế nào?
Các bước cơ bản để làm việc với
height: auto;8 là
- Create the close tag and open
4
8 - Trong các thẻ đó, tạo ra một phần tử
4
9 cho mỗi truy vấn bạn muốn chạy - Thêm một thuộc tính
}
0 có chứa các truy vấn của bạn về những thứ như chiều cao, chiều rộng, hướng của khung nhìn, v.v. - Thêm một thuộc tính
}
1 với tên tệp hình ảnh tương ứng để tải xuống - Thêm các tên tập tin phụ thuộc vào thuộc tính
}
1 của bạn nếu bạn muốn cung cấp cho các màn hình có mức độ mật mã điểm ảnh khác nhau, ví dụ như màn hình Retina - Thêm một phần tử
}
3 cho dự án
Dưới đây là một ví dụ cơ bản trong đó kiểm tra xem các khung nhìn nhỏ hơn 768px, thì sẽ tải xuống một hình ảnh nhỏ hơn
1
2
img {1_______4_______
img {3_______6_______1_______5
img {6
img {7
Bạn sẽ thấy rằng cú pháp sử dụng trong thuộc tính
}0 giống như bạn có thể sử dụng để tạo Media Query trong CSS. Bạn có thể sử dụng các kiểm tra tương tự, có nghĩa là bạn có thể truy vấn
}5,
}6,
}7,
}8,
}9 và vân vân
Bạn có thể sử dụng các kiểm tra này để thực hiện những công việc như tải các phiên bản ngang hoặc dọc của một tấm tùy chọn theo hướng xoay của thiết bị và bạn vẫn có thể kết hợp trong các truy vấn cùng kích thước cùng một lúc. Ví dụ
1
2
21
3
23_______6_______2_______5
img {6
27
28
29
max-width: 100%;0
img {7
Mã ở phiên bản tải xuống của hình ảnh nhỏ hơn, hướng nằm ngang trên một thiết bị nhỏ hơn và xoay ngang. Nó tải xuống một phiên bản lớn hơn của cùng một hình ảnh trên một thiết bị xoay ngang
Nếu thiết bị nằm thẳng thì nó tải một bức ảnh đứng, kích thước nhỏ trên thiết bị nhỏ hoặc kích thước lớn trên thiết bị lớn
Nếu bạn muốn cung cấp các phiên bản độ phân giải khác nhau của hình ảnh cho màn hình có độ phân giải cao, thì bạn sẽ làm điều đó bằng cách thêm tên tệp phụ thuộc vào thuộc tính
}1. Ví dụ, hãy xem đoạn mã đầu tiên của chúng ta ở trên với việc bổ sung thêm cho tốc độ phân giải 2x của màn hình Retina
1
2
max-width: 100%;5
3
max-width: 100%;7
43_______9
img {6
img {7
Truy vấn phương tiện vẫn được xem xét trước vì thế bạn có thể kiểm tra kích thước hình ảnh sẽ hiển thị trên màn hình. Sau đó, độ phân giải của màn hình sẽ được kiểm tra và nếu độ phân giải cao hơn được hỗ trợ thì phiên bản độ phân giải cao hơn của màn hình sẽ được tải
Sử dụng height: auto;
8 ngay hôm nay
Hiện tại,
height: auto;8 hoạt động trong Chrome, Firefox và Opera. Trong tương lai có thể chúng ta sẽ thấy sự hỗ trợ sẽ trở nên phổ biến, rộng rãi hơn khi các trình duyệt khác cũng bắt đầu cài đặt. But current at, is not supports
Tuy nhiên, bạn không cần phải đợi nếu bạn muốn bắt đầu sử dụng
height: auto;8 ngay bây giờ. Bạn chỉ cần sử dụng Picturefill 2. 0;
Sau khi tải về picturefill tập tin. js vào dự án của bạn, nó có thể được cài đặt đơn giản bằng cách tải nó trong phần đầu của trang web của bạn
1
33
Cũng có tùy chọn để tải các tập lệnh không đồng bộ để tăng hiệu quả, bạn có thể đọc về nó trong hướng dẫn tài liệu của Picturefill
Với tập lệnh này được tải, thì phần tử
height: auto;8 sẽ hoạt động như tôi đã giải thích, chỉ với một vài hạn chế
Un mode of Picturefill
IE9
Picturefill hoạt động tốt với các phiên bản IE khác, tuy nhiên IE9 không nhận được phần tử
45 được đóng gói trong thẻ
16. Để giải quyết vấn đề này, hãy đặt các phần tử nguồn của bạn theo một cách có điều kiện trong các thẻ
17 để chúng có thể được nhìn thấy bởi IE9, ví dụ:
1
2
37
3
img {1_______6_______1_______3
img {6
height: auto;3
28
img {5
max-width: 100%;0
img {7
Android2. 3
Giống như IE9, Android 2. 3 could not see the other section of
45 in an section tử
16. Tuy nhiên, nó có thể hiểu được thuộc tính
}1 khi sử dụng trên thẻ
1 thông thường. Hãy chắc chắn rằng luôn luôn bổ sung phần tử dự phòng
1 của bạn với tên tệp mặc định trong các thuộc tính
}1 cho Android 2. 3 và bất kỳ trình duyệt nào khác gặp sự cố tương tự như trên
Yêu cầu JavaScript và Media Query
Là một giải pháp dựa trên JavaScript, nó đương nhiên yêu cầu JavaScript để được kích hoạt trong trình duyệt. Picturefill 2. 0 không cung cấp giải pháp "no-js" bởi vì nếu nó làm như vậy, nhiều hình ảnh sẽ xuất hiện khi trình duyệt hỗ trợ cho
height: auto;8. Tuy nhiên, bạn có thể chọn sử dụng Picturefill 1. 2 nếu "no-js" là điều kiện bắt buộc đối với bạn
Yêu cầu khác của Picturefill là Media Query hỗ trợ, để cho phép truy vấn thuộc tính
}0. Tất cả các trình duyệt hiện đại đều hỗ trợ Media Query, chỉ có IE8 và thấp hơn là không hỗ trợ với lượng người dùng còn lại rất nhỏ
Phát sinh thêm các yêu cầu HTTP
Trong trình duyệt có hỗ trợ
}1, nhưng không hỗ trợ
16, có thể tên tệp chỉ được xác định trong phần tử
1 dự kiến phòng có thể được yêu cầu trước khi một hình ảnh phù hợp hơn từ các phần tử của
45 được xác nhận