Methods
remByPx(px, initialopt, nullable) → {String|null}
Calculates a rem value based on a given px value. As a default this method takes the font-size (supposedly being in px) of the html-container. You can overwrite this behaviour by setting initial to a number to use as a base px value or to a string, which then defines a new selector for an element to get the initial font-size from. You can also provide an HTMLElement directly, but keep in mind that the element's font size definition has to be in pixels, to make this work.
In most cases you will have to define the initial value via a constant or a selector to a container with non-changing font-size, since you can never be sure which relative font-size applies atm, even on first call, after dom ready, since responsive definitions might already be active, returning a viewport-specific size.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
px |
Number | the pixel value to convert to rem |
||
initial |
Number | String | HTMLElement |
<optional> <nullable> |
'html' | either a pixel value to use as a conversion base, a selector for an element to get the initial font-size from or the element itself; keep in mind, that the element's font-size definition has to be in px |
Throws:
error if given selector in initial does not return an element
Returns:
- Type
- String | null
Example
remByPx(20, 16);
=> '1.25rem'
remByPx('100px', 'p.has-base-fontsize');