Background: While building the website, the UI developers often face problems while making the hero image/landing page responsive. If there are header tags such as h1, h2 or a combination of text and images, making them scale according to the window can become a challenge. To achieve this, we start writing media queries and end up with a whole bunch of widths and heights to manage. Result – too much code for making it responsive. We recognised the length of the code is too high because of the CSS units that were used. In this section, we will walk you through the CSS units and a variety of those that are available for our use.
CSS Units
- CSS has several different units for expressing length.
- Many CSS properties take “length” values, such as width, margin, padding, font-size, border-width, etc.
- A length is a number followed by a length unit, such as 10px, 2em, etc.
- A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.
- For some CSS properties, negative lengths are allowed.
- Here are two types of length units: relative and absolute.
Relative Lengths
Relative length units specify a length relative to another length property. Relative length units scale better between different rendering mediums.
CSS units and description
- em – Relative to the font-size of the element (2em means 2 times the size of the current font)
- ex – Relative to the x-height of the current font (rarely used)
- ch – Relative to width of the “0” (zero)
- rem – Relative to font-size of the root element
- vw – Relative to 1% of the width of the viewport*
- vh – Relative to 1% of the height of the viewport*
- vmin – Relative to 1% of viewport’s* smaller dimension
- vmax – Relative to 1% of viewport’s* larger dimension
- % – Relative to percentage of immediate parent Dom element
Here is the example of CSS code. we most probably, use to make text responsive.
Example :
h1 {
font-size:44px;
}
@media (max-width: 1024) {
h1 {
font-size: 38px;
}
}
@media (min-width: 768px) {
h1 {
font-size: 28px;
}
}
@media (min-width: 420px) {
h1 {
font-size: 22px;
}
}
And in some cases, we write the media queries for the orientation and for height also. To avoid such work, we can use following CSS units in our CSS which automatically detects the device height and width and according to that, it resizes your font-size or width or height.
You can use viewport value instead of ems, pxs or pts.
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
Example :
h1 {
font-size: 5.9vw; /* 5.9% of width of viewport */
}
h2 {
font-size: 3.0vh; /* 3.0% of height of viewport */
}
p {
font-size: 2vmin; /* Smaller of 2vw or 2vh */
}
img.img-thumbnail {
width: 12vmax; /* Bigger of 12vw or 12vh */
height : 25vmax; /* Bigger of 25vw or 25vh */
}
img.img-thumbnail {
width: 12vmin; /* Smaller of 12vw or 12vh */
height : 25vmin; /* Smaller of 25vw or 25vh */
}
The above CSS will help us to reduce our code size as well as our efforts to write media queries and it scales the text, images in the ratio of screen size.
If you can write your app for IE9+ and all other modern browsers that support CSS calc(), rem units, and vmin units, you can use this to achieve scalable text without Media Queries:
h1 {
font-size: calc(0.75em + 1vmin);
}
Note: Internet Explorer 9 supports vmin with the non-standard name: vm and it doesn’t support vmax.
Live Demo URL: http://krixisolutions.com/blog_example.html
