If I mark all my divs in percent, they fill up all the space nicely. I am facing 2 problems:
a) Image sizes: How do I define image sizes so that they do not become larger or smaller than wanted as the window resizes
b) Font sizes: How do I make the font size increase or decrease based on resolution - should this be done at all? (The problem I face is that the text becomes illegible at very high resolutions)
Please point me to a good reference on how to make liquid layouts.
Regarding point b) it is, IMHO, good practice to use relative font sizes, rather than absolute ones, so that the fonts are sized compared to the browsers base settings (I'm guessing, from your problem, that you are using point or px sizes, yes?). You have the heading tags, of course, but you also have the font-size CSS attribute and the ability to size fonts in % or ems. You have hit one good reason to use relative sizes - on high res monitors this can make absolute-sized fonts unreadable (I have seen, in the old days when 14" 800x600 monitors were standard, a website that rendered to about the size of a matchbox on a high-res 21" monitor). There also the issue of "politeness" and accessibility - the user may have set their browser base-font size larger or smaller because of personal preference and/or accessibility issues, and to override this to an arbitrary size doesn't seem, to me, to be a good idea.
have a read on the font-size section of this page:
http://www.w3schools.com/css/css_font.asp
If you need some actual examples then please post a bit of your code and CSS.
Good article here
http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
for a) I love using this
img {
width:100%;
max-width:400px;
}
then, if you need to, add one of the many javascript fixes for max width in older browsers.
I found a simple solution for your second question about font size.
b) Font sizes:
Using stylesheet calculator and properties like:
vh - viewport height
vw - viewport width.
Your font size will take same size on your view, but it can be unreadable if you don't handle small sizes layout.
For regular size: font-size: calc(.5vh + .8vw);
For large size: font-size: calc(5vh + 5vw);
Hope this might help you.
Related
I've read quite a bit about the "em" measurement for "font-size" and I've noticed that some say that especially disabled users benefit from "em" because they can adjust the size of font.
I'm new to CSS & HTML and I do not understand how this really works.
As I understand I can always - as a user - enlarge the viewing size in my browser. Doesn't this also work when I use "px" all the time?
Em represents a page's default size, so for example, 1em might be 12px, but for larger screens may be something else, perhaps 16px. 2em would be twice that size of 1em.
The takeaway is em scales with the screen resolution and is a good choice for responsive design.
Px on the other hand is a specific, fixed sizing guide, where a pixel is one square on a screen. So 12px on one screen may look small on a larger screen.
I recommend using em for most purposes unless there's a good reason you need a specific pixel size.
One of the specs for Web accessibility level AA that is text can be resized to 200% without loss of content or function.
So if I zoom up to 200%, everything needs to look right.
How can I achieve that regarding the font size?
The issue is not so much a matter of font size or font size units, since most common browsers have a built-in zoom function that will zoom any text, regardless of the font size unit. The issue is that resizing may result in text containers that start to overlap, which then causes some content or functionality to become invisible (because it ends up behind something else). Success criterion 1.4.4 was written when zooming functionality was not yet as widespread as today. (In 2008, there were several browsers that supported zooming, but many people were still using older browsers that didn't support zooming, and text resizing—which is not quite the same as zooming—could cause overlap in web content.)
So, while using units such as em, %, rem etc. is a good idea, you need to make sure that text containers (such as section elements, nav, etc.) that are displayed next to each other don't overlap when you zoom in to 200% or resize text up to 200%. For example, you can describe column width using units such as % or em, or you can make sure that text containers that are next to each other at the default size end up below each other when zoomed in. If you use responsive design to make your web pages adapt to different screen sizes, you should also be able to handle zooming in desktop browsers.
You should try using em instead of px..
For example if you have div inside yourbody - suppose the font-size of the body of the page is set to 16px.
If the font-size you want in div section is 12px, then you should specify 0.75em (because 12/16 = 0.75).
You should try use "rem" (support most of the browsers).
Then you set the font-size of the root ( the html).and all the page reasize for example if you want the "h1" be always 2 times the body ,set it to 2rem;
There's quite a lot of resources encouraging to use ems over pixels in media queries. However, none of them easily explains the obvious doubt about it:
If I have two divs and I want to hide one of them on iPhone4-like devices, how do I do it with em-based media queries? The device resolution is 640x960 in pixels.
In every article there a note that usually 1em = 16px. But since it is not certain, why would I want to convert to ems and risk breaking my design? What if user changes his default font to 20px? Or 10px? My div will hide either too soon or too late.
Example from Foundation:
/* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) { }
How can I be sure it really is 641px and not 1282px? Why would anyone use something so untrustworthy instead of old good pixels?
First the sizing in em cannot be changed by the user as this is a browser setting that cannot be changed. So at best it could vary between browsers but I don't know any that differs from this standard. For that reason, it can be considered quite safe to use.
But for media queries, I would recommend to use rem units. em units is mostly preferred for font sizing in components as it scales relatively based on the parent DOM element. While rem units work well for sizing root elements (width, height...).
px is an absolute unit of measurement (like in, pt, or cm) that also
happens to be 1/96 of an in unit. Because it is
an absolute measurement, it may be used any time you want to define
something to be a particular size, rather than being proportional to
something else like the size of the browser window or the font size.
em is not an absolute unit - it is a unit that is relative to the
currently chosen font size. Unless you have overridden font style by
setting your font size with an absolute unit (such as px or pt), this
will be affected by the choice of fonts in the user's browser or OS
if they have made one, so it does not make sense to use em as a
general unit of length except where you specifically want it to scale
as the font size scales.
Based on this, the most accurate option is using px instead of embased on what you are asking, but you can always redefine your fonts and use rem instead, this is better for responsive websites, together with percentages. That's a matter of judgment in every single element you are adding to your website, and of course, lots of testing to make sure it looks good and works flawless on any resolution and devices.
I personally prefer to do it this way:
I define my fonts and font-sizes (this overrides the default ones)
I use percentages for the block elements
I use rem for the fonts and media queries
But of course sometimes I have to use pixels or change some of my "default" rules depending on my needs. As I said before, it's too a matter of judgement on your needs and on it is best.
Note: The em unit is relative to the font-size of the parent. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.
I had to redo a website from flash to html/jquery.
Everything looked great. Until I tested the site on a netbook where the screen resolution is much smaller. All the elements were misaligned or didn't stretch as I wanted it to. Or there were scroll bars everywhere.
So, How would do I make it stretch or resize properly,
Is there a property which I can set somewhere that would resize everything proportionately?
You should use heigh / width in percentage(%) rather px / em. change the css file.
Is there a property which I can set somewhere that would resize everything proportionately?
No, I wish :P You'll need to redo the layout to make it liquid or use media queries to make it responsive to different resolutions. I'm afraid both solutions could be pretty complex.
Is there a property which I can set somewhere that would resize everything proportionately?
Everything? No. Font sizes won't adjust based on window size (at least not without JS).
You can set the widths of most things using percentage units in your stylesheets, but even then there will be a point where things will break down.
The current buzzword is responsive web design (I can't comment on the quality of the links from that page) in which media queries are used to provide different designs for different sized browsers.
The property called Media Query we mostly use this property with Responsible Web Design. In which we tell browsers change the specific css property at that particular screen size.
Check this article for more http://css-tricks.com/6206-resolution-specific-stylesheets/
& for Responsible Web Design mostly use value in Percentage instead of Pixels .
Check THIS website for more reference.
unfortunately there is no "magic" which scales things up/down. i can think of some guidelines:
Use relative widths for things (percentages) instead of absolute value
no hardwired sizes, keep them in separate CSS documents
work your way up: choose a minimum resolution, work upwards from it. it makes sizing things much easier.
The question was to RESIZE not to REALIGN. Using percentiles will only change WHERE the HTML elements show up on the page. It will not change their SIZE.
you can use with and height in percentage to set your screen for all resoulation..Give the 100% width to the body and the div you want give 100% width.
I have designed and developed more than 10 sites, but I still have a doubt about the correct unit I should use. Should it be px, em or %?
EDIT 1: FOR LAYOUTS (Especially for container boxes)
Different units depending on context. If there was one that was best for every situation, then there wouldn't be so many units.
As rules of thumb go:
If you are working on screen media:
Use % for font sizes
Use px for images
Use px, %, or em for box sizes
Use ratios for line height
If you are working in print media:
It might be wise to avoid px (this is not a hard rule by any means) and everything else is fair game. It really depends how much control you want.
There's no real right or wrong, but as a rule of thumb:
For anything you want a certain, fixed size, use PX
For anything you want to scale with font-size, use EM
For anything you want to scale to the available space in the window/container, use %
Each used to have specific advantages or disadvantages in different browsers when it came to users scaling the browser's base font-size/zooming, but more recent versions of the browsers by-and-large get around these issues by scaling everything, not just font-size.
If you're talking about font-size then px and pt are not ideal.
Ems and Percent units are scalable, therefore they are far more accessible - friendly for the visually-impaired. They also scale down well for mobile phone users.
Px and Pt units do not scale upward for visually-impaired users, or downward for mobile phones.
If you're talking about layout or containers then it depends on the type of design you want - fluid or static - and there isn't necessarily a "right" answer.
Without going into an example, it's difficult to advice. Do you have a site in mind we could look at?
Use the unit you need in the specific context.
Unit Description
====================
% percentage
in inch
cm centimeter
mm millimeter
em 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
ex one ex is the x-height of a font (x-height is usually about half the font-size)
pt point (1 pt is the same as 1/72 inch)
pc pica (1 pc is the same as 12 points)
px pixels (a dot on the computer screen)
source: http://www.w3schools.com/css/css_units.asp
For flexibility and accessibility I recommend using % for horizontal measures (relative to the user's screen), and em for vertical measures (relative to the user's font setting).
For fixed width layouts
For as much as pixel perfection I would suggest to use PX for width ,height, margin, and padding
for line-height use unit-less value like {line-height:1.2}
for typographic elemets use {font-size:62.5%) for body then use em for other elements
in HTML for <img> always use unit-less width and height .