StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Hmmm, I certainly can't claim to understand what the developers intended when they wrote the CSS, but here's what I think...</p> <p>I believe the repetition of media queries is just to provide greater modularization of the CSS file. Note that both <code>@media (max-width: 767px)</code> and <code>@media (min-width: 768px) and (max-width: 979px)</code> are actually present twice in the file, so it's not likely an anomaly.</p> <p>The first declarations of these media queries appear to deal with classes that are added to elements to hide/show them at certain browser widths, so in effect selectively on different devices (specifying the <code>display</code> property). The second declarations seem to deal with the various classes that are foundational to Twitter Bootstrap's design principles, specifying styles (width, margin, min-height, etc.) of the various classes used in the 12-column grid system.</p> <p>Classes of the first set can be applied at the whim of the developer, to hide/show certain elements when the page is viewed on various devices. Classes of the second set are applied a bit more rigidly than the first set, since they are a more defining characteristic of the framework's grid system (eg. You can give an element classes of both <code>hidden-phone</code> and <code>visible-tablet</code> from the first set and see the effects of both, but giving an element classes of <code>span12</code> and <code>span6</code> will cause only the last-given class to take effect).</p> <p>It is because the first set of classes differs significantly in application from the second set of classes that the media queries declarations are declared twice, one for each set.</p> <p>In <em>Scalable and Modular Architecture for CSS</em> (2012), Jonathan Snook comments on this concept of modularization, stating,</p> <blockquote> <p>Yes, this does mean that the media query declaration may (and likely will) get declared multiple times but it also allows for all information about a module to be kept together.</p> </blockquote> <p>(I apologize if I used the wrong terms when referring to styles/CSS/HTML! I'm still learning...)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload