gpt4 book ai didi

html - 响应式图像如何与 `em` 中作为长度提供的 `sizes` 一起使用?

转载 作者:搜寻专家 更新时间:2023-10-31 08:28:21 25 4
gpt4 key购买 nike

浏览器如何理解 em在响应式图像中使用时的单位?

<img alt="A giraffe" src="giraffe.jpg"
srcset="giraffe@1.5x.jpg 600w, giraffe@2x.jpg 800w, [etc.]"
sizes="(max-width: 40em) 40em">

此验证有效,我没有在浏览器控制台中看到警告。但是如果图像预加载器的全部目的是在 下载和解析 CSS 之前获取图像,那么浏览器使用什么来进行 em

它只是它的默认值吗 font-size它适用于 <html> ?我应该使用 rem 吗?为了清楚起见?用户缩放时两者有区别吗?

这不是理论;我是 using em in my media query breakpoints , 并且一些图像受到容器大小的限制以实现最佳行长度(当然是 using em )。

我检查了规范,但它对新的响应式图像功能非常简洁。

最佳答案

我让官方 W3C#respimg 聊天室里的人耳目一新,并且 this is what they had to say :

<Tigt> Pardon me folks, I had a question about how em is interpreted when used inside sizes
<TabAtkins> Tigt: Same as in Media Queries - they're relative to the initial font size.
<TabAtkins> (Not the font size on <html>, the initial font size, as set by the user's personal settings.)


<Wilto> 16px almost everywhere, so long as you haven’t changed the font-size of html.
<TabAtkins> Tigt: rem is treated identical to em here.

所以速读是:

  • sizes 或媒体查询中使用时,emrem 都指定表示“用户的默认 font-size
  • 控制图像在页面上布局方式的实际 emrem 如果您的 CSS 更改它,最终可能会有所不同
  • 这意味着如果他们想给图像预加载器提供真实信息,就改变em的默认大小

W3C Media Queries :

This media query expresses that style sheet is usable on screen and handheld devices if the width of the viewport is greater than 20em.

 @media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

The ‘em’ value is relative to the initial value of ‘font-size’.

关于html - 响应式图像如何与 `em` 中作为长度提供的 `sizes` 一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30653280/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com