Menu
For desktop browser all modern browser uses Zoom functionality so we can use PX but if same site can be seen on mobile then would px not be good for zooming in mobile browsers. or use of px is also fine for mobile browsers.
even if we don't care for IE 6 , should we use em in place of px still if we are not making different site for mobile, same site will be seen on both desktop and mobile phones (iphone, blackberry, windows mobile, opera mini, android etc?
493
If you use px as the unit for fonts, the fonts will not resize whereas the fonts with rem / em unit will resize when you change the system's font size. So use px when you want the size to be fixed and use rem / em when you want the size to be adaptive/dynamic to the size of the system.
It's better to use relative units, such as em , instead. The em and ex units depend on the font and may be different for each element in the document. The em is simply the font size. In an element with a 2in font, 1em thus means 2in.
Use em only for sizing that needs to scale based on the font size of an element other than the html (root) element. Use rem unit for elements that scale depending on a user's browser font size settings. Use rem as the unit for most of your property value.
By extension, a font-size of 1em equals the computed font-size of the element on which it is used. If a font-size has not been set on any of the <p> 's ancestors, then 1em will equal the default browser font-size , which is usually 16px . So, by default 1em is equivalent to 16px , and 2em is equivalent to 32px .
You can use this trick for converting fonts from px to em in your CSS:
body {
font-size: 62.5%; /* resets the page font size */
}
Then specify your font sizes like this:
p {
font-size: 0.8em; /* equals 8px */
font-size: 1.0em; /* equals 10px */
font-size: 1.6em; /* equals 16px */
font-size: 2.0em; /* equals 20px */
}
And so on. Then you can convert px to em for your layout at PXtoEm.com.
92
px won't be a real actual pixel when the screen is zoomed out on a modern mobile browser. These browsers are effectively emulating a desktop browser with desktop browser-size pixels.
So for this type of browser using px is no worse than it is for a normal desktop browser. You can do it if you want without major problems, but in both situations em is preferable for the main body content, if you can.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
