How to calculate REM for type?
Target Size / Base Size = Value
Since we can assume that browsers use 16px as default (after all, that's what Jonathan Snook did to assume that 62.5% is 10px), then your Base is 16. If you want 32px, then 32 / 16 = 2
, want 40px then 40 / 16 = 2.5
, want 24 then 24 / 16 = 1.5
.
The same goes for 75%... Determine what 75% is (it's 12) and perform the same calculation. If you want 32px, then 32 / 12 = 2.666
, want 40px then 40 / 12 = 3.333
, want 24 then 24 / 12 = 2
.
How to set base size for rem
rem
Represents the font-size of the root element (typically
<html>
).
When used within the root element font-size, it represents its initial
value (a common browser default is 16px, but user-defined preferences
may modify this).
Source
In other words, change the font size of your html
element, and the calculation base for rem
will change.
Example:
<html style="font-size: 10px">
...
</html>
rem px in Javascript
The HTML width attribute only takes an integer number of pixels or a percentage (followed by a % sign).
If you wish to use CSS length units you have to use CSS (and set bigPhoto.style.width = "200rem"
.
When I convert from px to rem units how should I decide how many rems to give the width of an input
Unless you use a monospace font you can't really know how wide it should be.
here's a good font stack for monospaced fonts from CSS tricks
/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
also you can always tell the length of a string in Javascript if your just looking for validation. with "string".length
As for the rems, Here's a great article that explains the differences between em, px, and rem. http://snook.ca/archives/html_and_css/font-size-with-rem
CSS3 introduces a few new units, including the rem unit, which stands
for "root em". If this hasn't put you to sleep yet, then let's look at
how rem works. here's a quoteThe em unit is relative to the font-size of the parent, which causes
the compounding issue. The rem unit is relative to the root—or the
html—element. That means that we can define a single font size on the
html element and define all rem units to be a percentage of that.
rem in Dev Console, how to convert it to px?
rem
is a proportion of the font size of the root element (html
in an HTML document).
If you know what the font size (in pixels) of that element is, then you can just multiple by the rem
value.
If you don't know (because, for example, it isn't explicitly specified and is using the users' preferences) then you can't.
Your browser's developer tools will probably compute the value for you (wherever they displayed the computed values of your stylesheets) but they will be using whatever value you have configured for your default font size. Other people may have something different.
Are rem units only useful for font-size?
A huge argument in favor of using rem or em units for your entire layout is that your entire layout will then scale with the text. This was important for accessibility with older browsers, which offered an option to increase the font size rather than the "zoom" feature that most browsers offer now. In order to make webpages more easily readable, persons with low visibility often increased the font size -- and in websites which use rem or em units for all elements on the page, the entire page would scale. This argument is less relevant now, but still important for legacy browser support (IE6 is still used in many schools and offices!).
Use of rem, em and px on image dimensions
px
renders the pixel valuerem
uses the root element (html
) using itsfont-size
as the base (16px by default) to calculate its size, so basically yourrem
value fromimg
multiplied by thefont-size
onhtml
em
uses the first parent with afont-size
to calculate the size it needs to render (calculated the same asrem
above - parent computedpx
value multiplied by yourem
). If a that parent is usingem
in itsfont-size
, the child will use the computed/calculatedfont-size
of the parent.
Explanation can be tough to grasp (especially em
), have a look here: https://jsfiddle.net/6ydf931w/
For the most part, I tend to avoid using em
for almost everything because it can result in unexpected results if you are not permanently aware of where it is used.
I usually limit rem
to text in the event it needs to be changed globally.
px
is very predictable, if this works for you, there is no harm in using it.
Should I use px or rem value units in my CSS?
TL;DR: use px
.
The Facts
First, it's extremely important to know that per spec, the CSS
px
unit does not equal one physical display pixel. This has always been true – even in the 1996 CSS 1 spec.CSS defines the reference pixel, which measures the size of a pixel on a 96 dpi display. On a display that has a dpi substantially different than 96dpi (like Retina displays), the user agent rescales the
px
unit so that its size matches that of a reference pixel. In other words, this rescaling is exactly why 1 CSS pixel equals 2 physical Retina display pixels.That said, up until 2010 (and the mobile zoom situation notwithstanding), the
px
almost always did equal one physical pixel, because all widely available displays were around 96dpi.Sizes specified in
em
s are relative to the parent element. This leads to theem
's "compounding problem" where nested elements get progressively larger or smaller. For example:body { font-size:20px; }
div { font-size:0.5em; }Gives us:
<body> - 20px
<div> - 10px
<div> - 5px
<div> - 2.5px
<div> - 1.25pxThe CSS3
rem
, which is always relative only to the roothtml
element, is now supported on 99.67% of all browsers in use.
The Opinion
I think everyone agrees that it's good to design your pages to be accommodating to everyone, and to make consideration for the visually impaired. One such consideration (but not the only one!) is allowing users to make the text of your site bigger, so that it's easier to read.
In the beginning, the only way to provide users a way to scale text size was by using relative size units (such as em
s). This is because the browser's font size menu simply changed the root font size. Thus, if you specified font sizes in px
, they wouldn't scale when changing the browser's font size option.
Modern browsers (and even the not-so-modern IE7) all changed the default scaling method to simply zooming in on everything, including images and box sizes. Essentially, they make the reference pixel larger or smaller.
Yes, someone could still change their browser default stylesheet to tweak the default font size (the equivalent of the old-style font size option), but that's a very esoteric way of going about it and I'd wager nobody1 does it. (In Chrome, it's buried under the advanced settings, Web content, Font Sizes. In IE9, it's even more hidden. You have to press Alt, and go to View, Text Size.) It's much easier to just select the Zoom option in the browser's main menu (or use Ctrl++/-/mouse wheel).
1 - within statistical error, naturally
If we assume most users scale pages using the zoom option, I find relative units mostly irrelevant. It's much easier to develop your page when everything is specified in the same unit (images are all dealt with in pixels), and you don't have to worry about compounding. ("I was told there would be no math" – there's dealing with having to calculate what 1.5em actually works out to.)
One other potential problem of using only relative units for font sizes is that user-resized fonts may break assumptions your layout makes. For example, this might lead to text getting clipped or running too long. If you use absolute units, you don't have to worry about unexpected font sizes from breaking your layout.
So my answer is use pixel units. I use px
for everything. Of course, your situation may vary, and if you must support IE6 (may the gods of the RFCs have mercy on you), you'll have to use em
s anyway.
Related Topics
Yui Reset CSS Makes <Strong><Em>This Not Work</Em></Strong>
Add Timestamps to Compiled SASS/Scss
Unwanted Outline on Border When Parent Is Transformed
CSS Regex Selector Match One or Another Condition
Change Collapse Breakpoint in Bootstrap 3.0
What's the CSS Filter Alternative for Firefox
Getting Application.CSS to Override Bootstrap
* { Box-Sizing: Border-Box; }:To Border-Box or Not to Border-Box All Elements
Mobile Orientation Change Not Applying CSS
How to Simply Parse a CSS Like (!) File in My Qt Application
How to Convert a Numeric Value into a Percentage (Or) Append Percentage Symbol to a Number
Seek to Specific Keyframe in CSS3 Animation
Textarea::Selection and ::-Moz-Selection
Background Gradients in IE7 with CSS