Crest Christopher composed on 2014-11-22 19:46 (UTC-0500): > How do you accommodate most, if not all screen sizes.
Let the browser produce its innate functionality at instead of constraining it: 1-Pretend px, pt, cm, mm, in and other non-relative units do not exist in CSS. 2-With one exception, which you can take care of with one MQ, care not how wide the viewport is. The exception is to query for landscape vs portrait, where in the latter you may want to drop one or more columns below or above instead of placing beside. #1 you can't do entirely, but it shouldn't be your sizing focus, because, sizing in px,: A-your focus is on a unit that disregards the nearly infinite possible physical permutations of user screen characteritics (width, height, pixel density, luminosity, viewing distance, etc.) B-makes you work harder doing things the computer is supposed to do (easily, and accurately) instead of you How many MQ breakpoints are you going to have, for both portrait and landscape, when the tiniest screens remain only 120px wide (in portrait) but the most dense have grown to well upwards 20 times that? Granted, a CSS px isn't the same thing as a device px, or at least, often won't be. Why should you concern yourself with whether or not or how much if it isn't necessary to get the perspectives you want? Regardless the ratio between them on any particular screen, the px unit still disregards the user completely, taking absolutely no account of how big the user wants or needs things on his screen to be in order to be useful. The angular definition of a CSS px in the standard doesn't address size in terms of what a user needs or wants. Unless you and your users are in position to agree on px sizes that work, it's rude for you to assume they work for anyone else but you. That the px unit ever got into CSS for any purpose except pixmap management was a travesty. You'll still need px for math to arrive at the image sizes you'll use, once per image placement. You'll also use px, again once, for each screen you test with, to determine how many px it takes on your own screen(s) to make up one unit of the size that is your sizing focus. That unit can be any of em, rem or ex, or a mixture of any of the three. Percent you'll use only secondarily. If your development screen's browser default size in px is 32, and its fullscreen viewport width 2548 (give or take, 2560 screen resolution), you get 79.625rem units of width to work with. If you want main content width, e.g. full paragraphs, to use roughly half *your* screen width, you make your P or P container 40rem wide. If you want a left column to be about 20% of your screen width, 20% of ~80 is 16rem. Add main and column together to get a 56rem outer container width. If you want an image inset to the right side of paragraph to be 50% of the paragraph width, declare width: 50%. If you want it centered, do it same as always. When you're done, whatever whitespace remains at the sides are whatever it is. Who cares? Your content is the size you made it, based on your local environment, to produce the perspectives that are the essence of your design. Now the guy with a different size and density screen loads your page, yet the same perspectives result. Instead of you, the computer calculated how many px it took to do it, the same way it did on yours. If his default font size is 16px, the size in px will be less, yet it will be based on a physical size he chose, and the content will have the same *relationships*, same "look", same perspectives, you chose, maybe with wider or narrower whitespace beside content because his screen's aspect ratio is different from yours, but the main content will still be 40rem wide, the left column will still be 16rem wide, and the image will still be 50% the width of the paragraph, all nice-sized from viewer's perspective, because the foundational size (1rem) is the very size he found optimal (presumptively, which is why his browser default is set to it, whether actively so or not). He doesn't need zoom, and you and/or MQ don't have to figure out how many px it takes to produce your design on his screen. You have no need to concern yourself with whether a user's browser is using the whole screen or some portion thereof. It turns out those who need bigger objects go for bigger windows, and those who need the biggest tend to go fullscreen, and tend to skip even trying with miniature screens. The people who like small may fit your 56rem wide page into a half screen width window anyway because they're using a smaller default size. Those who need it to fit with big text use bigger windows. You don't need to change anything for both to be happy, just do a respectable testing job to ensure your expectations have adequate flexibility across varying conditions. Use CSS to declare the *perspectives*, not px, in your total design. Then the user's browser figures out how many px it takes to produce your perspectives on his screen. That's polite; that's equivalent, if not lower, in overall mental effort; and it's called *automatic* accommodation of most if not all screen sizes. -- "The wise are known for their understanding, and pleasant words are persuasive." Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 ** a11y rocks! Felix Miata *** http://fm.no-ip.com/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
