Class 10 Notes

 

Topics

  • Grades posted
  • Cool Careers: November 8 at 6:30pm-9:00pm
  • Finish Midterm Project Presentations
  • Questions for Luke W. via Skype
  • Media Queries

Grades Posted

Assignment 1- Chapter Questions
Assignment 2 – Yelp & Zillow Questions. Analyze 3 mobile websites
Assignment 3 – Mockup of website: 320 & 768
Assignment 5 – Team Assignment: Capabilities
Assignment 6 – Brief and Site Map
Luke W. – Questions for Luke


Media Queries

Media Types

http://www.w3.org/TR/CSS21/media.html#media-types

Add media queries in one of two ways:

1. Separate CSS files

<link rel=”stylesheet” href=”global.css” media=”all” />
<link rel=”stylesheet” href=”main.css” media=”screen” />
<link rel=”stylesheet” href=”paper.css” media=”print” />

You can place queries on link elements by inserting them into the media attribute:
<link rel=”stylesheet” href=”wide.css” media=”screen and (min-width: 1024px)” />

2. Or, create an @media

Create an @media block in your stylesheet, and associatie it with a particular media type:

@media screen { body { font-size: 100%; } }
@media print { body { font-size: 15pt; } }

Let’s take a look at:

@media screen (min-width: 1024px)  
body {
font-size: 100%;
}
}

Every media query has two components:

  1. Media type: screen, print, all etc.
  2. Query (wrapped in parentheses) The query can be split into two components
    the name of a feature (min-width) and a corresponding value (1024px).

Our media query above is written as part of an @media declaration, which enables us to put queries directly inside a stylesheet.

Some features accept min- and max- prefixes

An example is width: you can serve CSS conditionally to:

  • viewports above 1024 pixels by writing (min-width: 1024px),
  • or viewports below 1024 pixels with (max-width: 1024px).
We can chain multiple queries together with the “and” keyword

@media screen and (min-device-width: 480px) and (orientation: landscape) { … }

Have you ever wondered why on your iPhone a website displays as a smaller version of the desktop website?

When Apple launched the iPhone in 2007, they created a new attribute value for Mobile Safari’s meta element: viewport. Why? Well, the dimensions of the iPhone’s display is 320×480, but Mobile Safari actually displays web pages at a width of 980 pixels. If you’ve ever visited the New York Times on a WebKit-enabled phone (i.s=e. iPhone) then you’ve seen this behavior in action: Mobile Safari is drawing the page upon a 980px-wide canvas, and then shrinking it to fit within your phone’s 320×480 display.

Using the viewport tag allows us to control the size of that canvas, and override that default behavior: we can dictate exactly how wide the browser’s viewport should be. For example, we could set our pages at a fixed width of 320px:

Add to the head of the HTML

<meta name=”viewport” content=”initial-scale=1.0, width=device-width” />

The initial-scale property sets the zoom level of the page to 1.0, or 100%, and helps ensure some consistency across small-screen, viewport-aware browsers.

With this value in place, we can use max-width and min-width to look for resolution ranges below or above certain resolution thresholds, and conditionally load in CSS designed for those ranges.

@media screen and (max-width: 768px) { … }
In this query, we’ve asked that the browser render the enclosed CSS only if its viewport is no wider than 768 pixels.

Our query only overwrites the features we don’t want.

Common Breakpoints for Media Queries

1000px, 760px, 600px, 480px, 320px


Alima Example

http://cavanaugh.smcgrdes.com/grdes75/_html5/alima-media-queries/final_web/

Download the files for this example:
http://cavanaugh.smcgrdes.com/grdes75/_html5/alima-media-queries.zip

HTML

<!DOCTYPE HTML>
<html>

<head>
<title>Alima Pure</title>

<meta name="description" content="Welcome to Alima Pure. Browse our collection of 100% pure mineral makeup, including eyeshadows, eyeliners, blush, foundation, concealer, powder, and lipbalm. " />

