Term 2 Week 2

Media queries and styling for different devices.

This week in class we looked at media queries, a new type of CSS3. A media query can identify what device a user is accessing your site from. This allows you to style your site according to what device that will be used to view it. Due to the recent increase of phone/tablet browsing (in particular iOS) this type of responsive web design is vital. 

Here's a code example of a media query:

@media (max-device-width: 1024px) and (orientation: portrait) {

#container { width: 600px; }

#content { float: none; width: 600px; margin: 0 0 12px 0; }

#sidebar { float: none; width: 600px; }

header { margin-bottom: 12px; }

header hgroup { margin-bottom: 12px; }

header nav { float: none; clear: both; }

header nav ul { width: 100%; }

header nav ul li { font-size: 14px; width: 149px; text-align: center; }

header nav ul li:last-child { width: 150px; }

#banner { margin-bottom: 18px; }

#content article { padding: 20px; }

#content article img { float: none; margin: 0 0 10px 0; width: 100%; }

#sidebar aside { background: #A79F91; color: #fff; float: left; width: 250px; min-height: 170px; margin-right: 20px; padding: 20px; }

#sidebar aside:last-child { margin: 0; }

}

This particular query is for an iPad in portrait view.