Hello, I've been learning a bit about responsive sites, and so far the only solutions I've found have been putting different styles for each size.
and .. the percentage, which in my view would be the most correct, would not need 3 or more styles, just one.
I'm newbie, I can be talking bullshit, I wanted tips, and if possible, what calculation should be done to make this pixel conversion for percentage.
Transformation of pixel in percentage is quite simple. Just use the object: context = result x 100 formula.
Practical example:
Did not make the slightest sense? Yeah, for me it also did not the first time I read it. Let's go a little bit to practice and think of the following: we have a div of width 1128px. Inside it a column with 264px wide. The column is therefore daughter of the container. So let's get the px value of the column (object = 264px) and divide by the pixel value of the parent element (context = 1128px). The result gave 0.23404255319149. Now just walk two houses to the left with the comma and add a point that we have the value 23.404255319149. And this is the correspondence of our column in percentage: 23.404255319149%. This number is really great and the temptation is great to call 23% and end the story. But, if you round, one hour the sum will break. Computers are far more accurate than we are. They know how to deal well with math ...
Source: link
Impossible. Pixel is related to image quality and% is related to the screen area that the object will occupy, regardless of size. They are different things.
To convert Pixels to%, you need to know the exact width of the screen in px , to then relate the size of the object to the total available space.
But if the subject is RESPONSIVITY, it means that you intend to create something generic to run on various screen types. In this case, discard pixels at once and use measures that fit the screen size, such as '%', 'em', and so on.
And for specific cases, where certain content formatting looks good at higher resolutions but does not fit smaller resolutions, use this feature: link . In this case it would be the "3+ styles" you mentioned, but in some cases it is necessary. "
800 width = 100% ... each menu item has 70px.
800 = 100 70 = x 800x = 7000 x = 7000/800 x = 8.75%
I picked up from a forum the answer about pixels that I was in doubt.
Basically you get the total pixel value defined in your Layout add 00 (2 ZERO) to the value you want to know the percentage, and divide by the total value of the Layout.
Example: Layout has a total size of 940px. You have added an element within these 940px of px, ADD 00 (2 ZEROS) to the added size ( 180 px) ie " 180 > + 00 "= 18000 and divides the value of this" sum "by the total value of the Layout. 18000/940 = 19%
