Layout

From Things and Stuff Wiki
Revision as of 01:45, 25 April 2014 by Milk (talk | contribs) (→‎Basics)
Jump to navigation Jump to search


#rwd

Basics

to review;

Examples

Templates

Viewport

Device sizes

Media Types and Queries

Examples

@media <media type (expressions)> {
  /* media-specific rules */
}

 @media screen and (min-width: 500px) and (max-width: 800px) { ... }

or 

<link rel="stylesheet" media="<media type (expressions)>" href="specific.css" />

Firefox needs spaces before and after "and"

newer

<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" />
<link rel="stylesheet" type="text/css" href="enhanced.css" media="screen  and (min-width: 40.5em)" />

Poly, etc.

  • Respond.js - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
  • device.js - a starting point for doing semantic, media query-based device detection without needing special server-side configuration, saving the time and effort required to do user agent string parsing.

Articles

320 and Up

@media only screen and (min-width: 480px) {
 /* 480 =================================================== */
}
@media only screen and (min-width: 600px) {
 /* 600 =================================================== */
}
@media only screen and (min-width: 768px) {
 /* 768 =================================================== */
}
@media only screen and (min-width: 992px) {
 /* 992 =================================================== */
}
@media only screen and (min-width: 1382px) {
 /* 1382 =================================================== */
 body {
   max-width: 1440px;
 }
}

Need to confirm 320andup Sass to multifile so mobile doesn't get desktop sized styles.

Other

/* Flexible iFrame */

.Flexible-container {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px;
   height: 0;
   overflow: hidden;
}

.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

 <!-- Responsive iFrame -->
 <div class="Flexible-container">
    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ch/maps?f=q&source=s_q&hl=de&geocode=&q=Bern&aq=&sll=46.813187,8.22421&sspn=3.379772,8.453979&ie=UTF8&hq=&hnear=Bern&t=m&z=12&ll=46.947922,7.444608&output=embed&iwloc=near"></iframe>
 </div>

Rearranging elements

text formatting; 

@media (max-width: 480px) {
   .your-particular-selector br { display:  none; }
}

text-content; responsive text

Navigation

select menu;

  • TinyNav.js is a tiny jQuery plugin (362 bytes minified and gzipped) that converts ul and ol navigations to a select dropdowns for small screen. It also automatically selects the current page and adds selected="selected" for that item. This isn't the first plugin to do this and it doesn't provide a lot of options, but it might be the smallest (file size).
  • http://css-tricks.com/blog/convert-menu-to-dropdown/

Images

  • Imager.js is an alternative solution to the issue of how to handle responsive image loading, created at the BBC [2]

scrset

Tables

JavaScript

See also JS_scripts#Responsive

Shim

  • css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support.

Performance

Video

Tools

Responsive testing

  • ish. is yet another viewport resizer.

Mobile testing

Other

PhoneGap

Retrieved from "https://wiki.thingsandstuff.org/index.php?title=Layout&oldid=23242"