Layout

From Things and Stuff Wiki
Revision as of 17:09, 20 August 2013 by Milk (talk | contribs)
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

Rearrange

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

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=14660"