Px vs % (caution: longread)

Question

Disclaimer: please don't mind my English, I'm not native.

So I've been learning coding for 19 days already and today I uploaded my first somewhat sizeable HTML+CSS code on SoloLearn (I'd be happy if you check it out and comment on what I need to improve) and encountered a problem: my svg figures just wasn't there when I opened this code from my phone.

After a small research I realized the reason was that I used px instead of % when creating circle, rectangle, etc. and since my phone's screen is less wide than my laptop's screen it was just off the screen. I had to lower the px values of the figures from 400 to 100 so they are showed properly.

The conclusion I made from this is that it's probably usually better to use % and not px so that your code is properly visible on every possible screen.

And finally, my question is: are there any cases when px is preferred over % and why?

https://code.sololearn.com/W8B82nRpjK2i/?ref=app

Answer 1

Hi Rick and Morty fans,

1. Your stylesheet and images all failed to load on our devices, because you are using local path C:\

You need to upload to web host such ad dropbox, here is a tutorial:

[Tutorial] Upload content from your device to CodePlayground - The Dropbox way
https://code.sololearn.com/WW6t4B73kJVz/?ref=app

2. You overdid the SVG:

(i) you can put every SVG components into one single <svg>

Note that SVG is XML, so you must close the shape elements with /> instead of >

(ii) For reducing svg image size, make use of SVG's viewbox attribute.

<svg viewbox="x, y, width, height">

demo:
https://code.sololearn.com/WyWdqa4qLXC4/?ref=app

Answer 2

No you are right. This doesn't only apply to svg but to webdev in general, you should preferrably use relative units, like % or em or vw etc instead of pixels.

I can think of only one case in which I use pixels consistently, and that is when having one pixel thick borders.

Sometimes you also need pixels when manipulating widths or so in javascript.

Nice first project though!

Answer 3

Gordon Thanks! Appreciate your advices. Gonna correct my code according to what you said.

Answer 4

Schindlabua Yeah, that's what I thought! Thanks for the reply.