StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There are a few different ways, however the easiest to maintain is to use a mobile first development strategy. This means writting the css for the smallest size (using smaller image sizes where possible), and this will become the base, then using css3 media queries, override the base css with new styles.</p> <p>Of course IE will have some issues, so use a conditional statement (lte ie8) after the base stylesheet (so that it overwrites the base styles) to load the desktop css for ie.</p> <p>As for JS, make sure that the site can work fine with JS disabled. One bit of advice is to write the site completely without javascript, make sure it works, and then add it in after to enhance the existing functionality.</p> <p>And as for the main content, keep it the same, your php doesn't need to be any different for the different devices, let the css do all the heavy lifting.</p> <p>Here is a sample of what you might have </p> <pre><code>//Your Base CSS (no background images here) .content{ width:240px; margin:0px auto; } .logo{ background-image:url(../logosmall.png); } // Smartphones (portrait and landscape) @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { // Styles } // Smartphones (landscape) @media only screen and (min-width : 321px) { // Styles } // Smartphones (portrait) @media only screen and (max-width : 320px) { // Styles } // iPhone 4 @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { // Styles } // iPads (portrait and landscape) @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { // Styles .content{ width:768px; } .logo{ background-image{url(../logomedium.png); } // iPads (landscape) @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { // Styles } // iPads (portrait) @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { // Styles } // Desktops and laptops @media only screen and (min-width : 1024px) { // Styles .content{ width:1024px; } .logo{ background-image:url(../logolarge.png); } } </code></pre> <p>So in this example I'm setting a base width of 240px (assuming that the smallest screen that will be used is 240px) and having it centered, then I overwrite that depending on the window size to a larger value. The same goes for the image, by default I serve the smallest image, and then scale it up depending on window size. </p> <p>This is an example of a mobile-first approach, which many consider to be the best practice when working with responsive design, as it reduces the amount of background images a phone has to load. </p> <p>take a look at <a href="http://mediaqueri.es/">http://mediaqueri.es/</a> to see some examples of responsive designs</p> <p>And search around for more information, what I provided here just scratches the surface. A search for mobile first responsive design will get you a lot of info on this subject.</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