August 23, 2011 at 00:17Setting dimensions using vw and vh units
- Transfer
CSS3 introduces new units. ( I seem to have already talked about this. Eng ) You already heard about px, pt, em and new rem. Let's look at a few more: vw and vh.
Often in the layout there are elements that are guaranteed to fit in the browser viewport. In general, JavaScript is used for this. We check the viewport size and resize the elements accordingly. If the user resizes the browser window, the procedure is repeated.
With vw / vh we can set the size of the elements relative to the viewport size. The vw / vh units are interesting in that 1vw is a unit equal to 1/100 of the viewport width. To assign an element the width equal to the width of the viewport, for example, you need to set width: 100vw.
Lightboxes are a great candidate for using vw and vh, since it is usually positioned relative to the viewport, but it seems to me that position: fixed with the values top, bottom, left and right is easier to use, since you can not set the height and width at all .
You can use the new units to set the sizes of elements that are in the normal flow. For example, I can place screenshots on a page. The height of these screenshots should not exceed the height of the viewport. To do this, I can set the maximum height of the images:
In this case, I set the height to 95vh to leave a little space around when they are on the screen.
If rem is supported by almost all major browsers including IE9, then using vw and vh is worth the wait. At the moment, only Internet Explorer 9 supports them.
Eng specification
On the advice of gd666, I decided to add a little.
There is another viewport unit that was not mentioned in the original article. This is vm.
vm is calculated relative to the width or height of the viewport, whichever is smaller. The smaller of the values is 100 vm. When resizing the viewport, the dimensions specified in vm change accordingly.
You can read about it in the specification. eng
Often in the layout there are elements that are guaranteed to fit in the browser viewport. In general, JavaScript is used for this. We check the viewport size and resize the elements accordingly. If the user resizes the browser window, the procedure is repeated.
With vw / vh we can set the size of the elements relative to the viewport size. The vw / vh units are interesting in that 1vw is a unit equal to 1/100 of the viewport width. To assign an element the width equal to the width of the viewport, for example, you need to set width: 100vw.
How to use it
Lightboxes are a great candidate for using vw and vh, since it is usually positioned relative to the viewport, but it seems to me that position: fixed with the values top, bottom, left and right is easier to use, since you can not set the height and width at all .
You can use the new units to set the sizes of elements that are in the normal flow. For example, I can place screenshots on a page. The height of these screenshots should not exceed the height of the viewport. To do this, I can set the maximum height of the images:
img { max-height:95vh; }In this case, I set the height to 95vh to leave a little space around when they are on the screen.
Browser support
If rem is supported by almost all major browsers including IE9, then using vw and vh is worth the wait. At the moment, only Internet Explorer 9 supports them.
References
Eng specification
Vm units
On the advice of gd666, I decided to add a little.
There is another viewport unit that was not mentioned in the original article. This is vm.
vm is calculated relative to the width or height of the viewport, whichever is smaller. The smaller of the values is 100 vm. When resizing the viewport, the dimensions specified in vm change accordingly.
You can read about it in the specification. eng