Using REM units for a div in a web page

问题

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?

回答1:

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.

回答2:

Sadly html is always root.

You could set a px value on #divId and have the children sized with em. This way you can override html font size with a new value:

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

Example: http://jsbin.com/xizov/1

回答3:

The following sets the ‘font-size’ so that exactly 40em fits within the viewport, ensuring that roughly the same amount of text always fills the screen no matter the screen size.

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

If the rest of the design is specified using the ‘rem’ unit, the entire layout will scale to match the viewport width.

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

来源：https://stackoverflow.com/questions/24529211/using-rem-units-for-a-div-in-a-web-page

标签

css3

responsive-design