<meta name="keywords" content="mineral makeup, natural mineral cosmetics, natural cosmetics, natural makeup, organic makeup, mineral based makeup, alima pure, mineral cosmetics, alima blush, alima bronzer, alima eyeshadow, alima eyeliner, alima foundation, alima finishing powder, alima lipbalm, alima brushes natural makeup, mineral makeup, mineral foundation, mineral eyeshadow, hypoallergenic, cruelty-free brushes, mineral cosmetics, natural cosmetics" />

<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

<script>
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('header');
document.createElement('footer');
document.createElement('figure');
document.createElement('figcaption');
</script>

</head>

<body>

<div id="wrapper">

<header>
<div id="logo"><img src="images/logo_large.gif" alt="logo"></div>

<nav>

<ul>
<li> <a href="#">nav 1</a></li>
<li> <a href="#">nav 2</a></li>
<li> <a href="#">nav 3</a></li>
<li id="nav4"> <a href="#">nav 4</a></li>
<li> <a href="#">nav 5</a></li>
<li> <a href="#">nav 6</a></li>
<li> <a href="#">nav 7</a></li>
<li id="nav8"> <a href="#">nav 8</a></li>
</ul>

</nav>

</header>

<div id="content">
<div class="slideshow"><img src="images/slideshow_large.gif" alt="slideshow"></div>
</div>

<div id="rightcol">
<div class="sidebar"><img src="images/sidebar_large.gif" alt="sidebar"></div>
<div class="sidebar"><img src="images/sidebar_large.gif" alt="sidebar"></div>
<div class="sidebar"><img src="images/sidebar_large.gif" alt="sidebar"></div>
</div>

<footer> <img src="images/footer_large.gif" alt="footer"></footer>

</div>

</body>
</html>

CSS (style.css)

@charset "UTF-8";
/* CSS Document */

article, section, aside, hgroup, nav, header, footer, figure, figcaption
{
display: block;
}

body {
}

#wrapper {
width: 90%;
background-color: #ccc;
margin-left:auto;
margin-right:auto;
}

header {
width: 100%;
background-color: #ccc;
}

#logo {	
}

img {
max-width: 100%;
}

nav {
width: 100%;
font-family:Arial, Helvetica, sans-serif
}
/* Navigation code from Listamatic

http://css.maxdesign.com.au/listamatic/horizontal03.htm

*/

nav ul {
padding-left: 3.783783783784%; /* 35 / 925 */
margin-left: 0;
background-color: #808080;
color: #FFF;
font-size: .875em;  /* 14 / 16 */
float: left;
width: 96.354166666667%; /* 925 / 960 */
}

nav ul li {
display: inline; }

nav ul li a {
padding: 10px 1.72972972973%; /* 16 / 925 */
background-color: #808080;
color: #383533;
text-decoration: none;
float: left;
border-right: 1px solid #ccc;
}

nav ul li a:hover {
background-color: #ccc;
color: #fff;
}

.highlight a{
font-weight: 900;
color: #444;
}

#content {
float: left;
width: 59.375%;  /* 570 / 960 */
padding: 10px 1.041666666667% 10px 4.166666666667%;  /* 10 / 960 */   /* 40 / 960 */
background-color: #ccc;
}

.slideshow {

}

.sidebar {
padding-top: 10px;
}

#rightcol {
float: left;
width: 34.375%; /* 330 / 960 */
background-color:#ccc;
}

footer {
width: 100%;	
clear:both;
height: 50px;
background-color:#999;
}

@media screen and (max-width: 768px) {

#wrapper {
width:100%;
}

}

@media screen and (max-width: 520px) {

nav ul {
width:100%;	
padding: 0;	
text-align:center;
border-bottom: 1px solid #ccc;
}

nav ul li {
float: left;
width: 25%;
}

li#nav4,
li#nav8 {
clear: right;
float: right;
}

nav ul li a {
width: 95%;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
}

nav ul li a:hover {

}

#logo {	
background-color: #808080;
width:100%;
height: 44px;
}

#content {
width:100%;
float:none;
padding: 0;
background-color: #FFF;
}

.slideshow {
padding-top: 10px;
}

#rightcol {
width:100%;
float:none;
}

footer {	
background-color: #808080;
width:100%;
height: 44px;
}

}

Leave a Comment