更改字体大小不影响@media查询

我在具有更改字体大小不影响@media查询

html { 
    font-size: 62.5%; 
}

页的工作这意味着的1rem = 10px代替1rem = 16px到目前为止，一切都很好。

问题是它不影响@media queries。

/* 
it should change at 600px and not 960px. 
the @media ignores the 62.5%; 
*/ 
@media (min-width: 60rem) { 
    .el { 
     background: blue; 
    } 
}

检查此codepen看到的问题。

http://codepen.io/sandrina-p/pen/bqGZjE

我视网膜显示器上进行测试，与Chrome和Firefox。在Safari上，问题不会发生。

任何解决方案？

来源

2017-02-24 sandrina-p

它正在处理960px。在Windows铬1920年决议。我已将浏览器大小调整为960像素，并且正常工作。 – locateganesh

我希望它改变在600px，而不是960px，因为字体大小是62.5％ –

我发现了这个问题。在@media中，您需要使用em，它会始终读取默认浏览器大小，忽略您的自定义font-size。 rem也不会发生这种情况。因此，在这种情况下，您需要设置37.5em（600/16），并且它会在包括safari在内的每个浏览器中将600px更改为600px。

https://zellwk.com/blog/media-query-units/

（...）跨所有四个浏览器进行一致的唯一单位是em。除了在Safari上发现的错误，em和rem之间没有任何区别。（...）不幸的是，在第三个实验中，px媒体查询仍然保持在400px，如果您打算支持更改浏览器字体大小值的用户，则该操作将不成功。因此，我在这些实验后的结论是：使用em媒体查询。

@media screen and (max-width: 37.5em) { 
    .el { 
     background: blue; 
    } 
}

来源

2017-02-24 11:02:46

是的，我也只是在mac safari媒体查询中发现了使用'rem'只是没有反映和'em'和'rem'好的研究真的很好。 – locateganesh

-1

试试这个

<div class="el"> 
    hey there 
</div> 

// =========== basic template =========== // 
$safeArea: 1rem; 
body { 
    font-family: sans-serif; 
} 

// ======== actual codepen code ========= // 

html { 
    font-size: 62.5%; 
} 

.el { 
    background: red; 
    font-size: 1.6rem; 
} 

/* it should change at 600 px and not 960px. 
the @media ignores the 62.5%; 
*/ 
@media screen and (max-width: 60rem) { 
    .el { 
     background: blue; 
    } 
}

看到这个codepen - http://codepen.io/anon/pen/aJbxOQ

来源

2017-02-24 10:42:29 grinmax

嗯，nop，它仍然在960px更改，我想改变它在600px –

不是，它不会与你htmlfont-size或您.elfont-size做任何事情。因为1rem是16px。所以你必须按照16px来计算它。

@media (min-width: 37.5rem) { 
    .el { 
     background: blue; 
    } 
}

这将是您的600px媒体查询中断。

来源

2017-02-24 10:51:56 locateganesh

Nop，这样，如果你打开safari上的codepen，它将渲染375px而不是600px，因为safari可以读取62.5％。 –

我想，你不应该用codepen制作的代码来测试它。只需创建一个本地文件并添加元视口''并测试它。 – locateganesh

更改字体大小不影响@media查询

回答

相关问题