sách gpt4 ai đã đi

html - 结合 HiDPI 监视器了解 srcset 和大小

In lại 作者:行者123 更新时间:2023-12-05 01:00:32 27 4
mua khóa gpt4 Nike

我接触 CSS 已经有一段时间了,但是图像元素的 srcsetsizes 让我很困惑。这是我认为可行的示例。

Background image flowers
srcset="img/flowers-480.jpg 480w,
img/flowers-480@2x.jpg 480w 2x,
img/flowers-768.jpg 768w,
img/flowers-768@2x.jpg 768w 2x,
img/flowers-960.jpg 960w,
img/flowers-960@2x.jpg 960w 2x,
img/flowers-1280.jpg 1280w,
img/flowers-1280@2x.jpg 1280w 2x"
sizes="(max-width: 1279px) 100vw,
(min-width: 1280) 1280px"
src="img/flowers-960.jpg">

我们的想法是让图像占视口(viewport)的 100%,直到视口(viewport)宽 1280 像素或更宽,然后图像将固定大小。但是,为了补偿更高 DPI 的设备,我认为建议添加 DPI 描述符(1.5x、2x 等),如建议 đâyđây .

我认为上面的代码会做的是:

  • 检查尺寸,查看图像的预期尺寸(如果给出了相对单位,例如 % 或 vw,则计算像素宽度)
  • 在 srcset 宽度中找到最接近该宽度的图像
  • 从这些图像中,过滤掉 DPI 描述符最接近设备 DPI 的图像

但是,当我将其通过验证器时,我收到以下错误:

Lỗi: Bad value for attribute srcset on element img: Width for image img/flowers-480@2x.jpg is identical to width for image img/flowers-480.jpg

很明显,我完全忽略了 srcset 和 sizes 的工作原理。我做错了什么?

1 Câu trả lời

定义见 MDN :

Each string is composed of:

a URL to an image, optionally, whitespace followed by one of:

  • a width descriptor, or a positive integer directly followed by 'w'. The width descriptor is divided by the source size given in the sizes attribute to calculate the effective pixel density.
  • a pixel density descriptor, which is a positive floating point number directly followed by 'x'.

你试图同时使用两者,这是非法的。

关于html - 结合 HiDPI 监视器了解 srcset 和大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49174465/

27 4 0
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com