Convert from pixels to em
The conversion for that from Stylus to Less is fairly straight-forward. The equivalent Less code would be as follows:
@base_font_size: 16;
@base_font_size_ems: unit(@base_font_size / 16, em);
@px: unit(1 / @base_font_size, rem);
@px_em: unit(1 / @base_font_size, em);
.button{
font-size: 16 * @px;
border-radius: 3 * @px solid #000;
}
Note that the above is just a direct conversion of your code in question and would currently always result in same value for both em
and rem
. However em
and rem
would generally be same only if the root font size and the parent's font size are the same. Check here for more information about em
and rem
.
The below snippet is a revised version where we have a separate mixin for doing the px to em/rem conversion. Here we set the root font size in a variable (global scope) and then we set the parent font size within each selector block (local scope) and is passed as an argument to the mixin. Based on these, the rem and em values are output as appropriate.
@root_font_size: 32;
.rem_em_px_conversion(@parent_font_size: 32){
@px_rem: unit(1 / @root_font_size, rem);
@px_em: unit(1 / @parent_font_size, em);
}
.div{
.rem_em_px_conversion();
font-size: 16 * @px_em; /* change to 16 * @px_rem for converting to rem */
border-radius: 4 * @px_em solid #000;
.button{
@parent_font_size: 16; /* this is same as parent div font size */
.rem_em_px_conversion(@parent_font_size);
font-size: 16 * @px_em;
border-radius: 4 * @px_em solid #000;
}
}
Converting px to em - text becomes smaller than original
First of all let me say that EM is used locally and REM is used globally what do i mean with that?
Rem uses the html tag font-size so if:
html {
font-size: 16px;
}
Then the 1 rem
is equal to 16px
On the other hand when you use em
you need to be context aware, meaning that if the parent container of the text element got font-size: 12px
the 1em
becomes 12px
You can read more about it here: https://j.eremy.net/confused-about-rem-and-em/
Why em instead of px?
The reason I asked this question was that I forgot how to use em's as it was a while I was hacking happily in CSS. People didn't notice that I kept the question general as I wasn't talking about sizing fonts per se. I was more interested in how to define styles on any given block element on the page.
As Henrik Paul and others pointed out em is proportional to the font-size used in the element. It's a common practice to define sizes on block elements in px, however, sizing up fonts in browsers usually breaks this design. Resizing fonts is commonly done with the shortcut keys Ctrl++ or Ctrl+-. So a good practice is to use em's instead.
Using px to define the width
Here is an illustrating example. Say we have a div-tag that we want to turn into a stylish date box, we may have HTML-code that looks like this:
<div class="date-box">
<p class="month">July</p>
<p class="day">4</p>
</div>
A simple implementation would defining the width of the date-box
class in px:
* { margin: 0; padding: 0; }
p.month { font-size: 10pt; }
p.day { font-size: 24pt; font-weight: bold; }
div.date-box {
background-color: #DD2222;
font-family: Arial, sans-serif;
color: white;
width: 50px;
}
The problem
However, if we want to size the text up in our browser the design will break. The text will also bleed outside the box which is almost the same what happens with SO's design as flodin points out. This is because the box will remain the same size in width as it is locked to 50px
.
Using em instead
A smarter way is to define the width in ems instead:
div.date-box {
background-color: #DD2222;
font-family: Arial, sans-serif;
color: white;
width: 2.5em;
}
* { margin: 0; padding: 0; font-size: 10pt; }
// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt
That way you have a fluid design on the date-box, i.e. the box will size up together with the text in proportion to the font-size defined for the date-box. In this example, the font-size is defined in *
as 10pt and will size up 2.5 times to that font size. So when you're sizing the fonts in the browser, the box will have 2.5 times the size of that font-size.
Converting em to px in Javascript (and getting default font size)
Edit: No, there isn't.
To get the rendered font size of a given element, without affecting the DOM:
parseFloat(getComputedStyle(parentElement).fontSize);
This is based off the answer to this question.
Edit:
In IE, you would have to use parentElement.currentStyle["fontSize"]
, but this is not guaranteed to convert the size to px
. So that's out.
Furthermore, this snippet won't get you the default font size of the element, but rather its actual font size, which is important if it has actually got a class and a style associated with it. In other words, if the element's font size is 2em
, you'll get the number of pixels in 2 ems. Unless the font size is specified inline, you won't be able to get the conversion ratio right.
Conversion rate of pt, em, px, percent, other
Well,
12pt = 16px = 1em = 100%
assuming you don't change the font size on the body (else the pt will be different), the dpi of your OS is set at 72 etc etc..
The relationship looks like:
pt = 3/4*px
em = pt/12
% = pt*100/12
in this case. It's worth pointing out that using pt is wrong, unless you are printing something, and that using px, % or em is more usual.
Personally, I just use px or em. Using % or em is handy for designs where the base font size changes for smaller screens.
Related Topics
Svg Height Incorrectly Calculated in Webkit Browsers
Recording and Saving an Svg Animation as an Animated Gif
Css3 Scale Transform on Parent Div But Keeping Constant Size in Some of the Associated Divs
How to Add Padding or Border to a Div and Keep Width and Height
CSS - Using One Background Image with Multiple Images on It
CSS Issue on iPad with Table Border
How to Align Jsf Components to Center
Understanding the Difference Between the Flex and Flex-Grow Properties
CSS Width and Max-Width Combined
Changing Font-Family for Placeholder
Svg @Font-Face Works in Svg But Not When Included in a Page
How to Convert Table Based Layout with Bootstrap "Row" and "Col-*-*"
Using Grunt Grunt-Contrib-Less) for Compiling Bootstrap 3.1 Less in Visual Studio 2013
How to Control the Width of a Table Header Cell That Contains Rotated Text