Responsive Web Design
( HTML5 by Eric Korson )
You mean we got to change something on the website?
Styles designed for suppers and me, Syndrome.
Sometimes I just want the world to stay saved!
Fluid grid
A fluid grid consists of 12-columns that shrinks with the view of the browser. For example a mobile device, phablet, tablet, desktop; or, desktop HD.
One
Eleven
Two
Ten
Three
Nine
Four
Eight
Five
Seven
Six
Six
Seven
Five
Eight
Four
Nine
Three
Ten
Two
Eleven
One
Forms
All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.
Tables
| Name | Age | Sex | Location |
|---|---|---|---|
| Ted Gammon | 26 | Male | San Francisco |
| David Lec | 42 | Male | Hayward |
Media queries
Media queries are used to create a responsive design, where different CSS styling is applied to different screen sizes. That means I can use a media query to make my site
display nicely on every type of device, from a larger desktop monitor, to a smaller phablet, tablet; or, mobile device. My queries mostly target the
min-width property. My media queries are as follows:
/* Desktop or Desktop HD - Screens with a width of 960px or higher. */
@media all and (min-width: 960px) {
html {
font-size:62.5%;
}
}
/* Phablet or Tablet - Screens with a minimum width of 600px and maximum width of 959px. */
@media all and (max-width: 959px) and (min-width: 600px) {
html {
font-size:58%;
}
}
/* Mobile Device - Screens with minimum width of 320px and maximum width of 599px. */
@media all and (max-width: 599px) and (min-width: 320px) {
html {
font-size:53.5%;
}
}