Why you should not use pixels(px) in CSS

Did someone ever tell you to code like this?

something{
width: 100px;
height: 100px;
}

I can tell you straight on, unless completely necessary, do not code like that.

In a hypothetical situation, I might be a user with a phone that does…


This content originally appeared on DEV Community and was authored by Blogger and Programmer

Did someone ever tell you to code like this?

something{
   width: 100px;
   height: 100px;
}

I can tell you straight on, unless completely necessary, do not code like that.

In a hypothetical situation, I might be a user with a phone that does not have a width of 100px, guess what happens then? The hypothetical user get's an ugly looking side scrolling bar. Even worse, the user might not get some of the content!

A suggestion

A better approach is to use view height(vh). Which basically displays content based on the screen size.

Here is another version of the code written previously.

something{
   width: 30vw;
   height: 30vh;
}

Now for a user with a device of a height of 300px, the user would be shown an object of 100px.


This content originally appeared on DEV Community and was authored by Blogger and Programmer


Print Share Comment Cite Upload Translate Updates
APA

Blogger and Programmer | Sciencx (2022-05-09T07:07:08+00:00) Why you should not use pixels(px) in CSS. Retrieved from https://www.scien.cx/2022/05/09/why-you-should-not-use-pixelspx-in-css/

MLA
" » Why you should not use pixels(px) in CSS." Blogger and Programmer | Sciencx - Monday May 9, 2022, https://www.scien.cx/2022/05/09/why-you-should-not-use-pixelspx-in-css/
HARVARD
Blogger and Programmer | Sciencx Monday May 9, 2022 » Why you should not use pixels(px) in CSS., viewed ,<https://www.scien.cx/2022/05/09/why-you-should-not-use-pixelspx-in-css/>
VANCOUVER
Blogger and Programmer | Sciencx - » Why you should not use pixels(px) in CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/05/09/why-you-should-not-use-pixelspx-in-css/
CHICAGO
" » Why you should not use pixels(px) in CSS." Blogger and Programmer | Sciencx - Accessed . https://www.scien.cx/2022/05/09/why-you-should-not-use-pixelspx-in-css/
IEEE
" » Why you should not use pixels(px) in CSS." Blogger and Programmer | Sciencx [Online]. Available: https://www.scien.cx/2022/05/09/why-you-should-not-use-pixelspx-in-css/. [Accessed: ]
rf:citation
» Why you should not use pixels(px) in CSS | Blogger and Programmer | Sciencx | https://www.scien.cx/2022/05/09/why-you-should-not-use-pixelspx-in-css/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts