UnitsTrunk beta

PX to VW & VH Converter

Convert pixels into variable width (VW) and variable height (VH) at the same time. Use popular screen resolutions and hotkeys for convenience.

PX
PX
PX

What are VW and VH Units?

VW (viewport width) and VH (viewport height) are CSS length units representing percentages of the viewport's height and width, respectively:

  • VW is 1% of the viewport's width
  • VH is 1% of the viewport's height

They offer a flexible way to size elements relative to the dimensions of the browser viewport.

What is the Formula to Convert Pixels to VW and VH?

To convert pixels to VW (Viewport Width) and VH (Viewport Height) units, you can use the following formulas:

  • VW – to convert pixels to VW units, divide the pixel value by the width of the viewport and then multiply by 100:
    VW = pixels / viewport width * 100
  • VH – to convert pixels to VH units, divide the pixel value by the height of the viewport and then multiply by 100:
    VH = pixels / viewport height * 100

What are the Benefits of Using VW and VH?

VW and VH units enable fluid and adaptable layouts that adjust dynamically to fit various devices and screen sizes. Unlike fixed units like pixels (px), VW and VH units respond to changes in viewport size, ensuring consistent scaling across devices.

Where can VW and VH Units be Applied?

  1. Full-Screen Sections: VH units can create full-screen sections that expand to fill the viewport's height, providing immersive experiences.
  2. Responsive Typography: VW units can size text proportionally to viewport width, enhancing readability and legibility on different screens.
  3. Flexible Layouts: VH and VW units, combined with CSS techniques like Flexbox or Grid, enable building layouts adaptable to user devices.

What are Best Practices for VW and VH Units?

  1. Avoid overuse: extreme VH/VW values may lead to usability issues, particularly on smaller devices. Use these units when element sizes are logically related to the viewport size and must change with it.
  2. Accessibility considerations: test layouts across devices to ensure content remains accessible and legible. Especially on extra small and extra large devices.
  3. Progressive enhancement: implement feature detection and fallbacks for browsers not supporting VH and VW units for consistent user experience.

Do all Browsers Support VW and VH Units?

Yes, VW and VH units are widely available across major browsers, including Chrome, Edge, Safari and Firefox.

Which Browsers Don't Support EM and REM Units?

Only severely outdated versions of browsers may have limited or no support for these units, for example:

  • Chrome 4-19 (25.01.2010 – 28.03.2012): viewport units units are not supported
  • Chrome 20-25 (15.05.2012 – 11.01.2012): viewport units have partial support
  • Edge 12-15 (29.07.2015 – 11.04.2017): viewport units have partial support
  • Safari 3.1-5.1 (18.03.2008 – 20.07.2011): viewport units units are not supported
  • Safari 6 (25.07.2012): viewport units have partial support
  • Safari and other browsers on iOS 3.2-5.1 (03.04.2010 – 07.03.2012): viewport units units are not supported
  • Safari and other browsers on iOS 6.0-7.1 (28.01.2012 – 10.03.2014): viewport units have partial support
  • Firefox 2-18 (24.10.2006 – 23.11.2012): viewport units units are not supported
  • Opera 10-12.1 (01.09.2009 – 05.11.2012): viewport units units are not supported
  • Opera Mini all versions (16.03.2016): viewport units units are not supported
  • Opera Mobile 12-12.1 (27.02.2012 – 09.10.2012): viewport units units are not supported
  • IE 6-8 (27.08.2001 – 19.03.2009): viewport units units are not supported
  • IE 9-11 (27.08.2001 – 17.10.2013): viewport units have partial support
  • Android Browser 2.1-4.1 (26.10.2009 – 24.07.2013): viewport units units are not supported

While the vast majority of users are using modern browsers that support VW and VH units without issues, it's always a good idea to test your website or application across different browsers and versions, especially if you anticipate a significant portion of your audience using older or less common browsers. Additionally, providing fallbacks or alternative styling techniques for browsers with limited support can help ensure a consistent user experience across different environments.

Read more about VW and VH CSS units below:

MDN: CSS values and unitsCan I use: viewport unitsW3Schools: CSS units