The Difference Between PX, VW and REM and What It Means for Your Mobile Friendly Website.
A few years ago Google announced that they would be prioritizing mobile-friendly pages for viewers searching from a mobile device. In other words, having a responsive website is crucial in ensuring your website is ranked high in searches made from mobile devices.
If you are reading this post, it is likely that you were aware of this and have made an effort to ensure that your website is mobile friendly. Squarespace does a fairly good job of this automatically, especially with the new Squarespace 7.1 platform.
For those of you familiar with the Squarespace 7.0 platform, you may have noticed a small but significant change Squarespace made in their font styles. The font sizes in Squarespace are now measured in '“rem” rather than “px”. This may seem like a very small change but it was done to help your website in its responsiveness to different screen sizes. For the coders out there, this means a lot less media queries when it comes to Squarespace Fonts.
So what is px and rem?
When coding we use various units of measure when determining the size or lengths of elements. There are several different units available. The one you use will be dependent on the situation you are using it in. The main difference is whether it is an absolute unit or a relative unit.
Pixels (PX)
Pixels are an absolute unit, meaning that they are relative to the resolution of the device and not its size. This is useful for when you want the element to be the same size, regardless of the size of the device. For example, if I want the height of the header to be the same on each device I would use pixels to set an absolute height. However, pixels should not be used for elements that need to be responsive. In Squarespace 7.0, pixels are used for the size of fonts. This is problematic because it means that the font is same size whether you were viewing the website from a large desktop or a mobile phone.
Parent Element (EM) and Root Element (REM)
EM and REM are relative units, meaning that they are relative to the size of the elements around them and therefore responsive to different screen sizes. REM units are relative to the root element, which basically means that it is dependent upon the size of the overall document. EM units are relative to their parent element. For example, if you set the text size using EM in an Image Block, then the text will be responsive to the size of the image block rather than the overall document.
In Squarespace 7.1, you now set a base font size and then set the rest of the sizes to a unit in REM. As the screen size changes, so will the size of the font.
Percentage (%), Viewport Width (VW) and Viewport Height (VH)
PX, EM, and REM are generally used for fonts. If you want to set a height, width, padding, or margin you would use either a percent, VW, or VH. Percentages are relative to their parent element similar to the EM unit. VW units are relative to the width of the viewport and VH are relative to the height of the viewport. For example, if I set the width of an image equal to 50% I have set the image to 50% of whatever container it is in. In Squarespace, this may be its section or the overall image block. If I set the width to 50 vw, then I am setting it to be 50% of the viewport width (or 50% of the width of your screen).
If you are using one of these units to size an element such as an image, it can be a good idea to also set a maximum and minimum using pixels. For example, I may set an image to have a width of 25vw so that it adapts to the size of the screen. However, this means that on a 2.5 inch mobile screen the image will only be 62.5px wide and on a 21 inch desktop screen it will be 525px wide. As much as I want this image to be responsive, that is a pretty big variation. So, I will then set a min-width of 100px and a max-width of 300px. That means the image will adjust between 100px and 300px depending on the size of the screen.
In conclusion
There are several units that are used when coding each with a particular purpose. Selecting the correct unit when coding can help you ensure your website is mobile responsive without having to write a bunch of media queries.
