1
Hi, I’ve been learning a little bit about responsive websites, and.. so far the only solutions I found were, put different styles for each size.
e.. the percentage, which in my view would be the most correct, would not need 3 or more styles, just one.
I’m a beginner, I may be talking nonsense, I wanted tips, and if possible, which calculation should be done to make this pixel to percentage conversion.
5
Pixel transformation into percentage is very simple. Just use the formula object : context = result x 100.
Practical example:
Didn’t make any sense? Yeah, for me it didn’t make the first time I read it either. Let’s advance the practice a little and think about the following: we have a div of width 1128px. Inside it a column with 264px of width. The column is therefore daughter of the container. Then let’s take the px value of the column (object = 264px) and divide it by the pixel value of the parent element (context = 1128px). The result was 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 matching 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 much more accurate than us. They know how to handle math well...
Source:https://tableless.com.br/design-responsivo-na-pratica-2-layout-ao-html/
-1
Impossible. Pixel is related to image quality and % is related to the area of the screen that the object will occupy, regardless of size. 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 RESPONSIVENESS, 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 adapt to the screen size, such as '%', 'em' among others.
And for specific cases, where certain content formatting looks good in larger resolutions, but does not adapt to smaller resolutions, use this feature: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp. In this case it would be the "3+ styles" you quoted, but in some cases it is necessary".
Okay, what would 'em'? be a type of css parameter? your second paragraph, is it widely used? or is it obsolete? , and one last question, could you point me to a book, or a link to a responsiveness study? Thank you.
About CSS measures: https://www.w3.org/Style/Examples/007/units.pt_BR.html. It’s all documented on the internent. I am not a fan of books in the area of computer science. Because they become outdated very quickly.
-1
800 width = 100% ... each menu item has 70px.
800 = 100 70 = x 800x = 7000 x = 7000 / 800 x = 8,75%
I got from a forum the answer on the pixels that I was in doubt.
Basically you take the total pixel value defined in your Layout adds 00(2 ZEROS) to the value you want to know the percentage, and divides by the total value of the Layout.
Example: The Layout has a total size of 940px. You added an element within these 940px in size 180px, ADD 00(2 ZEROS) to added size(180px) this is, "180 + 00" = 18000 and divides the value of this "sum" by the total value of the Layout. 18000/940 = 19%
I think the question referred to a standard form, used in any kind of resolution.
yes, you already answered, I’m just complementing, for future users who have the same question.
Okay, all right, all right...
Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
Welcome to Stack Overflow in English. I recommend a brief reading of the How to create a minimal, complete and verifiable example, because your question, in the present way, is too wide.
– Woss