CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css3 – Safari在使用@media(宽度/高度/背景大小)缩放时不计算rem单位是否正确大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在CSS中使用rem作为单位时,缩放在Safari(PC和Mac)中都不起作用.

示例位于http://jsfiddle.net/L25Pz/3/

标记:

<div>
    <img src="http://www.google.com/images/srpr/logo3w.png" />
    <p>Lorem ipsum dolor sit amet</p>
</div>

CSS:

html { font-size:62.5% }

div { background:url(http://www.google.com/images/srpr/logo3w.png); background-size:275px 95px; background-size:27.5rem 9.5rem; background-repeat:no-repeat; }
img { width:27.5rem; height:9.5rem; }
p { font-size:5rem; }

@media only screen and (max-width: 500px) {
    html { font-size:50%;} /* should render everything * 0.8 */
}

…当浏览器窗口宽度超过600px时,在所有浏览器中呈现大小为275px * 95px的图像.此外,在触发媒体查询时,图像和背景会将其宽度和高度调整为220px * 76px.

但是 – 使用Safari,宽度和高度设置为247px * 75px.哪个不是* 0.8,这是别的……

另一方面,段落的字体大小正确呈现:挂钩查询时为40px.

如果你问我,我会感到很奇怪.
有人有解决方案吗?

解决方法

您需要将-webkit-text-size-adjust设置为none,否则webkit会将字体大小扩展为可读大小:
@media only screen and (max-width: 500px) {
    html { font-size:50%; -webkit-text-size-adjust:none; }  /* should render everything * 0.8 */  
}

大佬总结

以上是大佬教程为你收集整理的css3 – Safari在使用@media(宽度/高度/背景大小)缩放时不计算rem单位是否正确全部内容,希望文章能够帮你解决css3 – Safari在使用@media(宽度/高度/背景大小)缩放时不计算rem单位是否正确所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: