Question

我有一个页面使用REM单位和媒体查询。比如inner.php

我将该页面包含在我的其他网页中 say outer.php包含inner.php。

这里inner.php使用html字体大小作为断点。像

@media all and (max-width:1024px)
{
  html
   {
     font-size:12px;
  }
}

如何通过将div作为根字体大小而不是html标记来更改此行为。

@media all and (max-width:1024px)
{
  div#divId
   {
     font-size:12px;
  }
}

我尝试用我的div id替换所有html标签css。但它不起作用？知道我该怎么办？

如何将div作为根元素而不是html标记？

Answer 1

Rem值是实际的。像这样的东西。

 html { font-size: 62.5%; } 
 body { font-size: 1.4rem; } /* =14px */
 h1   { font-size: 2.4rem; } /* =24px */

默认情况下你有1rem =16px;

通过上述声明，您获得(16*62.5)/100，其中包含1 rem = 10px; 根据需要使用它

这只是在px中声明单位。？

html {
     font-size:12px;
  }

编辑：

REM = root em。全名应该是root-relative em。那是因为它相对于根。这里的根是html元素（我不认为你可以改变它）而不是像普通em一样的直接父母。

如果你的样式表中有这个。

:root {
    font-size: calc(100vw / 40);
}

:root这是你的html元素会让这个font-size属性对整个页面进行更改。

如果您的媒体查询中有px，那么您的根元素字体大小就足够了。

如果您在媒体查询中以em为单位，那么它将从其父级继承。

如果您在媒体查询中以rem为单位，则它会从其根元素继承。

小提琴Link

以表示所有三种字体大小。

因此，如果您想更改inner.php中的所有字体大小。找到ininner.php和outer.php中font-sizes的比例，并将所有inner.php字体大小除以（相当多的变化）。或者使用javascript并除以获取该inner.php容器中的字体大小并相应地划分它们（几行）。

Answer 2

可悲的是html始终是根。

您可以在px上设置#divId值，并让子项的大小为em。这样，您可以使用新值覆盖html字体大小：

html {
  font-size: 12px;
}
p {
  font-size: 1rem;
}
#divId {
  font-size: 12px;
}
#divId p {
  font-size: 1em;
}

@media (min-width:200px) {
  html {
    font-size: 20px;
  }
  #divId {
    font-size: 10px;
  }
}

示例：http://jsbin.com/xizov/1

Answer 3

以下设置'font-size'，以便恰好40em适合视口，确保无论屏幕大小如何，大致相同数量的文本总是填满屏幕。

:root #divName{
    font-size: calc(100vw / 40);
}

如果使用'rem'单位指定设计的其余部分，则整个布局将缩放以匹配视口宽度。

来源：[http://www.w3.org/TR/css3-values/#rem-unit][1]

在网页中使用REM单位作为div

3 个答案:

编辑：

小提琴Link