+ 2

I had a doubt when i was alive

font size not consistent! font-size:20px in (sololearn_web_output != chrome) in chrome text is quite bigger https://sololearn.com/compiler-playground/WusSkkREHT81/?ref=app tried different units but didn't work tell me if you know "how to make it consistent" for the peace to my spirit

18th Jul 2024, 3:54 PM
Andrew [DEAD]
Andrew [DEAD] - avatar
8 Réponses
+ 4
it's not trivial what a pixel in CSS is in physical size. It is defined by degreese of visual angle (not inch or centimeters): "The proper dimension of a CSS pixel is actually dependent on the distance between you and the display." https://hacks.mozilla.org/2013/09/css-length-explained/ So whatever the browser/ environment assumes as viewing distance, the physical size of a pixel can vary (though it is of course limited by the physical device of course)
18th Jul 2024, 6:14 PM
Lisa
Lisa - avatar
+ 3
how large 1 pixel is depends on device and browser (e.g. a device pixel is not necessarily equal to a browser's pixel). i think the keyword is "virtual pixel".
18th Jul 2024, 4:26 PM
Lisa
Lisa - avatar
+ 2
There is a suggestion in StackOverflow to use a css reset. Here is a link to one. https://meyerweb.com/eric/tools/css/reset/ I haven't actually tested it, so I don't know how effective it is.
19th Jul 2024, 2:23 AM
Bob_Li
Bob_Li - avatar
+ 1
Lisa both browser showing screen width = 360px. and for margin,padding it works well but fails in font-size. it there any solution to make it consistent.
18th Jul 2024, 5:07 PM
Andrew [DEAD]
Andrew [DEAD] - avatar
+ 1
the font type is "sans-serif" and if you do not specify the font exactly, the browser will use its default.
18th Jul 2024, 5:29 PM
Lisa
Lisa - avatar
+ 1
Lisa tried specific font, tried google fonts too, tried different units, nothing worked.. my spirit won't get peace! thank you for your time.
18th Jul 2024, 5:44 PM
Andrew [DEAD]
Andrew [DEAD] - avatar
+ 1
Andrew [DEAD] another option might be using @media /* For screens smaller than 768px (typical phone width) */ @media only screen and (max-width: 768px) { body { font-size: 14px; /* Adjust as needed for smaller screens */ } } /* For screens between 768px and 992px (typical tablet width) */ @media only screen and (min-width: 768px) and (max-width: 992px) { body { font-size: 15px; /* Adjust as needed for tablets */ } } /* For screens larger than 992px (typical desktops) */ @media only screen and (min-width: 992px) { body { font-size: 16px; /* Base font size for desktops */ } }
18th Jul 2024, 11:12 PM
BroFar
BroFar - avatar
+ 1
Please check browser mode Desktop / Mobile
19th Jul 2024, 2:26 AM
Divyalok Kumar
Divyalok Kumar - avatar