I understand, you take the pages max width, whatever that may be then do
the math, in your example, you used 960px.
Christopher
Tom Livingston <mailto:[email protected]>
Sunday, November 23, 2014 12:14 PM
Normally what I do is have my page width be 100% of the viewport until
I reach my "desktop" breakpoint. At that point my page max-width will
be in effect. Typically we max our page content at 960. So it's at
this point I start working with percentages based on a max of 960.
Obviously, use your own parameters for your page.
Crest Christopher <mailto:[email protected]>
Sunday, November 23, 2014 11:58 AM
Target / Context = Result So if your max page width is 960 and your
container is 650 then: 650/960=.677 (x100) so 67.7%
How do I find my page max width, if the page width can be adjust at
any time, right now I don't know what my page width is so to give
containers and so forth the correct percentage widths.
Christopher
Tom Livingston <mailto:[email protected]>
Sunday, November 23, 2014 11:42 AM
Again, the combination of percentage width and min-width MQs should
cover a vast majority of devices for layout. Testing every device is
nearly impossible.
Crest Christopher <mailto:[email protected]>
Sunday, November 23, 2014 11:29 AM
Tom & Tim - I forgot about the mobile tools in Chrome, they are pretty
good, I wonder if you can add devices, my phone is not listed.
Christopher
Tim Arnold <mailto:[email protected]>
Sunday, November 23, 2014 11:18 AM
On Nov 23, 2014 11:01 AM, "Tom Livingston" <[email protected]
<mailto:[email protected]>> wrote:
>
> While testing on devices is important, you get a long way using the
dev tools in Chrome or Firefox.
The new dev tools in Chrome also provides some pretty amazing device
emulation. It's certainly not perfect but miles closer to real than
simply resizing the viewport as you work which, as Tom says, will get
you a long way.
Tim
______________________________________________________________________
css-discuss [[email protected]]
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/
