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

问题描述 投票：0回答：4

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

我将该页面包含到我的其他网页中 说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标签？

css responsive-design
4个回答
4
投票

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;
  }

编辑：

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

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

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


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

如果您的媒体查询中有

px
，那么您的根元素字体大小是什么并不重要。

如果您的媒体查询中使用 

em
作为单位，那么它会继承自其父级。

如果您的媒体查询中使用 

rem
作为单位，那么它会继承自其根元素。

拨弄链接

来解释所有三种字体大小。

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

1
投票

可悲的是

html
始终是root。

您可以在 

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

0
投票

以下内容设置“字体大小”，使 40em 正好适合视口，确保无论屏幕大小如何，大致相同数量的文本始终填充屏幕。

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

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

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

0
投票

虽然 REM 单位始终相对于 :root （即 html 元素），但您可以通过使用 calc 和 css 变量来模拟 REM 行为，如下所示：

:root{
  font-size: 20px; /* this is what rem will be based on */
}

.rem-based-font-size{
  font-size: 2rem; /* will equal 40px */
  width: 12rem; /* will equal 240px */
  background: yellow;
}
.my-desired-root{
  --my-font-size: 30px;
  font-size: calc(2 * var(--my-font-size));  /* will equal 60px */
  width: calc(12 * var(--my-font-size)); /* will equal 360px */
  background: red;
}
<html>
  <head></head>
  <body>
    <div class="rem-based-font-size">Sample text</div>
    <div class="my-desired-root">Sample text</div>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.