What is vw in CSS and why need that?
What is vw in CSS and why need that?
Ask by Anubhav Sharma
Updated 08 Jan 2025
In CSS, vw refers to viewport width, thus meaning a size that is proportionate to the width of the page. It is a relative measurement unit, which is defined by the user’s viewport width, i.e., the area seen on a webpage at a given time.
1vw = 1% of the width of the viewport.
For instance, if the viewport width = 1000px, the 1vw will be equal to 10px.
Why is it needed?
vw is most suitable for use in responsive web designing. Here’s why you might want to use it:
Fluid Layouts: It enables elements to be fluid and responsive to the width of the viewport without necessarily having to use media queries.
Scalability: Applying vw for fonts and margins, paddings, etc makes the website layout scalable enabling clear readability on both large and small screens of mobile devices as well as PC.
Consistency: It keeps proportionality good relative to the screen it will be rendered on to avoid creating an isolated look on different devices.
As you will see, vw allows web developers to design general layouts suitable for any width, thus simplifying the use of media queries and increasing usability.