Back to Home

Nowadays, most of the developers are familiar with Pixel (PX) as a space unit in front end development, and using different media queries to provide appropriate size of elements and fonts.

Currently, in information technology (IT), there is a huge scale of devices and different resolutions. To fulfill the need for proper view in different resolutions, we need to apply different media queries for similar structure. A view port could play a vital role in minifying this situation,.

So, let’s have a look on view port used in CSS.
View port is much similar to percentages, but converting PX into percentage for particular resolution is a complex task, so let’s start getting information about VW/VH.

The basic and most required element for using this is “meta content defined” in HTML
<meta content=“width=device-width” name=“viewport”>

VW (View port Width) :

The view port width is mainly lined with the width of device, which user uses. It will count the width of device and set the element’s width based on it. The calculation is quite simple

1 VW = 1% of device width

For example, we have a screen whose resolution is 1680 PX in width

then viewport width will be like 1680px = 100vw

In this resolution (1680 PX), the container width would be around 1400 PX, which is normally not suitable with medium devices resolutions such as 1366 PX, 1280 PX, etc

So, the calculation would be

(1/Device width ) * Width of element = width in viewport

(1/1680) * 24px = 1.43vw (here 24px is we consider font size)

Here, we shall count font size based on device width, but not with container widt

VH (viewport height) :

VH is counted based on height of device, which user uses. Rest of the things would work same like “VW”.

Browser Support :

IE 10+, Firefox 19+, Chrome 34+, Safari 7+, Android 4.4+, iOS 6+ – Supported Chrome 20-34, Safari 6

ref: https://css-tricks.com/viewport-sized-typography/https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

Leave a comment

Your email address will not be published. Required fields are marked *