--- title: How to decide CSS units for responsive website? | daily.dev description: Px unit is fixed in size no matter what screen size you choose. If there's no defined parent then by default body is considered the parent. vw stands for the... canonical: https://daily.dev/posts/how-to-decide-css-units-for-responsive-website--ck19a-r8q twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How to decide CSS units for responsive website? | daily.dev og:description: Px unit is fixed in size no matter what screen size you choose. If there's no defined parent then by default body is considered the parent. vw stands for the... og:url: https://daily.dev/posts/how-to-decide-css-units-for-responsive-website--ck19a-r8q og:image: https://api.daily.dev/og/posts/Ck19a-R8Q.png og:image:alt: How to decide CSS units for responsive website? og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How to decide CSS units for responsive website? **[DEV](https://daily.dev/sources/devto)** · 3 min read · 76 upvotes · 5 comments ## Summary Px unit is fixed in size no matter what screen size you choose. If there's no defined parent then by default body is considered the parent. vw stands for the viewport width which means vw is always relative to the 1% of the width of root, irrespective of parent element's width. vh stands for viewprot height like vw it's also relative to 1% height of root/document. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@dev\_dawood** · 2 upvotes > very informative > thanks **@nargil** · 1 upvotes > A good post who explain basically what you need for css units **@denison** · 0 upvotes > Looking forward to using it in my next project. So far i've been using mostly pixels :) **@vijayuxd** · 0 upvotes > em, rem - good explanation **@abbosf** · 0 upvotes > Awesome ! Very useful. Thanks. ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/how-to-decide-css-units-for-responsive-website--ck19a-r8q) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How to decide CSS units for responsive website?","url":"https://daily.dev/posts/how-to-decide-css-units-for-responsive-website--ck19a-r8q","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-to-decide-css-units-for-responsive-website--ck19a-r8q"},"datePublished":"2021-08-08T09:02:13.966Z","dateModified":"2021-10-07T14:17:10.317Z","description":"Px unit is fixed in size no matter what screen size you choose. If there's no defined parent then by default body is considered the parent. vw stands for the...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/10a2ac25d7f418ff8c7e8db2ad52f9a7","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/10a2ac25d7f418ff8c7e8db2ad52f9a7","isAccessibleForFree":true,"articleSection":"DEV","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"DEV","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/devto","url":"https://daily.dev/sources/devto"},"commentCount":5,"discussionUrl":"https://daily.dev/posts/how-to-decide-css-units-for-responsive-website--ck19a-r8q","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":76},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":5}],"keywords":"css","timeRequired":"PT3M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"DEV","item":"https://daily.dev/sources/devto"},{"@type":"ListItem","position":3,"name":"How to decide CSS units for responsive website?"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/how-to-decide-css-units-for-responsive-website--ck19a-r8q","comment":[{"@type":"Comment","text":"very informative\nthanks","datePublished":"2021-08-08T13:05:59.988Z","url":"https://daily.dev/posts/Ck19a-R8Q#c-v2g1MtJ5O","author":{"@type":"Person","name":"Dev Dawood","url":"https://daily.dev/dev_dawood","image":"https://media.daily.dev/image/upload/f_auto/v1627728017/avatars/M--9fbd6u"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"A good post who explain basically what you need for css units","datePublished":"2021-08-14T19:46:20.570Z","url":"https://daily.dev/posts/Ck19a-R8Q#c-DQxUy9Vlm","author":{"@type":"Person","name":"Antony Marchi","url":"https://daily.dev/nargil","image":"https://media.daily.dev/image/upload/f_auto/v1626510008/avatars/nqa026FZ1"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Looking forward to using it in my next project. So far i’ve been using mostly pixels :)","datePublished":"2021-08-09T16:59:39.289Z","url":"https://daily.dev/posts/Ck19a-R8Q#c-EHkFdAiSW","author":{"@type":"Person","name":"denis on","url":"https://daily.dev/denison","image":"https://lh3.googleusercontent.com/a/AATXAJxnFjitFs1qrjwmlMWw2aEnd8lh1dC603u2PITu=s100"}},{"@type":"Comment","text":"em, rem - good explanation","datePublished":"2021-08-08T16:03:14.573Z","url":"https://daily.dev/posts/Ck19a-R8Q#c-2k1soFePU","author":{"@type":"Person","name":"vijay vasudevan","url":"https://daily.dev/vijayuxd","image":"https://avatars.githubusercontent.com/u/30254118?v=4"}},{"@type":"Comment","text":"Awesome ! Very useful. Thanks.","datePublished":"2021-08-08T18:09:42.582Z","url":"https://daily.dev/posts/Ck19a-R8Q#c-VRhntVkmW","author":{"@type":"Person","name":"Abbos Fayzullaev","url":"https://daily.dev/abbosf","image":"https://lh3.googleusercontent.com/a-/AOh14GgjYHR52l7-4v5YQRvdbHCmLQTyJdCTH12ylsY_=s100"}}]} ```