Units & breakpoints

Our breakpoints

A breakpoint is the dimension at which a predetermined screen size range having a specific layout requirement switches to another range. At the given breakpoint, the layout adjusts to suit the screen size and orientation of the new range.

Eventhough modern screens resolutions go far beyond the 2560px width, the browsers of those devices are "artificially blocked" to 2560px max.

What Are rem Units?

In CSS, rem stands for “root em”. They won’t make you lose your religion nor believe in a man on the moon. What they can do is help you achieve a harmonious and balanced design.

Before going deeper into details, keep in mind that with modern browsers, REM units have excellent support. See caniuse.com

According to the W3C spec, the definition for one rem unit is: Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property's initial value. This means that 1rem equals the font size of the html element (which for most browsers has a default value of 16px).

As it is quite unusual for most of the people to count in hexadecimal, as a first step, we decided to fix the HTML element font-size to 10px. Therefore, we may say that 1rem=10px.

Lately, with the latest VW unit we added in our css, we decided to define the html element font-size in VW, making it relative to the device width. This latest change brought the advantage of having the exact same screen width between different devices. A sort of "zoom effect" when resizing a browser window. (this is true until 1200px of screen size. see below)