Trong phiên bản 4. 4, WordPress đã thêm một tính năng thú vị để tự động xử lý hình ảnh phản hồi. Về cơ bản, các thuộc tính scrset được thêm vào mỗi hình ảnh để trình duyệt có thể quyết định áp dụng kích thước hình ảnh nào dựa trên độ phân giải thiết bị cụ thể. Mặc dù điều này sẽ hữu ích trong hầu hết các trường hợp, đây là một cách nhanh chóng để tắt tính năng srcset nếu bạn gặp phải bất kỳ sự cố nào sau khi cập nhật trang web của mình lên WP 4. 4
Chỉ cần dán đoạn mã đơn giản này vào chức năng chủ đề của bạn. php và hình ảnh của bạn sẽ hoạt động như trong WP 4. 3 trở về trước
wordpress 4. 2 đã giới thiệu cái gọi là đánh dấu hình ảnh phản hồi “gốc” sử dụng “srcset” và thuộc tính kích thước. Nó được áp dụng cho tất cả hình ảnh trên blog của bạn để cung cấp hình thu nhỏ và hình ảnh phù hợp dựa trên kích thước màn hình thiết bị
Đôi khi bạn có thể cần xóa đánh dấu hình ảnh phản hồi của WordPress cho các mục đích khác nhau và đây là cách xóa hoặc vô hiệu hóa nó
Xóa đánh dấu hình ảnh phản hồi của WordPress thông qua các chức năng. php
Dễ dàng xóa WordPress srcset” và đánh dấu phản hồi kích thước khỏi trang web WordPress của bạn bằng cách chỉnh sửa các chức năng. tập tin php của chủ đề của bạn
Thêm đoạn mã nhỏ này vào bên trong các chức năng. tệp php, trước thẻ php kết thúc
function disable_srcset[ $sources ]
{ return false; }
add_filter[ 'wp_calculate_image_srcset', 'disable_srcset' ];
Để ngăn WordPress tạo hình thu nhỏ medium_large mới ở 768px, bạn sẽ cần thêm mã này vào hàm. cả tệp php
function ta_customize_thumbnail_sizes[$sizes] {
unset[$sizes['medium_large']]; // 768px return $sizes;
}
add_filter['intermediate_image_sizes_advanced', 'ta_customize_thumbnail_sizes'];Sau khi bạn áp dụng tinh chỉnh nhỏ này, trang web WordPress của bạn sẽ ngừng thêm đánh dấu phản hồi vào thẻ hình ảnh trong mã blog của bạn
Cho đến tận WordPress 4. 4 đã bao gồm một tính năng có thể chụp ảnh gốc và tự động quyết định giới thiệu một srcset cho các kích thước hình ảnh khác nhau để phù hợp với các phiên bản phản hồi của trang web, vấn đề là bạn có thể không có trang web phản hồi hoặc giống như chúng tôi, bạn có thể có khá . Mà làm cho tính năng này cực kỳ bị hỏng và bất lợi
May mắn thay, bạn có thể dễ dàng tắt tính năng này bằng cách thêm tính năng này vào chức năng chủ đề của mình. php
function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];
Bài viết này là một phần của loạt bài phát triển web từ Microsoft. Cảm ơn bạn đã hỗ trợ các đối tác giúp SitePoint có thể
Trong thế giới kết nối này, nơi mọi người có nhiều loại thiết bị, việc đảm bảo trang web của bạn hoạt động trơn tru trên tất cả các thiết bị là một nhu cầu chứ không phải là một lựa chọn. Lượt xem trang web của bạn sẽ không đến từ một thiết bị có độ phân giải duy nhất hoặc một yếu tố hình thức duy nhất. Để phục vụ cho tất cả chúng, trang web của bạn cần phải đáp ứng
Nếu bạn đã quen thuộc với thiết kế web đáp ứng [RWD], bạn có thể biết những điều phức tạp đi kèm với thiết kế đáp ứng [và cách Bootstrap giải quyết rất nhiều vấn đề trong số đó. ]. Một phần quan trọng của trang web phản hồi là hình ảnh phản hồi. Trong bài viết này, chúng ta sẽ tìm hiểu thêm về hình ảnh phản hồi trên web và xem cách xây dựng chúng
Hình ảnh phản hồi là gì?
Nói một cách đơn giản, hình ảnh phản hồi là hình ảnh được hiển thị ở dạng tốt nhất trên trang web, tùy thuộc vào thiết bị mà trang web của bạn đang được xem từ đó. Thuật ngữ 'hình thức tốt nhất' có thể có nhiều nghĩa
- Bạn muốn hiển thị nội dung hình ảnh riêng biệt dựa trên kích thước màn hình thực của người dùng. Ví dụ. bạn muốn hiển thị một nội dung hình ảnh riêng biệt trên 13. Máy tính xách tay 5 inch và điện thoại di động 5 inch [trên trình duyệt tối đa]
- Bạn muốn hiển thị một hình ảnh riêng biệt dựa trên độ phân giải của thiết bị [hoặc tỷ lệ pixel của thiết bị, là tỷ lệ giữa pixel của thiết bị và pixel CSS]
- Bạn muốn hiển thị hình ảnh ở định dạng hình ảnh được chỉ định [ví dụ: JPEG XR] nếu trình duyệt hỗ trợ định dạng đó, có thể do định dạng đó hỗ trợ mức nén cao hơn
Hầu hết các trình duyệt hiện đại bao gồm cả Microsoft Edge [bắt đầu từ Windows Insider Build 10547] đều có các khối xây dựng để phản hồi nhanh. Bạn có thể xem trạng thái Nền tảng web của các tính năng như
Cách bật hình ảnh phản hồi
Có một số cách để kích hoạt hành vi phản hồi của hình ảnh. Một trong những phương pháp cũ hơn [không được khuyến nghị] là viết kịch bản đơn giản, nhưng điều này dẫn đến một số vấn đề. Thứ nhất, nếu một tập lệnh xác định hình ảnh nào sẽ tải xuống, nhưng chính tập lệnh đó lại được tải sau khi các hình ảnh được chỉ định trong HTML đã được tải xuống, thì bạn có khả năng nhận được hai hình ảnh đã tải xuống. Thứ hai, nếu bạn không chỉ định bất kỳ hình ảnh nào trong HTML và chỉ muốn tải hình ảnh như được xác định bởi tập lệnh, bạn sẽ không có hình ảnh nào cho các trình duyệt đã tắt tập lệnh
Do đó, chúng ta cần một cách tốt hơn để xử lý các hình ảnh phản hồi. Và may mắn thay, có. Cách được khuyến nghị là sử dụng
- thuộc tính
0 - thuộc tính
2 - phần tử
3
Hãy tìm hiểu sâu hơn một chút
Thuộc tính
0
Trước khi chúng tôi khám phá cách sử dụng thực sự của
Tỷ lệ thiết bị-pixel
Tỷ lệ thiết bị-pixel là số pixel thiết bị trên mỗi pixel CSS. Hai điều kiện chính góp phần vào tỷ lệ thiết bị-pixel
- Mật độ pixel của thiết bị [số pixel vật lý trên mỗi inch]. Một thiết bị có độ phân giải cao sẽ có mật độ pixel cao hơn và do đó, với cùng mức thu phóng, nó sẽ có tỷ lệ pixel trên thiết bị cao hơn so với thiết bị có độ phân giải thấp hơn. Ví dụ. Điện thoại Lumia 950 cao cấp sẽ có độ phân giải cao hơn điện thoại Lumia 630 bình dân và do đó, điện thoại này sẽ có tỷ lệ pixel trên thiết bị cao hơn cho cùng mức thu phóng
- Mức thu phóng của trình duyệt. Đối với cùng một thiết bị, mức thu phóng cao hơn có nghĩa là số pixel thiết bị trên mỗi pixel CSS nhiều hơn và do đó tỷ lệ pixel thiết bị cao hơn. Ví dụ, xem xét con số này. Khi bạn phóng to trình duyệt của mình [Ctrl + Plus], số pixel CSS cho div của bạn vẫn giữ nguyên, nhưng số pixel thiết bị mà nó chiếm giữ tăng lên. Vì vậy, bạn có số pixel thiết bị trên mỗi pixel CSS cao hơn.
Khi bạn muốn hiển thị các hình ảnh riêng biệt [hoặc thường là một nội dung riêng biệt của cùng một hình ảnh] dựa trên tỷ lệ thiết bị-pixel, bạn sẽ sử dụng triển khai cơ bản
function ta_customize_thumbnail_sizes[$sizes] {
unset[$sizes['medium_large']]; // 768px return $sizes;
}
add_filter['intermediate_image_sizes_advanced', 'ta_customize_thumbnail_sizes'];0Bộ mô tả
- đối với tỷ lệ thiết bị-pixel là 1, kim không gian hình ảnh. jpg sẽ được sử dụng
- đối với tỷ lệ thiết bị-pixel là 2, không gian hình ảnh-kim-2x. jpg sẽ được sử dụng
- đối với tỷ lệ thiết bị-pixel là 3, không gian hình ảnh-kim-hd. jpg sẽ được sử dụng
Thuộc tính
Điều này hoạt động tốt. Sử dụng bộ mô tả
Bây giờ, giả sử chúng ta muốn một hình ảnh có kích thước [chiều cao, chiều rộng] khác trên khung nhìn lớn hơn hoặc nhỏ hơn. Đây là nơi mà
function ta_customize_thumbnail_sizes[$sizes] {
unset[$sizes['medium_large']]; // 768px return $sizes;
}
add_filter['intermediate_image_sizes_advanced', 'ta_customize_thumbnail_sizes'];62 trong - w mô tả. Điều này mô tả chiều rộng của hình ảnh được tham chiếu. Hãy xem xét ví dụ này.
- Điều này đề cập rằng chiều rộng của hình ảnh đầu tiên là 200px, hình ảnh thứ hai là 400px và hình ảnh thứ ba là 600px. Ngoài ra, nếu màn hình của người dùng rộng 150 pixel CSS, thì điều này tương đương với điều sau đây về
function ta_customize_thumbnail_sizes[$sizes] { unset[$sizes['medium_large']]; // 768px return $sizes; } add_filter['intermediate_image_sizes_advanced', 'ta_customize_thumbnail_sizes'];65.function ta_customize_thumbnail_sizes[$sizes] { unset[$sizes['medium_large']]; // 768px return $sizes; } add_filter['intermediate_image_sizes_advanced', 'ta_customize_thumbnail_sizes'];6[Hãy nhớ rằng, tỷ lệ pixel của thiết bị chỉ là số pixel của thiết bị/pixel CSS. ]
Thuộc tính
2
Việc triển khai thực tế khi bạn muốn một hình ảnh có kích thước khác [chiều cao, chiều rộng khác nhau] trên các kích thước màn hình khác nhau được thực hiện bằng cách sử dụng thuộc tính
function ta_customize_thumbnail_sizes[$sizes] {
unset[$sizes['medium_large']]; // 768px return $sizes;
}
add_filter['intermediate_image_sizes_advanced', 'ta_customize_thumbnail_sizes'];62 của ví dụ 1
Giả sử bạn muốn hình ảnh được xem bằng một nửa chiều rộng của khung nhìn. Bạn sẽ gõ
function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];6Bây giờ trình duyệt sẽ quyết định hình ảnh nào sẽ tải xuống dựa trên chiều rộng của trình duyệt và tỷ lệ pixel của thiết bị. Ví dụ
- Nếu chiều rộng của trình duyệt là 500 pixel CSS, hình ảnh sẽ được hiển thị rộng 250px [vì 50vw]. Bây giờ, điều này tương đương với việc chỉ định.
function remove_max_srcset_image_width[ $max_width ] { return false; } add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ]; function wdo_disable_srcset[ $sources ] { return false; } add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];7 - Vì vậy, đối với 1. 5x,
function remove_max_srcset_image_width[ $max_width ] { return false; } add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ]; function wdo_disable_srcset[ $sources ] { return false; } add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];60 sẽ được trình duyệt tải xuống vì trình duyệt này cho tỷ lệ pixel của thiết bị là 1. 6x [phù hợp nhất với 1. màn hình 5x]
ví dụ 2
Bạn muốn hình ảnh được hiển thị bằng một nửa chiều rộng khung nhìn khi chiều rộng khung nhìn lớn hơn 40em, nhưng hình ảnh phải chiếm toàn bộ chiều rộng khi chiều rộng khung nhìn nhỏ hơn hoặc bằng 40em. Đây là cách bạn sẽ tiếp cận nó
function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];9Điều này rất giống với truy vấn phương tiện. Vì vậy, đối với chế độ xem có chiều rộng
function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];61, thì giá trị của function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];62 là đúng, có nghĩa là function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];63, tức là hình ảnh rộng bằng chế độ xem. Nếu chế độ xem là cửa sổ trình duyệt và nếu chiều rộng trình duyệt là 500 pixel CSS, hình ảnh sẽ được hiển thị rộng 500px. Điều này tương đương với việc chỉ địnhTương tự như trên, trình duyệt sẽ quyết định chọn hình ảnh nào ở trên để hiển thị cụ thể
Đối với chế độ xem có chiều rộng
function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];64, giá trị của function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];62 là sai, có nghĩa là function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];66, nghĩa là hình ảnh rộng bằng một nửa chế độ xemPhần tử tiếp theo chúng ta sẽ thấy là phần tử
Giải pháp cho ‘?’ là phần tử
Phần tử
3
Như chúng ta đã thấy ở trên, phần tử
Phần tử
function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];75 đầu tiên có truy vấn phương tiện của thuộc tính function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];76 là true được chọn. Vì vậy, nếu chiều rộng tối đa của khung nhìn là
function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];77, nguồn hình ảnh tương ứng được chọn từ thư mục function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];78, dựa trên tỷ lệ thiết bị-pixel. Tất cả hình ảnh trong một Bản thân phần tử
function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];75 trong phần tử function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];75 phải chứa thuộc tính function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];76 và function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];97. Cần thêm phần tử function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];98 vào trong function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];98. Tất cả các phần tử function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];75 trong phần tử Bạn cũng có thể thực hiện lựa chọn hình ảnh dựa trên định dạng hình ảnh được trình duyệt hỗ trợ. Điều này đặc biệt hữu ích khi tiết kiệm đáng kể kích thước hình ảnh chỉ dựa trên định dạng. Ví dụ: JPEG-XR, một định dạng hình ảnh hiệu quả, thường chiếm ít kích thước hình ảnh hơn so với JPG, được hỗ trợ bởi Microsoft Edge và IE9+. Sử dụng thuộc tính
function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];97 trong phần tử function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];75, bạn có thể kiểm tra định dạng nàyKhi nó được sử dụng, cả hai thuộc tính. Thuộc tính
function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];76 và thuộc tính function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];97 phải phân giải thành true để phần tử function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];75 đó được chọn. Nếu trình duyệt không thể hiểu bất kỳ định dạng nào, nó sẽ quay trở lại function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];98Để tất cả chúng cùng nhau
Sau khi hiểu cách hình ảnh phản hồi hoạt động, hãy xem một ví dụ hoàn chỉnh sử dụng cả ba cùng nhau –
Trong ví dụ này, chúng tôi đã sử dụng
function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];75. Cái đầu tiên được chọn nếu chiều rộng tối đa là 700px. Nếu điều này được chọn, thì thuộc tính function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];75 đầu tiên], thì hình ảnh sẽ chỉ chiếm 1/10 của khung nhìnTương tự, phần tử
function remove_max_srcset_image_width[ $max_width ] {
return false;
}
add_filter[ 'max_srcset_image_width', 'remove_max_srcset_image_width' ];
function wdo_disable_srcset[ $sources ] {
return false;
}
add_filter[ 'wp_calculate_image_srcset', 'wdo_disable_srcset' ];75 thứ hai được chọn nếu chiều rộng tối đa là 1400px [có nghĩa là bây giờ chiều rộng nằm trong khoảng từ 701px đến 1400px]. Thuộc tính [Xin lưu ý rằng tất cả các nguồn hình ảnh và chiều rộng hình ảnh được đặt ở đây chỉ dành cho bản demo và như bạn có thể thấy, tôi tạo ra một số hình người que ngộ nghĩnh. ]
Chiều rộng khung nhìn được đặt trong khoảng từ 1001px đến 1400px. chiều rộng hình ảnh bằng một nửa chiều rộng khung nhìn [Nguồn hình ảnh đang được sử dụng là hình que. png]
Chiều rộng khung nhìn được đặt trong khoảng từ 701px đến 1000px. chiều rộng hình ảnh giống như chiều rộng khung nhìn. [Nguồn ảnh được sử dụng là stick-figure. png]
Chiều rộng khung nhìn được đặt trong khoảng từ 501px đến 700px. Chiều rộng hình ảnh là 1/10 chiều rộng khung nhìn. [Nguồn ảnh đang được sử dụng là stick-figure-narrow. png]
Chiều rộng khung nhìn được đặt trong khoảng từ 0px đến 500px. Chiều rộng hình ảnh bằng một nửa chiều rộng khung nhìn. [Nguồn ảnh đang được sử dụng là stick-figure-narrow. png]
Và chúng tôi gần như đã hoàn thành
Hình ảnh đáp ứng cung cấp cho bạn, nhà phát triển, một tùy chọn để mang lại trải nghiệm tốt nhất cho người dùng của bạn trên nhiều thiết bị mà họ sử dụng để xem trang web của bạn. Đây là thời điểm tốt để bắt đầu tích hợp nó vào trang web của bạn nếu bạn chưa có
Tôi hy vọng bạn đã vui vẻ đọc này. Liên hệ với tôi trên Twitter nếu bạn muốn thảo luận thêm
Thực hành nhiều hơn với phát triển web
Bài viết này là một phần của loạt bài phát triển web từ các nhà truyền bá công nghệ của Microsoft về việc học JavaScript thực tế, các dự án mã nguồn mở và các phương pháp hay nhất về khả năng tương tác bao gồm trình duyệt Microsoft Edge và công cụ kết xuất EdgeHTML mới
Chúng tôi khuyến khích bạn thử nghiệm trên các trình duyệt và thiết bị bao gồm Microsoft Edge – trình duyệt mặc định cho Windows 10 – bằng các công cụ miễn phí trên dev. hiện đại. I E
- Quét trang web của bạn để tìm các thư viện lỗi thời, các vấn đề về bố cục và khả năng truy cập
- Sử dụng máy ảo cho Mac, Linux và Windows
- Kiểm tra từ xa cho Microsoft Edge trên thiết bị của chính bạn
- Phòng thí nghiệm mã hóa trên GitHub. Thử nghiệm trên nhiều trình duyệt và các phương pháp hay nhất
Học chuyên sâu về công nghệ trên Microsoft Edge và Nền tảng web từ các kỹ sư và nhà truyền giáo của chúng tôi
- Microsoft Edge Web Summit 2015 [điều gì sẽ xảy ra với trình duyệt mới, các tiêu chuẩn nền tảng web mới được hỗ trợ và diễn giả khách mời từ cộng đồng JavaScript]
- Ồ, tôi có thể kiểm tra Edge và IE trên Mac & Linux. [từ Rey Bango]
- Nâng cao JavaScript mà không phá vỡ trang web [từ Christian Heilmann]
- Edge Rendering Engine giúp Web hoạt động bình thường [từ Jacob Rossi]
- Giải phóng kết xuất 3D với WebGL [từ David Catuhe bao gồm cả vorlon. JS và các dự án babylonJS]
- Các ứng dụng web được lưu trữ và đổi mới nền tảng web [từ Kevin Hill và Kiril Seksenov bao gồm cả đa tạp. dự án JS]
Nhiều công cụ và tài nguyên đa nền tảng miễn phí khác cho Nền tảng web
- Visual Studio Code cho Linux, MacOS và Windows
- Mã với nút. JS và bản dùng thử miễn phí trên Azure
Chia sẻ bài viết này
Saurabh Kirtani
Với tư cách là Người truyền bá công nghệ tại Microsoft, Saurabh Kirtani thích giúp các nhà phát triển tiếp cận với nhiều công nghệ khác nhau. Anh ấy đã làm việc chủ yếu trong lĩnh vực phát triển web [JavaScript, HTML/CSS3, RWD, MVC], các giải pháp dựa trên IoT, Azure và cả về phát triển trò chơi của Unity. Anh ấy đã là một diễn giả tích cực tại các hội nghị và trại dành cho nhà phát triển khác nhau. Ngoài công nghệ, anh ấy thích đi du lịch, theo dõi môn cricket, xem các chương trình truyền hình hài/hồi hộp và dành thời gian cho Quora