{"id":137029,"date":"2024-10-11T15:14:32","date_gmt":"2024-10-11T09:44:32","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=137029"},"modified":"2024-10-16T15:08:46","modified_gmt":"2024-10-16T09:38:46","slug":"responsive-viewport-relative-lengths-css-selectors-typography-and-more","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/responsive-viewport-relative-lengths-css-selectors-typography-and-more\/","title":{"rendered":"Responsive viewport-relative lengths | CSS Selectors, Typography and More"},"content":{"rendered":"\n<p>Viewport-relative lengths are units of measurement that are based on the dimensions of the viewport (the visible area of the browser window). This makes them ideal for creating responsive designs that adapt to different screen sizes.<\/p>\n\n\n\n<p><strong>Common Viewport-Relative Lengths<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>vw:<\/strong> Relative to the viewport width.<\/li>\n\n\n\n<li><strong>vh:<\/strong> Relative to the viewport height.<\/li>\n\n\n\n<li><strong>vmin:<\/strong> The smaller of vw and vh.<\/li>\n\n\n\n<li><strong>vmax:<\/strong> The larger of vw and vh.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>.element {<\/p>\n\n\n\n<p>&nbsp; width: 50vw; \/* 50% of the viewport width *\/<\/p>\n\n\n\n<p>&nbsp; height: 30vh; \/* 30% of the viewport height *\/<\/p>\n\n\n\n<p>&nbsp; padding: 1rem; \/* Relative to the root element&#8217;s font size *\/<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>Benefits of Using Viewport-Relative Lengths<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Responsive design:<\/strong> Viewport-relative lengths automatically adjust to different screen sizes, making your layouts more flexible.<\/li>\n\n\n\n<li><strong>Consistent units:<\/strong> Using the same unit of measurement (e.g., vw or vh) can create a more consistent and predictable layout.<\/li>\n\n\n\n<li><strong>Improved readability:<\/strong> Viewport-relative units can help to create more readable and accessible layouts, especially on smaller screens.<\/li>\n<\/ul>\n\n\n\n<p><strong>Best Practices<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use <\/strong><strong>vw and <\/strong><strong>vh for layout:<\/strong> Use vw and vh to define the width and height of elements, creating responsive layouts that adapt to different screen sizes.<\/li>\n\n\n\n<li><strong>Combine with other units:<\/strong> You can combine viewport-relative lengths with other units (e.g., em, rem, px) to create more complex layouts.<\/li>\n\n\n\n<li><strong>Test on various devices:<\/strong> Ensure your designs look and function as expected on different screen sizes and orientations.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>.container {<\/p>\n\n\n\n<p>&nbsp; max-width: 80vw;<\/p>\n\n\n\n<p>&nbsp; margin: 0 auto;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>.image {<\/p>\n\n\n\n<p>&nbsp; width: 100%;<\/p>\n\n\n\n<p>&nbsp; height: auto;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>In this example, the .container element&#8217;s width is set to 80% of the viewport width, and the .image element&#8217;s width is set to 100% of its parent&#8217;s width, ensuring it scales responsively.<\/p>\n\n\n\n<p>By effectively using viewport-relative lengths, you can create responsive and visually appealing web designs that adapt seamlessly to different screen sizes and devices.<\/p>\n\n\n\n<div class=\"wp-block-buttons alignwide is-content-justification-space-between is-layout-flex wp-container-core-buttons-is-layout-3d213aab wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/grouping-selectors-css-selectors-typography-and-more\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>&lt;&lt;Prev<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certificate-in-responsive-web-design\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Back To The Tutorial<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/using-supports-to-fork-css-css-selectors-typography-and-more\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Next&gt;&gt;<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Viewport-relative lengths are units of measurement that are based on the dimensions of the viewport (the visible area of the browser window). This makes them ideal for creating responsive designs that adapt to different screen sizes. Common Viewport-Relative Lengths Example: CSS .element { &nbsp; width: 50vw; \/* 50% of the viewport width *\/ &nbsp; height:&#8230;<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-137029","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Responsive viewport-relative lengths | CSS Selectors, Typography and More - Tutorial<\/title>\n<meta name=\"description\" content=\"Reach your certification goals with the Certified Responsive Web Design exam. Get Certified Now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/responsive-viewport-relative-lengths-css-selectors-typography-and-more\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive viewport-relative lengths | CSS Selectors, Typography and More - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Reach your certification goals with the Certified Responsive Web Design exam. Get Certified Now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/responsive-viewport-relative-lengths-css-selectors-typography-and-more\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-16T09:38:46+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/responsive-viewport-relative-lengths-css-selectors-typography-and-more\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/responsive-viewport-relative-lengths-css-selectors-typography-and-more\/\",\"name\":\"Responsive viewport-relative lengths | CSS Selectors, Typography and More - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2024-10-11T09:44:32+00:00\",\"dateModified\":\"2024-10-16T09:38:46+00:00\",\"description\":\"Reach your certification goals with the Certified Responsive Web Design exam. Get Certified Now!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/responsive-viewport-relative-lengths-css-selectors-typography-and-more\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/responsive-viewport-relative-lengths-css-selectors-typography-and-more\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/responsive-viewport-relative-lengths-css-selectors-typography-and-more\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive viewport-relative lengths | CSS Selectors, Typography and More\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive viewport-relative lengths | CSS Selectors, Typography and More - Tutorial","description":"Reach your certification goals with the Certified Responsive Web Design exam. Get Certified Now!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/responsive-viewport-relative-lengths-css-selectors-typography-and-more\/","og_locale":"en_US","og_type":"article","og_title":"Responsive viewport-relative lengths | CSS Selectors, Typography and More - Tutorial","og_description":"Reach your certification goals with the Certified Responsive Web Design exam. Get Certified Now!","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/responsive-viewport-relative-lengths-css-selectors-typography-and-more\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-10-16T09:38:46+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/responsive-viewport-relative-lengths-css-selectors-typography-and-more\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/responsive-viewport-relative-lengths-css-selectors-typography-and-more\/","name":"Responsive viewport-relative lengths | CSS Selectors, Typography and More - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2024-10-11T09:44:32+00:00","dateModified":"2024-10-16T09:38:46+00:00","description":"Reach your certification goals with the Certified Responsive Web Design exam. Get Certified Now!","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/responsive-viewport-relative-lengths-css-selectors-typography-and-more\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/responsive-viewport-relative-lengths-css-selectors-typography-and-more\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/responsive-viewport-relative-lengths-css-selectors-typography-and-more\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Responsive viewport-relative lengths | CSS Selectors, Typography and More"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=137029"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137029\/revisions"}],"predecessor-version":[{"id":137356,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137029\/revisions\/137356"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=137029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=137029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=137029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}