many such breakpoints (out there in practice) are defined in ems, even when
the author is thinking pixels, where one EM is calculated as 16 pixels.
/* for 600px .......(16 * 37.5 == 600) */
@media all and (min-width: 37.5em) {
...css goes here
}
I've been doing this because the examples I copied did this. But I don't
know why. Can anybody explain this issue?
On Wed, Nov 13, 2013 at 6:36 AM, Tim Arnold <tim.arn...@gmail.com> wrote:
> On Wed, Nov 13, 2013 at 7:26 AM, william drescher
> <will...@techservsys.com> wrote:
>
> > I looked and googled but... what is a css breakpoint?
> > Is it just setting width ?
> >
> > bill
> >
>
> Breakpoints are points at which certain CSS rules kick in. They are
> most commonly based on the width of your browser viewport but can also
> be tied to other properties of a device. You use "media queries" to
> define them.
>
> A common example would be that you have a block on the page that is
> 50% of the available width (maybe lining up horizontally in two
> columns) and you need them to switch to 100% wide on smaller screens
> (stacking vertically instead of horizontally). In the case below, any
> screen less than 700px wide would do this.
>
> 700px would be the "breakpoint"
>
> .story{width: 50%; float: left;}
>
> @media only screen and (max-width: 700px){
> .story(width: 100%; float: none;}
> }
>
> NOTE: this is not just about width. You could change anything at all
> defined in CSS at these different breakpoints.
>
> http://www.w3.org/TR/css3-mediaqueries/
>
> Tim
>
>
>
>
> --
>
> tim.arn...@gmail.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/
>
--
/* Colin (Sandy) Pittendrigh >--oO0> */
______________________________________________________________________
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/
