Various Measurements CSS3 Essential Training

Various Measurements CSS3 Essential Training

CSS, TUTORIALS, WEB

Various Measurements CSS3 Essential Training




In this Various Measurements CSS3 Essential Training lesson we are gonna learn the different types of measurements we often used while we design our page or web site. Depends on the screen and purpose the css actually supports various measurements.
Lets begin with the basic measurement types and how they differ from the others. In CSS3 most of the developers using the em   as their measurement units. And the some of them are using the pixelspx   and in very often cases we uses the Pointspt   and percentage%   measurement units.
Percentage – Various Measurements CSS3 Essential Training
The percentage is used in most of the responsive sites which are having the perfect in all kind of devices like Mobiles, Tablets and also the large desktops.
In this percentage measurement is actually based on the percentage of its relative position. For example if we want to move div to left 30% from its relative position. Then it automatically moves 30% in all the devices depends from the current screen size.
Assume in a 100% screen desktop view is 1170px and its 30% is approximately 351px. Then the div is moves 351px from the left. Now if we wants to take a look at the same page in mobile or any other portable device which has the screen resolution as 360 X 640px.
And now the css renders the page and calculates the 30% from the 360px of the screen width. It will little confused but when you starts working on these measurement units, it’ll useful and more comfort.

The above code will gives us the following output and we can understand how the pixel and percentage is varies.
Various Measurements CSS3 Essential Training
Centimeters – Various Measurements CSS3 Essential Training
This will measure the space and remaining measurements in the centimeter. This will be mostly used when we are working on the fixed layouts. We use the cm   as unit in CSS as a short form.
Enumeration
The em point is actually relative to the font space we have defined. Because the em space is equivalent to the font space we give. For example if we give the font space as 12pt then a single em is 12pt.

EX
This value defines a measurement relative to a font’s x-height. The x-height is determined by the height of the font’s lowercase letter x.

Inches
This measures the units in the inches.
Millimeters
We can also gives the measurements in the millimeters.
Picas
There is one more important measurement unit is Picas. The Pica is equivalent to 12pts  . There are 12 Picas are equivalent to one Inch.
Points – Various Measurements CSS3 Essential Training
Defines the measurement in the points. Where the point is 1/72nd of an inch.
Pixels
We use mostly the pixels as the measurement unit which is the screen resolution. These are the various measurement units in future we are gonna use in our lessons.




Leave a Reply