{"id":1930,"date":"2016-09-05T19:15:34","date_gmt":"2016-09-06T00:15:34","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1930"},"modified":"2016-09-05T19:15:34","modified_gmt":"2016-09-06T00:15:34","slug":"how-to-use-css3s-viewport-units","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-use-css3s-viewport-units\/","title":{"rendered":"How to Use CSS3’s Viewport Units"},"content":{"rendered":"

CSS3 has a really cool (and completely underrated) feature that allows developers to define the size of an element relative to the viewport. The units are vh (viewport height) and vw (viewport width), and they can be applied to elements like width, height, font-size, margin…basically anything that you might normally define with a px or an em unit. Using viewport units to define sizes is an awesome way to make sure that your site is fully responsive and that the size of your HTML elements will adjust based on the size of the viewport.<\/p>\n

Here’s how they work:<\/p>\n

1vh<\/strong> = 1%<\/strong> of the viewport’s height. So 28vh would be 28% of the viewport’s height, and so on.<\/p>\n

1vw<\/strong> = 1%<\/strong> of the viewport’s width. So 16vw would be 16% of the viewport’s height, and so on.<\/p>\n

To use the units to define the size of a particular element, they would appear in your CSS in the same way that px or em unts would appear.<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. h1{<\/span><\/div><\/li>\n
  2. font-size<\/span>:<\/span> 24vw;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n
  4.  <\/div><\/li>\n
  5. div{<\/span><\/div><\/li>\n
  6. width<\/span>:<\/span> 75vh;<\/span><\/div><\/li>\n
  7. height<\/span>:<\/span> 75vw;<\/span><\/div><\/li>\n
  8. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    Share and Enjoy !<\/h3>
    0<\/span><\/span>Shares<\/small><\/div>
    <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

    CSS3 has a really cool (and completely underrated) feature that allows developers to define the size of an element relative to the viewport. The units are vh (viewport height) and vw (viewport width), and they can be applied to elements […]<\/p>\n

    Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[173,174],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1930"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1930"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1930\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}