Re: [css-d] Responsive Design Question
I would recommend using min-width MQs. That will apply the styles to devices whose width is AT LEAST as wide as the designated width in the MQ. What I do is set base styles that apply to all devices up to the next min-width MQ. These base styles cover the multitude of size differences. At the first MQ breakpoint, I just add styles to tweak the layout for the content at that size. Repeat. HTH On Sat, Jan 10, 2015 at 1:46 PM John wrote: > > On Jan 10, 2015, at 10:05 AM, Chick Newman > wrote: > > > > What I'd like to know is whether this query will apply to all devices > whose maximum viewports are smaller than 600 px, e,g, if it is only 380 > px. If not, does that mean I have to set up a max-width property specific > for every hand-held device on the planet? Is there a way to specifiy all > devices whose viewports are smaller than 600px? > > It looks like your query will handle 600px and smaller, yes. But to my > experience, the more important question than “one size fits all” is what > actually happens when you get to 320px? Do things make sense visually, or > is an additional set of rules necessary to ensure a good User experience at > 320, or at any other size that’s likely to be encountered? > > There are charts out there which offer granular detail on what looks like > every web-capable gizmo on earth, and there are other spots, like Chris > Coyer’s CSS tricks which offer some *recommended* media queries, which > likely handle all the viewport sizes, but I think like any good soup, you > need to taste it yourself, and add salt if needed. > > J > __ > 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/ __ 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/
Re: [css-d] Responsive Design Question
> On Jan 10, 2015, at 10:05 AM, Chick Newman wrote: > > What I'd like to know is whether this query will apply to all devices whose > maximum viewports are smaller than 600 px, e,g, if it is only 380 px. If > not, does that mean I have to set up a max-width property specific for every > hand-held device on the planet? Is there a way to specifiy all devices whose > viewports are smaller than 600px? It looks like your query will handle 600px and smaller, yes. But to my experience, the more important question than “one size fits all” is what actually happens when you get to 320px? Do things make sense visually, or is an additional set of rules necessary to ensure a good User experience at 320, or at any other size that’s likely to be encountered? There are charts out there which offer granular detail on what looks like every web-capable gizmo on earth, and there are other spots, like Chris Coyer’s CSS tricks which offer some *recommended* media queries, which likely handle all the viewport sizes, but I think like any good soup, you need to taste it yourself, and add salt if needed. J __ 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/
[css-d] Responsive Design Question
I am trying to set up a media query for my website. Here's a
hypothetical example of a query:
@ media and (max-width:600px) {
#stage {
width:50%;
clear:both;
}
}
What I'd like to know is whether this query will apply to all devices
whose maximum viewports are smaller than 600 px, e,g, if it is only
380 px. If not, does that mean I have to set up a max-width property
specific for every hand-held device on the planet? Is there a way to
specifiy all devices whose viewports are smaller than 600px?
__
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/
