On Wed, Nov 13, 2013 at 7:26 AM, william drescher
<[email protected]> 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
--
[email protected]
______________________________________________________________________
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/
