Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Viewport Percentage Units CSS HTML Layout Tutorial

Learn to use the new viewport length values in CSS to size elements relative to the viewing area. The way it differs from normal percentage lengths is that these lenghts are always relative to the viewport and not relative to their parent elements. It also helps to make text and other elements sized relative to the viewing area. vw - unit equal to 1% of the viewport width vh - unit equal to 1% of the viewport height vmin - unit equal to 1% of whichever is smaller of "vw" and "vh" vmax - unit equal to 1% of whichever is larger of "vw" and "vh" <style> body{ margin: 0px; } #div1 { width: 50vw; height: 50vh; background: #A4CFFF; font-size: 3vw; margin: 25vh 25vw; } </style> <div id="div1">div content ...</div>
thumb

CSS Videos

Responsive Dynamic Layouts

Media Queries Responsive Website Layout TutorialResponsive Web Design Made Simple CSS media Rule TutorialMobile Friendly Test Responsive Website Development Case StudyViewport Percentage Units CSS HTML Layout TutorialAuto Adjusting Stretch Fit Website Layout TutorialBackground Size Scale Stretch ImageMulti Column Content Layout Grid TutorialFlexbox Flexible Box Layouts Flex WebsiteGrid Layout CSS Tutorial and Documentation Reference