I use ems everywhere in my style-sheets rather than px. But the computed styles/metrics in Chrome Developer Tools seem to default to showing me px, even for elements where I've explicitly used ems in the style-sheet:
(This is a picture of the computed lengths for a button with an icon from Font Awesome. I set the padding to 0.4em and I brought this up to see how tall the icon is.) Sure I can just divide everything by 16, but for numbers like "14.841" that's not so easy to do in my head. Is there a setting somewhere to change the length measurement unit? (Kind of like in most desktop graphics and image manipulation programs where I can choose pixels, points, inches or centimeters?) Either that, or is there somewhere else in the dev tools that can show the lengths in ems? (The rulers, ...?)
The values shown on the Computed tab are just that: computed. Therefore, they are listed in a "absolute" length unit like pixels and not a "relative" length unit like ems, rems or percentage, which all base their size off of some other criteria. For instance, if you set an elment to 100% of the viewport width, it will show you how many pixels the width of the element computes to and there is no option to view the value in any other unit. Likewise, because you're using ems, how big your icon is will be based off the inherited font-size value.
In fact, I haven't tested this but I think the px values shown on the computed tab are technically shown in device pixels and not CSS pixels, as CSS pixels themselves are relative length units (since their size is based on the DPI of the device screen).
Relative Length Units
Absolute Length Units
Related
If I want to change the shape of a website page with a width and height of 600px and change its shape. Which one should I use?
Max width/height
Or
Min width/height.
🤔
I hope you can help me in this matter that I asked about media query in css
A maximum width can be specified for elements using the max-width property.
When we don't want the width of an element to exceed a certain value, we can use this feature to determine that value for the element.
By using the min-width and max-width properties, you can set a range for the width of an element.
The max-width property is used to set the maximum width of an element.
The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).
The problem with the above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page.
Using max-width instead, in this situation, will improve the browser's handling of small windows.
When working with multiple resolutions, the "em" based approach seems a good way to code your css file. However, if you have say two resolutions 480x800 & 540x960, then the width ratio ( 540/480 = 112.5% ) is NOT same as height ratio ( 960/800 = 120% ).
So, if I have an em font size = 112.5% for moving from lower resolution to higher, the width seems perfectly aligned to new resolution but height ( which expects font-size of 120% ) seems to fall short and therefore there is a white blank space created at the bottom after rendering all elements for the page.
Any solution to this problem would be great help.
em is a unit of choice for fonts, not so much for element dimensions. With it evaluating to element's font-size, it's simply not reasonable to be setting widths using this unit.
You may be trying to refer to a vertical rhythm, which is a concept of maintaining text readability and should not be confused with the rest of the page layout.
For aesthetically pleasing rendering under different resolutions, you should look into fluid layouts - try playing with the browser width on that page. As you can see, the content flow is altered to make best use of space available, however the font size/line-height are not adjusted since the two techniques are independently implemented.
I was using em but facing problem in nested items so I decided to use % as yui suggesting.
To change the size of a font, always use percentages as the units
because they render more consistently than ems, and because they allow
user-initiated resizing (unlike pixels).
How to convert px into %? like this is for Px to em http://pxtoem.com/
Edit
I found this example is very good but it's only till 24px.
http://yuilibrary.com/yui/docs/cssfonts/cssfonts-size.html
How to calculate size in % for each size in px. As a example case, according to this table what will be size in % for 45px
There are already 2 answers posted, however, they're not correct. Every CSS property that accepts percentage length, defines how these values are being computed. In the terms of font-size, this is what CSS 2.1 says:
Percentages: refer to inherited font size
It will never depend on window size or so.
How to convert pixels into percents: in most cases, 16px is the default value for font-size - this is 100%. 45px will thus be 100% * 45px / 16px = 281.25%.
Percentage is for fluid layouts, it will always be dependent on the browser actual size and it will change upon resize, while fixed layout will never change no matter what the browser size is.
In others words, what you are trying to do, you will need to assume something that is never right.
For example, you could assume that 100% would be 1024px, but on my screen, that will be 1920px...
How to convert px into %?
You can't. A percentage is a proportion of the font size of the parent element and ultimately (when you get to the <html> element) falls back to the user's preference (which is an unknown value). A pixel size is a size in pixels (which can vary depending on the DPI).
like this is for Px to em http://pxtoem.com/
That makes assumptions about what the user's default font size is. This assumption will often be wrong.
If you want to make the same assumption, then 1em is the same as 100% (and 0.75em is the same as 75% and so on).
You don't even need to convert it yourself … the table you linked to includes percentage values!
All major browsers work with pixels internally so it will do the calculation for you. You can easily get the pixel size of the font by getting the font-size with JavaScript (in my case I use jQuery).
See test case on jsFiddle
Edit: I need more coffee, just read the question again and realized you needed the opposite.
To get the oppsite you could do like in this test case
However, you will have to know the base pixel to compare against. In the above test case I get both the percentages from the parent font-size and from the body element.
I used Firebug for this once. I used to put percent in font-size and checked in "Computed" tab. If it is same as it was in actual document then I came to know I need this percent value. After few converts, you know what percent will fit with what px in your document. Not very simple but not tough either.
Put the html and body tags at 100%. Then set every size using percentage. This will be relative to these tags, and then you get a perfect fluid layout.
Simple formular for converting PX to % is TCR
i.e Target % Context = Result * 100
this formula applicable for both font pixel to % and Fixed content box to percentage box
if your font size is 45px(target) and content value is lets put default value of font 16(Content) and your result is 2.81 and multiply with 100 you will get 281.25
and you round the value 281 %.
Ex: Finding the width in percentage of a 200px div inside a 1000px container:
200 / 1000 = .2 => Move decimal place over two to the right and this leaves you with 20% width.
Ex2: Convert left and right padding of a div to percentage where padding is 10px and element width is 350px and everything is inside a 1000px container. Here we disregard the overall container since we are dealing with padding leaving us with context being 350px and the target of 10px. Our left and right padding would then be:
10 / 350 = 0.02857142857142857 (Keep entire decimal to make sure everything is mathematically perfect) => Move decimal point over two to the right leaving you with 2.857142857142857% left and right padding.
I am trying to build a layout using css where all dimensions are specified in em. I was under the impression that this would allow the page to display the same way at different font sizes/zoom levels. However, I am noticing that text wraps differently as the size/zoom changes.
For example in this jsfiddle, the text displays all on one line at my native zoom and a font size of 1em, but wraps at a font size of 2em. I would expect it to either wrap/not wrap consistently since the width of the container is in em, and should therefore increase proportionally to the font size.
Am I doing something wrong, or am I just misunderstanding what em measurements are useful for?
You understood it correctly, but font-size defines the HEIGHT of the font, not the WIDTH, therefore container widths defined in em contain a different number of characters in one line in different zoom levels and font-sizes.
I think that if you change your font to a mono-spaced family, it might produce the effect that you are after. Worth a shot?
font size of 2em
There is no such thing as a 'font size of 2em'. An em is a unit in the current font size, so the statement is circular. It is margins and indents and widths that should be defined in ems, not font sizes themselves.
Should i keep #wrapper{ width:100%} in print css? because on screen my design is a fixed width design 960 px. but there are so many paper type and sizes in the world and anybody can take print on any size paper, bigger and smaller.
So if in print css i do not specify relative width then i think print of page will cut of from right size if user will take print on the paper size which can smaller or larger width than my site #wrapper width (960px). then it can create problem.
http://www.dpandi.com/paper/index.html
printer also leave some margin when printing.
So should keep everything is relative size in print css?
update:
And should i also change float left or right to float:none in print css?
Yes, you should. If you stick to a definite pixel size, you could even run into a situation where different visitors could see different amounts of the page cut off because of their printer DPI and/or browser. You might want to also consider adjusting your font sizes to be relative as well (using em or %).
Word of caution: make sure all your elements flow correctly when you switch over to a relative width, or you could have other parts of your content cut off or pushed into strange places.
The browsers tend to translate pixels to a similiar size before sending to printer, so it will look similar to what you see on screen. It will not send the pixel size to the printer.