StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Article <a href="http://gomakethings.com/mobile-first-and-internet-explorer/" rel="nofollow">here</a> provides important details.</p> <p><strong>What is mobile first?</strong></p> <p>Mobile first, from a coding perspective, means that your base style is typically a single-column, fully-fluid layout. You use @media (min-width: whatever) to add a grid-based layout on top of that.</p> <p>The alternative – desktop first – involves starting with a wide, grid-based layout, and using @media (max-width: whatever) to scale down to a single-column layout.</p> <p><strong>Why mobile first?</strong></p> <p>iPhone and Android browsers are quite capable, but older smart phones, feature phones and other small-screen devices like gaming consoles may not support media queries.</p> <p>Imagine trying to read tiny text in a big screen layout on an old, underpowered feature phone.</p> <p>Mobile first web design extends progressive enhancement to site layout, allowing you to serve simple, readable content to all devices, and layer on structure and presentation for more capable devices.</p> <p><strong>An example of Mobile First from the latest Dreamweaver 6 Fluid Layout is as below</strong> -</p> <pre><code>/* Mobile Layout: 480px and below. NOTE: No Media Query line here*/ .gridContainer { margin-left: auto; margin-right: auto; width: 87.36%; padding-left: 1.82%; padding-right: 1.82%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout.*/ /* NOTE: Now from here media query lines are added for Tablets and Desktop */ @media only screen and (min-width: 481px) { .gridContainer { width: 90.675%; padding-left: 1.1625%; padding-right: 1.1625%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } } /* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ @media only screen and (min-width: 769px) { .gridContainer { width: 88.2%; max-width: 1232px; padding-left: 0.9%; padding-right: 0.9%; margin: auto; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } } </code></pre> <p>Hope it helps.</p> <p><strong>EDIT</strong>: Another article <a href="http://www.scripttheweb.com/design/css-media-queries-beginners-guide/" rel="nofollow">here</a> which explains above example with a little more details. Excerpt as below -</p> <blockquote> <p>Progressive Queries</p> <p>Since some older mobile devices may not support media queries at all, bottling up the small version of your CSS rules inside a query may keep it from recognizing what CSS it can render within it. Instead of this, it may be a good idea to have the smaller version be the "default", while adding in the additional CSS rules for larger screens via media queries (since desktop browsers are more likely to recognize the media queries).</p> <p>Supporting IE and older browsers</p> <ul> <li><a href="http://code.google.com/p/css3-mediaqueries-js/" rel="nofollow">css3mediaqueries.js</a></li> <li><a href="https://github.com/scottjehl/Respond" rel="nofollow">respond.js</a></li> </ul> </blockquote>

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