For styling, we have two categories of units:<\/p>\n\n\n\n
- Absolute Units<\/li>
- Relative Units<\/li><\/ol>\n\n\n\n
Our main focus in this article is only on Relative Units, as Absolute Units are outdated (note: they will remain there always in CSS because for Relative to exist we always need something Absolute<\/em>). Absolute Units are \u2018pixel \/ px\u2019 or \u2018points \/ pt\u2019 in CSS. Whereas, Relative Units are \u2018em\u2019, \u2018rem\u2019, \u2018vh\u2019, \u2018vw\u2019, etc.<\/p>\n\n\n\n
- em – It is based on the current font-size.<\/li><\/ul>\n\n\n\n
![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/1-1.png\")
<\/figure>\n\n\n\n- rem – It based on the root element font-size (<html>).<\/li><\/ul>\n\n\n\n
![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/2-1.png\")
<\/figure>\n\n\n\n- vh – It is based on viewport height.<\/li><\/ul>\n\n\n\n
![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/3-1.png\")
<\/figure>\n\n\n\n- vw – It is based on viewport width.<\/li><\/ul>\n\n\n\n
![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/4-1.png\")
<\/figure>\n\n\n\nBefore moving on, let\u2019s first get a clear understanding of what viewport is, on which everything that we are going to learn depends on, and by clear understanding I mean let\u2019s a have visual.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/5-1.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/6-1024x576.png\")
<\/figure>\n\n\n\nFig \u2013 viewport size in pixel<\/p>\n\n\n\n
So first let\u2019s clear some misconception from the minds of beginner Frontend Developers about testing responsiveness in browser. If Pixel is an absolute unit which means fixed<\/em> then it should appear same throughout different devices of varied resolutions (total number of pixels). Here\u2019s a code I\u2019m using.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/7.png\")
<\/figure>\n\n\n\nLet\u2019s check the output on web<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/8-1024x576.png\")
<\/figure>\n\n\n\nNow let\u2019s simulate a device in browser\u2019s Dev Tools.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/9-1024x576.png\")
<\/figure>\n\n\n\nWHAT JUST HAPPENED, WHY IT DOES NOT LOOK SAME TO ME!!
Trust me there is nothing wrong with your eyesight. When you test your website on browser simulator for mobile devices, it creates a virtual viewport of around 1000px and then try to shrink and fit that virtual viewport in an actual viewport of mobile device which is of let\u2019s say 600px. This is exactly what happened in second screenshot.
<\/p>\n\n\n\nSo the question arises, why browser behaves like that, well there is a reason for that. It does that to enable websites that are not properly styled for different screen sizes or no media queries are defined in stylesheet. Then that website automatically fits into mobile browser, it is as simple as that.
But there is an issue, let\u2019s take a pause, understand everything that you have read up until now and think before reading further.
If you haven\u2019t figured it out, no worries, this article is written with the sole purpose of figuring out that only. If you keep on reducing the device size or resolution, then ultimately the text would become unreadable and you won\u2019t be able to read anything without zooming-in the webpage. This make our website not suitable for small devices. So what is the solution to avoid this auto-adjust behaviour of mobile browser? Here comes in the viewport Meta tag and below is the updated code (just added line 5<\/em>).<\/p>\n\n\n\n![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/10-1024x456.png\")
<\/figure>\n\n\n\nLet\u2019s see how it affects mobile simulator view.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/11-1024x576.png\")
<\/figure>\n\n\n\nNow, it seems to behave properly. This Meta tag is basically telling any browser to adapt the width of the device and open initially with the scale of 1.0 (basically no auto-adjust or shrink to fit<\/em>). This tag is present there in React by default, but we need to add manually if designing a website from scratch using HTML \/CSS.<\/p>\n\n\n\n
NOTE: IF YOU\u2019RE WEBSITE IS NOT STYLED FOR RESPONSIVENESS ADDING THIS TAG CAN CREATE DISASTER.<\/p>\n\n\n\n
Ok, let\u2019s jump to how to use absolute units properly for Fluid CSS. It can be done with a method available in CSS called \u2018calc()\u2019 and making a mathematical formula out of it. A web designer known by the name Tim Brown first wrote a formula to calculate line-height. Then, a web developer called Mike Riethmuller applied same formula for font-size. Here\u2019s how formula looks like.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/12.png\")
<\/figure>\n\n\n\nSuppose we want minimum font-size of 16px for viewport of 420px and maximum font-size of 24px for viewport of 1000px then that\u2019s how CSS would look like.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/13.png\")
<\/figure>\n\n\n\nThis formula basically controls the rate at which the font-size would scale depending upon the parameters used and to limit the range we have to use media queries as applied here.<\/p>\n\n\n\n
This formula might look complex in first sight, but it is very simple to understand and implement. And it is made complex just to have more control over the font-size for different viewport sizes in a smooth manner.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/14.jpg\")
<\/figure>\n\n\n\nHere\u2019s a screenshot of Figma tool, which is a UI designing tool. To understand the above mentioned formula, one should first understand the process of designing first. It\u2019s very simple to understand, a UI designer frames the layout on a standard frame size or standard viewport size (by standard I mean the size chosen by most manufacturers<\/em>). Suppose a UI is designed on frame size of 1280px and everything else like font-size or margin is defined in pixels based on what\u2019s fit for that particular viewport, then it automatically means that it is not suitable for all available devices and to solve this problem we have to use Mike\u2019s formula. Having the base units makes it easier for everyone to write their own scaling formula. The formula can be different for different developers based on their requirements of maximum and minimum values of required parameters.<\/p>\n\n\n\n
You will notice that similar approach is taken in React Native when handling font-size fluidly for different devices. Here, a question arises that when everyone is using this approach for mobile then why not for web. The answer here is simple, when screen size reduce or resolution (total number of pixels) is reduced, then font-size, margin, padding related issues become quite noticeable which is not the case in web and they are generally ignored, which in my view completely wrong.<\/p>\n\n\n\n
Even I have recently adapted this new approach and discovering its benefits and different use cases along the journey of my professional life as a Frontend Developer. There is no one silver bullet to make use of this approach. Here\u2019s what I think as of now from experience is the best way to use this formula in CSS.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/15.png\")
<\/figure>\n\n\n\nRules:<\/p>\n\n\n\n
- Define root font-size using Mike\u2019s formula for Fluid Typography.<\/li>
- Define all other elements font-size using \u2018rem\u2019 unit.<\/li>
- Define margin and padding using \u2018em\u2019 unit.<\/li>
- Limit font-size and other properties using media queries.<\/li><\/ol>\n\n\n\n
I would encourage everyone who read this article to start using Fluid approach more and more in their future projects as it makes more sense than Responsive approach and gives you more control over styling for different devices. In my experience, mixed approach is always the best way for anything which basically means to use best from both the approaches.<\/p>\n\n\n\n
I have tried to explain this complex concept in a simpler and broken-down language as I can so everyone who is reading this will find it easier to understand.<\/p>\n","protected":false},"excerpt":{"rendered":"
Fluid Typography and Responsive CSS in Web In CSS responsive means something that is set to adjust or resize based on the breakpoint, aka media queries. Fluid is a new approach (not so new, just not put into use as much) which means something that adjust or resizes smoothly to match the device width. With […]<\/p>\n","protected":false},"author":1,"featured_media":6049,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[108,257,412,102,258],"tags":[],"class_list":["post-6048","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css-js","category-react","category-react-native","category-web-service","category-web-technology"],"yoast_head":"\n
Fluid Typography and Responsive CSS in Web - InnovationM - Blog<\/title>\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.innovationm.com\/blog\/fluid-typography-and-responsive-css-in-web\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fluid Typography and Responsive CSS in Web - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"Fluid Typography and Responsive CSS in Web In CSS responsive means something that is set to adjust or resize based on the breakpoint, aka media queries. Fluid is a new approach (not so new, just not put into use as much) which means something that adjust or resizes smoothly to match the device width. With […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/fluid-typography-and-responsive-css-in-web\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-03T04:04:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-20T13:25:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/Fluid-typography.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1141\" \/>\n\t<meta property=\"og:image:height\" content=\"634\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/fluid-typography-and-responsive-css-in-web\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/fluid-typography-and-responsive-css-in-web\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Fluid Typography and Responsive CSS in Web\",\"datePublished\":\"2020-07-03T04:04:09+00:00\",\"dateModified\":\"2023-01-20T13:25:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/fluid-typography-and-responsive-css-in-web\\\/\"},\"wordCount\":1208,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/fluid-typography-and-responsive-css-in-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Fluid-typography.png\",\"articleSection\":[\"HTML5 \\\/ CSS \\\/ JS\",\"React\",\"React Native\",\"Web service\",\"Web Technology\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/fluid-typography-and-responsive-css-in-web\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/fluid-typography-and-responsive-css-in-web\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/fluid-typography-and-responsive-css-in-web\\\/\",\"name\":\"Fluid Typography and Responsive CSS in Web - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/fluid-typography-and-responsive-css-in-web\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/fluid-typography-and-responsive-css-in-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Fluid-typography.png\",\"datePublished\":\"2020-07-03T04:04:09+00:00\",\"dateModified\":\"2023-01-20T13:25:20+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/fluid-typography-and-responsive-css-in-web\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/fluid-typography-and-responsive-css-in-web\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/fluid-typography-and-responsive-css-in-web\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Fluid-typography.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Fluid-typography.png\",\"width\":1141,\"height\":634},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/fluid-typography-and-responsive-css-in-web\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fluid Typography and Responsive CSS in Web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fluid Typography and Responsive CSS in Web - InnovationM - Blog","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.innovationm.com\/blog\/fluid-typography-and-responsive-css-in-web\/","og_locale":"en_US","og_type":"article","og_title":"Fluid Typography and Responsive CSS in Web - InnovationM - Blog","og_description":"Fluid Typography and Responsive CSS in Web In CSS responsive means something that is set to adjust or resize based on the breakpoint, aka media queries. Fluid is a new approach (not so new, just not put into use as much) which means something that adjust or resizes smoothly to match the device width. With […]","og_url":"https:\/\/www.innovationm.com\/blog\/fluid-typography-and-responsive-css-in-web\/","og_site_name":"InnovationM - Blog","article_published_time":"2020-07-03T04:04:09+00:00","article_modified_time":"2023-01-20T13:25:20+00:00","og_image":[{"width":1141,"height":634,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/Fluid-typography.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/fluid-typography-and-responsive-css-in-web\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/fluid-typography-and-responsive-css-in-web\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Fluid Typography and Responsive CSS in Web","datePublished":"2020-07-03T04:04:09+00:00","dateModified":"2023-01-20T13:25:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/fluid-typography-and-responsive-css-in-web\/"},"wordCount":1208,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/fluid-typography-and-responsive-css-in-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/Fluid-typography.png","articleSection":["HTML5 \/ CSS \/ JS","React","React Native","Web service","Web Technology"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/fluid-typography-and-responsive-css-in-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/fluid-typography-and-responsive-css-in-web\/","url":"https:\/\/www.innovationm.com\/blog\/fluid-typography-and-responsive-css-in-web\/","name":"Fluid Typography and Responsive CSS in Web - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/fluid-typography-and-responsive-css-in-web\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/fluid-typography-and-responsive-css-in-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/Fluid-typography.png","datePublished":"2020-07-03T04:04:09+00:00","dateModified":"2023-01-20T13:25:20+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/fluid-typography-and-responsive-css-in-web\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/fluid-typography-and-responsive-css-in-web\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/fluid-typography-and-responsive-css-in-web\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/Fluid-typography.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/Fluid-typography.png","width":1141,"height":634},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/fluid-typography-and-responsive-css-in-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Fluid Typography and Responsive CSS in Web"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=6048"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6048\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/6049"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=6048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=6048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=6048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- vw – It is based on viewport width.<\/li><\/ul>\n\n\n\n
- vh – It is based on viewport height.<\/li><\/ul>\n\n\n\n
- rem – It based on the root element font-size (<html>).<\/li><\/ul>\n\n\n\n
- em – It is based on the current font-size.<\/li><\/ul>\n\n\n\n