CSS Units

It is always challenge to manage the size (mainly font size) in css. usually we use media query to measure all that. But here is some other CSS Unit which helps to manage sizes, so I am going to introduce you to some CSS units, about which you might not known before.

em

This is very useful unit for measure. Now how it works?
If I define body font-size 14px and div font size 1.2 em then div font render with 16.8px

The unit rem (root em) works like as em but its not inherited with parents and it is not only useful for font but also it very useful for gird.

Example:-

main{
width: 70rem; // 70 * 14px = 980px
}

vh and vw

vh (view port height) and vw (view port width) unit is useful for responsive web design because this depend
on your screen size.
The vh element is equal to 1/100 of the height of the viewport. So if screen width is 800px then font size is 1vh along with the font size render with 8px.

Example :-

For screen size 1200

div {
font-size: 1vh; // calculated at 1200/100, or 12px
}

vmin and vmax

This woks same as vh or vw but if we use vmin (viewport minimum) then vmin compare the screen height and width, in both of them which one have minimum value that will applied. Same process is followed with vmax (viewport maximum).

0 Comment(s)

Comment on it

AttachFiles,Zip etc

RecordFrom Desktop

RecordFrom Webcam

Preview

Enter captcha to proceed

Unable to start Java!! Mr. Nerd figure out why...

We have detected you are using Google Chrome and might be unable to use the Java plugin from this browser. Starting with Version 42 (released April 2015), Chrome has disabled the standard way in which browsers support plugins. More info

Chrome Version Support

Starting with Chrome version 45, NPAPI is no longer supported for Google Chrome. For more information, see Chrome and NPAPI (blog.chromium.org).

Firefox and Microsoft Internet Explorer are recommended browsers for websites using java applets.

Chrome Version Support

Starting with Chrome version 45, NPAPI is no longer supported for Google Chrome. For more information, see Chrome and NPAPI (blog.chromium.org).

Firefox and Microsoft Internet Explorer are recommended browsers for websites using java applets.

Chrome Version Support

Starting with Chrome version 45, NPAPI is no longer supported for Google Chrome. For more information, see Chrome and NPAPI (blog.chromium.org).

Firefox and Microsoft Internet Explorer are recommended browsers for websites using java applets.

Unable to start Java!! Mr. Nerd figure out why..

We have detected that Java plugin is not installed/enabled on your browser. Unfortunately some of our below listed tools require Java plugin:

Desktop recorder.

Error Screen capture.

Time Tracker.

To use our product please click on the link to install/Detect Java plugin.

You have exceeded the maximum number of characters allowed for a comment without sign in.Either enter Content Or Record

Your Post will be visible in the listing once it has been approved by the administrator.