I face the same problem for some months.
If I define any sizes or positions in pixels or in EM units, it is differently translated on different screens and resolutions within the same browsers.
For example - I have Dell display 24" 1920x1080pixels and my colleague has 24" older display by Dell with 1600x1200pixels resolution.
The problem is, that the same webpage is displayed differently.
For example, when I want to have two buttons on the same line without linebreak and I set proper pixel width in CSS, so it is not line-broken on my display, it is broken on my colleagues display, so I have to set several pixels less size. The same works for EMs.
One another example:
Position absolute and I am using negative right position of element to have it next to scrollbar. On my computer it is fine, on my colleagues notebook it is bearly visible.
What is the relation between the units and pixel sizes on the screen?
How can I safely write css sheet in CSS3 and HTML5 doctype to have the right compatibility on all resolutions?
The same problem is with buttons / text inputs, when I use just font-size and padding to set the size of buttons and inputs. It looks different rely on resolution of display.
Thanks for help!
You must use an unit that is relative to the viewport, like
vw and vh
em or rem are relative to the font-size defined for the current font. Do you have the font-size defined for body?
Also read this http://www.w3schools.com/cssref/css_units.asp
Related
I understand that other questions have touched on this topic in various forms, but none as directly as I would like in a definitive answer.
When building a view, padding and margin are useful in all the ways you expect. As you read this page, imagine how much more difficult it would be to navigate if all the spacing from the surrounding elements was collapsed so that everything was squeezed together.
When I am designing a view, I will often add 10px padding to a text box, or space apart buttons with a 5px margin. But on small resolution displays and (equivalently) on those with small device pixel ratio settings (often phones and laptops where the CSS pixels are scaled to make the webpage usable, or where browser users press ctrl +), that padding/margin takes up valuable real-estate in the pursuit of making the webpage small device friendly.
If screen resolution is limited, or the device pixel ratio is scaled strongly, a 10px padding is going to take up a different percentage of the screen than it would on a desktop. What is intended to be a small logical separation turns into a large wall. So how do I keep paddings/borders small?
It would be nice if it was possible to make padding/margin responsive so that didn't take up too much of the screen. But units in CSS don't correspond to their physics lengths, percentages produce different values based on the reference element, media queries would be burdensome, and the viewport CSS units also have limitations.
They're is a bunch of other units you could use beside px:
em: Relative to the font-size of the element (Used quite often in modern web design)
ex: Relative to the x-height of the current font
ch: Relative to the width of the "0"
rem: Relative to font-size of the root element (Quite common too ...)
vw: Relative to 1% of the width of the viewport
vh: Relative to 1% of the height of the viewport (Same here)
%: Relative to the parent element
And much more... I think if I remember, Bootstrap for exemple is based on em's.
So coming back to your problem, you could have a dynamic font size with a dynamic padding and margins system based on em. Hope this help. gl.
I started to design a div which is supposed to represent a mobile header. I designed it using a height in pixels, problem is that this looks different on other mobiles. I think this is the issue of pixels are not DPIs.
In the android world this is easily fixed. I am using a standard HTML website, I am using a bootstrap grid with scss (sass).
Is there some way to allow the height to remain the exact height on each device that has a different DPI ratio?
Really lost here, I presume this problem has a solution?
I think this problem is also going to be the same for pixels and images, on some devices its going to occupy a different amount of space between different device DPI's. What is the solution here?
Use em instead of pixels, em are relative to the device standard font size
I read in w3school - font-size property that the difference between using em and px is that when using px IE doesn't support resizing but em does.
I am working on IE7 and it works fine with px and re-size the text when zooming the page.
can any one explain this to me ?
px can be resized in IE as well. em is a relativ size to the inherited size by it's parent element and actually has the same meaning as %.
I don't think you can take any advantage by using em instead of px.
I believe old versions of Internet Explorer have this problem, but new versions fixed it. By the way, W3Schools is often considered a bad resource.
From memory, IE7 will scale / zoom the whole page, but if you select "Page/Text Size" from the menu to change the text size, that is when px or other absolute units are not scaled whereas relative units (eg: em's) are.
I expect you are doing a zoom rather than a Page/Text Size?
I've been working on a personal website (so, time is not an issue here) and I made a base stylesheet where I take care of all the font-sizes, border-widths, line-heights and the like.
I made an effort to use ems all the way, but when I tested the website on other browsers (eg. Chromium) the content didn't match my "pixel-perfect" grid.
So, my question here is, should I use px instead? I mean, I know ems are "the way to go" but nowadays most browsers implement fullpage zoom (they don't resize just the text) and when it comes to dealing with border-width and line-heights, px are more comfortable, because I can avoid subpixel rounding altogether.
What's your take on this? (btw, supporting IE is not one of my goals; i couldn't care less about it)
the content didn't match my "pixel-perfect" grid.
If you're working with a pixel-perfect grid, use pixel values. em is a relative value that works well only if the layout is able to adapt to different content sizes.
I would use em only for elements which size depends on font size.
Elements like borders (and its width) usually does not depend on font size.
When using em for margin and padding, I've found that the relative measurement can do some funny things.
The em can accumulate in nested elements and you find yourself bumping some values back up to align them with outer elements.
This looks fine until you shrink the browser window in very slowly and find that sometimes the values for the nested elements round to a pixel different to the outer parent.
To combat this, I've used rem at the parent level to set the font size and found that this allows parent and descendents to work from the same base relative value.
in my projects i use em for sizing of font only with body {62.5%}?
with this method i can easily calculate em value.
so what are pros and cons if i use em sizing unit for width, height, padding, margin, line-height, even for inline images also along with font for fixed width layouts?
Ems are wonderful units for a good designer. It all rests on what you're taking as pixel perfect. Since most front-enders will only get an image (maybe a .psd file) from the designers, it might seem a good idea to keep every pixel as is. Which is good, except that you can't rely on web browsers to be pixel perfect.
Imagine a browser with a different font, or a font with a different aspect. Imagine a user who enlarges the default font or who zooms in (using those browsers that only enlarge the font). A margin set in px will still show up with the exact px value you gave it. An em-based margin will stretch according to the font-size.
Also, they're not that hard to work with. Define a base font-size and line-height and apply it to your (after a good reset, of course). Then change it only for the titles (you shouldn't have more than 6 titles) and for any region where it makes sense to change the font-size (a sidebar or footer). You will do 3 or 4 calculations, everyone will be happy :)
The biggest downside is in indentation and text-block alignment with fonts of different sizes with em-sizing. It gets hard to line things up exactly – if that's important to you (and it should be).
Well if you understand how em work you can do just about anything you can do with pixels for example but with a bit more calculation.
Actually you could do more, for example, if you have a h1 header you could specify line-height and bottom margin in em's to they always reflect the font size of that header. As you increase a font size of header you increase the margins and line-height too.
This can be used to create a dynamic vertical rhythm for example.
Also if you build a complete web site in relative units you can achieve zoom effect in older browser, etc.
But with modern browsers and if you can afford to not to support behemonts like IE6 you can use absolute units and still get a full page zoom.
Em-sizing is useful for liquid layouts, but less so for fixed layouts. Not to say that it is useless, but a fixed layout is easier to set up using pixels. You can of course continue using ems for font sizing.