StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Instead of trying to figure out which screen size to detect, maybe you could approach the problem from a different angle. </p> <p>One of the main reasons for using responsive desing is so your site will will display well on all devices, so look at your specific design and examine what happens to your design and page layout as you change the window size (both width and height). </p> <p>Maybe you'll be lucky and have a fluid design that reconfigures well, then it's possible that you won't even need to use @media queries. </p> <p>It's more likely that at certain viewports or window sizes the design will breakdown though and this is where @media queries come in. </p> <p>There are no hard and fast rules for which breakbpoints you use for @media queries, as a starting point <a href="http://foundation.zurb.com/old-docs/f3/media-queries.php" rel="nofollow">Foundation</a> uses </p> <pre><code>/* Very large screens */ @media only screen and (min-width: 1441px) { ... } /* Medium screens */ @media only screen and (max-width: 1279px) and (min-width: 768px) { ... } /* Small screens */ @media only screen and (max-width: 767px) { ... } /* Landscape Orientation */ @media screen and (orientation: landscape) { ... } /* Portrait Orientation */ @media screen and (orientation: portrait) { ... } </code></pre> <p>Maybe you'll want to add a rule for smaller screens, but this is probably as good as any. </p> <p>Remember that @media queries are there to help when your design breaks and hopefully you won't have to define a lot of rules at every breakpoint. </p> <p>Good luck!</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