在网页中为div使用REM单位 [英] Using REM units for a div in a web page

问题描述

我有一个页面，该页面使用REM单位进行媒体查询.说inner.php

我将该页面包含到其他页面中说external.php包含inner.php.

在这里，inner.php使用html字体大小作为断点.喜欢

  @media全部和(最大宽度:1024px){html{font-size:12px;}} 

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

  @media全部和(最大宽度:1024px){div#divId{font-size:12px;}} 

我尝试用我的div ID替换所有html标签css.但这不起作用吗?知道我该怎么做吗?

如何使div代替html标签成为根元素?

解决方案

Rem值是可实现的.像这样的东西.

  html {字体大小:62.5％;}正文{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 =根em.全名可能是相对于根的em.那是因为它是相对于根的.此处的根是html元素(我认为您无法更改)，而不是像普通em那样的直接父级.

如果您的样式表中有此标签.

 :root {字体大小:calc(100vw/40);} 

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

如果您的媒体查询中包含 px ，则根本与您的根元素字体大小无关.

如果您在媒体查询中以 em 为单位，则它是从其父级继承的.

如果您在媒体查询中以 rem 作为单位，那么它将从其根元素继承.

提琴手链接

可以说明所有三种字体大小.

因此，如果要更改inner.php中的所有字体大小.找到ininner.php和external.php的字体大小的比例，然后将所有inner.php字体大小除以那个(相当多的更改).或使用javascript进行除法以获取该inner.php容器中的字体大小，并相应地对其进行分割(几行).

I have a page which uses REM units with media queries. say inner.php

I am including that page into my other webpage say outer.php contains the inner.php.

Here inner.php uses the html font-size for the break points. like

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

How can i change the behaviour of this by making my div as the root font-size instead of html tag.

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

I tried replacing all html tag css with my div id. But it's not working? Any idea how can i do this?

How can i make div as root element instead of html tag?

解决方案

Rem values are realtive. something like this.

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

by default u have 1rem =16px;

with the above declaration you get (16*62.5)/100 which gives you 1 rem = 10px; use it accordingly for the div you need

this is just declaring units in px.?

html {
     font-size:12px;
  }

EDIT :

REM = root em.The full name should probably be the root-relative em. That is because it is relative to the root. The root here is the html element(i don't think you can change that) and not the direct parent like the normal em.

If you have this in your stylesheet.

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

:root that is your html element will get this font-size property making changes for the whole page.

If you have px in your media queries it dosent matter what your root element font-size is.

If you have em as units in your media queries then it inherits from its parent.

If you have rem as units in your media queries then it inherits from its root element.

Fiddle Link

to expalin all three font-sizes.

So if you want to change all the font-sizes in you inner.php. find the ratio of font-sizes ininner.php and outer.php and divide all your inner.php font-sizes with that(quite a few changes). or use javascript and divide to get the font-sizes in that inner.php container and divide them(few lines) accordingly.

这篇关于在网页中为div使用REM单位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！