The above is not true for images though. They will overflow on screen sizes smaller than the image itself. To fix that, the following CSS can be added:
max-width and not
width, because we want the image to be in its
original size when possible and shrink down to 100% only when the screen is too
em and rem are essential for responsive design. We do not use absolute
cm, because their size is constant no matter the distance that we
look at the screen from. The desktop and phone display need different sizes of
elements due to that distance.
em and rem
The unit applied on some element is in relation to:
- it’s parent’s
font-sizewhen dealing with
- it’s own
font-sizewhen dealing with other properties (e.g.
margin). It is useful, because the things like margin/padding usually should get bigger as the text of the element gets bigger (e.g. a button)
Ems are compounding. If some parent element has
2em size, and the child has
2em as well, the result will be that the parent will have 32px, and the child
will have 64px (assuming that it was the default, base size).
rem is similar to em, but it’s relative to the root element of the page
<html>) instead of the parent.
Rems are not compounding, they always relate to the root element, making it easier to predict the outcome.
The em/rem are useful when using media queries. Especially rem allows us to
font-size of the
<html> element and impact all the elements that
use rem predictably.
Ems, with their compounding characteristic, can get out of control, as the elements might grow uncontrollably.
The viewport units (vh, vw) act as a percentage of the browser window.
For example, the
100vh will take up the whole height of the browser
(responsively). It is used on some pages where we scroll and discover different
sections, each one taking the
vmin and vmax
vmin and vmax work in a way that the final size is dictated by the hight or width of the viewport. Whichever is smaller/bigger will be taken as a base.
For example, with
20vmin, the size of the element will be 20% of the height of
the viewport, or width, depending on which one is smaller at the moment.
vmax works in an opposite way and is based on the greater size
(width/height) of the viewport.
It gives a good effect on titles, which will scale depending on the size of the screen. It’s not good for accessibility though.
- it rarely makes sense to set
heightof elements. Noramlly, they should grow as needed.
min-widthshould be rarely used.