luuis Posted November 3, 2018 Share Posted November 3, 2018 This css construction is explaind to hanlde the rems and ems easier, like cause 14px are then = 1.4rem. https://snook.ca/archives/html_and_css/font-size-with-rem I cant see it this way, 14px are always bigger than 1.4 rem(dont need glases for that) What do i miss here? <!DOCTYPE html> <html> <head> <title>Developing</title> <link rel="stylesheet" href="styleFont.css" type="text/css"> </head> <body> <h1>Developing</h1> <p>...lufgofgt </p> </body> </html> html { font-size: 62.5%; } body { font-size: 1.4em; } =14px h1 { font-size: 1.4em; } =24px h1 { font-size: 14px; } Link to comment Share on other sites More sharing options...
dsonesuk Posted November 3, 2018 Share Posted November 3, 2018 (edited) Actually its 19.6px not 24px 10 * 1.4 = 14 14 * 1.4 = 19.6 Using developer tools F12, inspect element using style, then look for 'Computed' in Style panel, it should show list of styles, now look at 'font-size' value Edited November 3, 2018 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted November 4, 2018 Share Posted November 4, 2018 That example you gave is what using rem would produce. rem is root->em, the root parent would be <html> tag. It only adjusts in size to the font-size set for html tag html { font-size: 62.5%; } /*62.5% of 16 = 10*/ body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */ root size font 10 * 1.4 = 14 10 * 2.4 = 24 Link to comment Share on other sites More sharing options...
luuis Posted November 5, 2018 Author Share Posted November 5, 2018 Hi dsonesuk, explainig me this "Actually its 19.6px not 24px", makes you stupid. (I consider it as a favor, telling you that) And with your last answer you just repeat whats written on that page, so? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 5, 2018 Share Posted November 5, 2018 (edited) Well It would have it being more stupider to show the wrong! values even after reading the link, so because you being as stupid is as stupid does I thought I would point out the parts you did not follow, so others would not become confused, when the result showed different to what you had stated. I thought you might have got your rem and em mixed, and just pointed what it should be with what you gave. I just can't imagine you being that stupid that you didn't realise H# header tags have by default font-weight of approx 700, so yes! there will be a difference between it and text in a paragraph for example. em size relative to closest parent element font-size: rem size relative to root parent element (<html>...</html>) font-size: Edited November 5, 2018 by dsonesuk 1 Link to comment Share on other sites More sharing options...
Funce Posted November 7, 2018 Share Posted November 7, 2018 On 11/4/2018 at 7:55 AM, luuis said: This css construction is explaind to hanlde the rems and ems easier, like cause 14px are then = 1.4rem. https://snook.ca/archives/html_and_css/font-size-with-rem I cant see it this way, 14px are always bigger than 1.4 rem(dont need glases for that) What do i miss here? You're missing the fact that 14px isn't always bigger than 1.4rem. 14px is bigger than 1.4em when the base(html) font-size is less than or equal to 10px. Try this one instead. Your scenario has other factors in play. It has a base of 11px and is a noticeable difference between the two. Be sure to try changing the html font-size to 9px and see what happens in this example. <!DOCTYPE html> <html> <head> <style> html { font-size: 11px; } body { font-size: 1.4rem; } p { font-size: 14px; } </style> </head> <body> <p>This is size 14</p> This is size 1.4rem </body> </html> Link to comment Share on other sites More sharing options...
luuis Posted November 8, 2018 Author Share Posted November 8, 2018 Sometimes it seems, it doesnt matter, if the answer really fits the question, it helps the rank of that person anyway. I havnt thought that I have to repeat myself the explication of that example this line: html { font-size: 62.5%; } its like a new default value for the size of each font. and 14px = 1.4 rem, or 18px = 1.8 rem and so on without this line: I would have to calculate, always, the size of rem or em, to figure, to picture how big the letters became. Thats the idea behind. I used it and have to see, 1.4 rem are not 14px Link to comment Share on other sites More sharing options...
Funce Posted November 13, 2018 Share Posted November 13, 2018 Why does this matter? If you're using em or rem you're not after specific sizes, just proportional differences. Link to comment Share on other sites More sharing options...
luuis Posted December 6, 2018 Author Share Posted December 6, 2018 Thanks for answer, havnt expected anymore. If your "Why does this matter? " is refered to "1.4 rem are not 14px", then I say: Well, I'm still alive, but hopefully that I just missed or mixed something of the description. Cause as I said from the beginning, using 62% is explained this way. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now