Percentage values scale the width of the viewport unlike pixel values.
Tom / I assume when you say use max-width you mean;
img {
max-width: 123px
}
If so why do that, if you know the image size just give the container
the size of the image ?
Christopher
Tim Arnold <mailto:tim.arn...@gmail.com>
Saturday, November 22, 2014 8:54 PM
Percentages does help make boxes/containers liquid but if you will
be using boxes with images that have a limited width then
percentages won't do, instead I'm left to do multiple MQ, arghh,
ah well.
Hey Christoper,
Tell me more about your images. I'm not sure why that would affect you
ability to use percentage width containers.
Tim
Tim Arnold <mailto:tim.arn...@gmail.com>
Saturday, November 22, 2014 8:14 PM
I use percentage widths on all my containers and try to limit MQ usage
to just where the layout needs to change to adapt. The breakpoints
(whether tied to specific devices, or just informed by how your design
behaves in a browser, is up to you) and since I use percentage widths,
that accounts for everything in between.
I try, as best I can, to not consider devices at all. Assume that your
are powerless (you are) and that you can't know all the device widths
(you can't) and design sites that flow.
This is a fair example of this idea that I recently worked on:
http://www.workingamericahealthcare.org/ (Built in Drupal, Front End
work mine, design by others who know better).
Note the "Find Your Rate" form and three blue boxes below the big
image. I determined where the layout should change drastically (only
twice, really) based on when things started to look like crowded. I
did try to test on popular devices to be sure my decisions didn't
leave any gaping holes, but nobody is perfect and no site is perfect.
I'm sure folks will find problems with this one, gawd knows I do ;)
Good luck!
Tim
On Sat, Nov 22, 2014 at 7:52 PM, Crest Christopher
Crest Christopher <mailto:crestchristop...@gmail.com>
Saturday, November 22, 2014 7:52 PM
I don't understand, I need multiple MQ ?
Christopher
Tom Livingston <mailto:tom...@gmail.com>
Saturday, November 22, 2014 7:50 PM
This will be handled by the min-width MQs, as mentioned before. Base
styles for small screens like iPhone. Then, for example, the next MQ
at 480 for landscape iPhone. The gap between base and 480 will take
care of the different width phones.
Crest Christopher <mailto:crestchristop...@gmail.com>
Saturday, November 22, 2014 7:46 PM
How do you accommodate most, if not all screen sizes. For example
iPhone 3,4,5 are all 320px width, but iPhone6 is 375, then most other
smart phones fall in-between, I did not include Phablets, and
tablets. I suppose using SASS, although I don't have experience using
SASS you could do a condition whereas one MQ could somehow fill in the
pixel gaps between an iPhone5 and a Nexus 4, or no ?
Christopher
______________________________________________________________________
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/
