在网页中的 div 中使用 REM 单位

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

我将该页面包含到我的其他网页中 假设outer.php包含inner.php。

这里，inner.php 使用 html font-size 作为断点。 喜欢

@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 标签？

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; 根据您需要的 div 使用它

这只是以 px 为单位声明单位。？

html {
     font-size:12px;
  }

EDIT :

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

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

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

:root也就是说，您的 html 元素将获得此 font-size 属性，从而对整个页面进行更改。

如果你有px在您的媒体查询中，您的根元素字体大小是什么并不重要。

如果你有em作为媒体查询中的单位，那么它继承自其父级。

如果你有rem作为媒体查询中的单位，那么它继承自其根元素。

Fiddle Link http://jsfiddle.net/Z74f7/1/

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