如何计算基于EM的媒体查询 [英] How to work out EM based media query

问题描述

我正在尝试弄清如何在最新项目中使用EM媒体查询.但是，经过一些测试后，我发现媒体查询的状态稍微有些差了，我不知道为什么.它可能与使用父字体大小而不是正文有关.我的身体设置为14px，并且工作方式如下:

I'm trying to work out how to use EM media queries in my latest project. However after some testing I've found that the media queries are ever so slightly off and I can't work out why. It might have something to do with it using the parents font size instead of the body. My body is set to 14px and my workings out look like:

$break-small: 22.8571em; //320px
$break-smallish: 40em; //560px
$break-med: 54.8571em; //768px
$break-medish: 68.5714em; //960px
$break-desk: 73.1428em; //1024px

主体字体大小:

body{
    font-size: 14px;
    line-height: 1.5;
    min-height: 100%;
}

*(来自我的SCSS断点变量)据我了解，我做的是:768/14(基本字体大小)= em的宽度

*(from my SCSS breakpoint variables) From what I understand I did: 768 / 14 (base font size) = width in em's

说我有一个div称为标头，此div上没有设置font-size，只有此div的子代.当然可以使用主体font-size​​吗?

Say I've a div called header, there is no font-size set on this div, only children of this div. Surely it would still then use the body font-size?

推荐答案

媒体查询中的em决不会基于body的字体大小或与此相关的任何其他元素.它们始终引用用户在浏览器首选项中设置的默认字体大小.在大多数浏览器中，此默认字体大小约为16px，而在CSS中，它对应于font-size属性的初始值medium.从规范:

Ems in media queries are never based on the font size of body, or any other element for that matter. They always refer to the default font size set by the user in the browser preferences. In most browsers this default font size is around 16px, and in CSS this corresponds to the initial value of the font-size property which is medium. From the spec:

媒体查询中的相对单位基于初始值，这意味着单位永远不会基于声明的结果.例如，在HTML中，"em"单位相对于"font-size"的初始值.

Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’.

此相同的默认字体大小由根元素继承，即html，不是 body(请参阅

This same default font size is inherited by the root element, which is html, not body (see here). Specifying a relative font size on body just means body bases its own calculation on the computed font size of html. This being stated, note that setting font-size on html will not affect how ems are calculated in media queries either.

这篇关于如何计算基于EM的媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！