Html 响应图像如何与以“大小”为长度提供的“em”配合使用?
在响应图像中使用时,浏览器如何理解Html 响应图像如何与以“大小”为长度提供的“em”配合使用?,html,image,responsive-design,em,srcset,Html,Image,Responsive Design,Em,Srcset,在响应图像中使用时,浏览器如何理解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使用什么呢 它是否只是应用
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
使用什么呢
它是否只是应用于
的默认字体大小?为了清晰起见,我应该使用rem
?当用户缩放时,两者之间是否存在差异
这不是理论上的;我是,有些图像受到容器的约束,容器的大小适合于最佳的行长度(,当然)
我检查了规格,但它在新的响应图像功能上非常简洁
5.1.1. 字体相对长度:“em”、“ex”、“ch”、“rem”单位
除了“rem”(指根元素的字体大小)之外,字体相对长度指的是使用它们的元素的字体度量。例外情况是,当它们出现在“font size”属性本身的值中时,在这种情况下,它们指的是父元素的计算字体度量(或与“font”属性的初始值相对应的计算字体度量,如果该元素没有父元素)
电磁单元
等于所使用元素的“font size”属性的计算值。
em
css单位等于当前元素的字体大小。继承字体大小
属性。因此,元素(img
在本例中)的大小将根据font-size
属性的40倍来确定。如果用户缩放页面(增加字体大小),则em
单元将自动更新为font-size
属性的更新
基本字体大小将由浏览器决定,如果浏览器在mac上的windows上运行,且用户未更改字体大小,则基本字体大小将为16px(通常)。在Linux、BSD或任何其他系统上,字体大小将由桌面环境设置,并且可能会有所不同
因此,保守地说,你可以假设字体大小为16px,但在很多情况下,你可能是错的。我在W3C响应聊天室里弯了弯那些家伙的耳朵,然后:
恕我直言,各位,我有一个问题,关于em
在size
Tigt:与媒体查询相同-它们与初始字体大小有关。
(不是上的字体大小,而是由用户个人设置的初始字体大小。)
只要您没有更改html
的font size
,16px几乎无处不在
Tigt:rem在这里的处理方式与em相同
因此,读取速度为:
- 在
size
或媒体查询中使用时,em
和rem
都指定为“用户默认的字体大小
”
- 如果CSS对图像进行更改,控制图像在页面上的布局方式的实际
em
或rem
,结果可能会有所不同
- 这意味着,如果要向图像预加载程序提供真实信息,则不应更改默认大小
em
:
此媒体查询表示,如果视口的宽度大于20em,则样式表在屏幕和手持设备上可用
@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }
“em”值相对于“font size”的初始值
是的,但是浏览器预加载程序在没有CSS通知em
结果是什么的情况下做了什么?哦,当然,我理解图像最终的大小。但是当浏览器预加载程序必须猜测图像的大小时,只考虑size
属性,并且没有一个CSS没有被处理成render tree,是否有一个特定的值用于em
?您是否有一个测试用例用于检查不同浏览器和根字体大小设置的计算值?@humble.rumble:看来您还没有理解具体的问题。如果您不理解,Mac和Windows上Safari/Chrome/Firefox甚至IE的默认字体大小是16px不要在配置中更改它。这对我来说很粗糙,因为我正在将html
的font size
设置为更大的窗口大小,以便放大所有内容:(你说“不应该更改em
的默认大小”是什么意思?你是指在浏览器的首选项中,还是通过设置html{font size:…}
?@Flimm类似于html{font-size:16px}
,是(自)