Day 30: Media Queries

Media queries allow us to taylor our content to a wide range of devices.  This is a basic media query that changes the background color when the screen is 768px wide or less:

@media screen and (max-width: 768px) {
body {
background: #FF6347;
color: #FFF;
}
}

Note that the max-width property is contained withing parentheses, NOT curly braces.  Also, note that the 768px value for the max-width property is NOT followed by a semicolon.  

I learned of three ways to call a media query.  The first way is to insert all the media queries into your css file and then call the css file in the head element of your html (below the <title> is fine) like so:

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

This method is faster than the second method, as the server will only load the media query when it returns a positive.  The second method is to make an individual css file for each media query, and then link them like so (right below the main link to the style sheet in the html file):

<link href="css/wider.css" rel="stylesheet" media="screen and (max-width: 768px) and (min-width: 481px)">

<link href="css/narrow.css" rel="stylesheet" media="screen and (max-width: 480px)">

The drawback to the second method is that the server will always load the media query, whether it returns a positive or a negative, and this can significantly affect your site's performance.  The third method is to add the media query as part of an import directive in our style sheet.  This can be added into the style.css file like so:

@import url("wider.css") screen and (max-width: 768px) and (min-width: 481px);

@import url("narrow.css") screen and (max-width: 480px);

The @import method can be very expensive performance-wise, because each one is a server request, so it shares some of the downsides of the second method.  This query will fix the content's width (in this case labeled via a class, and called ".wrap")  at 700 px when the viewport goes to 1000px or more:

@media screen and (min-width: 1000px) {
.wrap {
width: 700px;
}
}

The modern trend in web design is to take a mobile-first approach.  That is, we should design the mobile version of the website first, and then, after that's done, we can design the tablet/desktop version of the site.  This media query works for phones to tablets (and larger):

@media screen and (min-width: 481px) {
}

This media query works for tablets to desktop (and larger):

@media only screen and (min-width: 769px) {
}

This media query caps the .wrap class at 980px width when the viewport goes to 1024px or greater, to avoid stretching it too far on very large viewports.

@media only screen and (min-width: 1024px) {
.wrap {
width: 980px;
}
}

I went over device-specific media-queries as well.  The first line of code we inserted, to make an iphone screen display the sample mobile site correctly, was this (specifically, it instructs a device to zoom its layout viewport to 100% of the device width):

<meta name="viewport" content="width=device-width">

This media query (below) removes the comments section of a website when a user accesses the website via a media device which has a device width of 479px or less (NOT a browser shrunk to 479px or less, a DEVICE).

@media screen and (max-device-width: 479px) {
.comments {
display: none;
}

}

This media query (below) takes effect when the orientation is set to portrait.

@media screen and (orientation: portrait) {
body {
background: red;
}

}

The issue with that code is that it also takes effect when a browser changes size on a desktop browser.  Because of the confusion this may cause, the instructor advised us to stick with the min-width/max-width property for now.

The acronym ppi is pixels per inch, dpi is dots per inch, and both mean the same thing.  Also, dppx means dots per pixels.  The device pixel ratio is the ratio between a device's logical pixels and physical pixels.  Latest iphone has a device pixel ratio of 2 because physical resolution on a retina display is double the logical resolution.  The physical resolution is 640 by 1136, while logical resolution is half of that, 320 by 568 pixels.  If pixel ratio is 2, then 1 CSS pixel in the code will be depicted as 2 CSS pixels on the screen (2 physical pixels, 1 logical pixel).

The resolution media feature has much stronger device support, so we only need to include the -webkit vendor prefix for device pixel ratios for older webkit browsers.  All other device browsers will use the resolution media query (min-resolution, max-resolution, or resolution).  The resolution media feature describes the resolution of the device (the pixel density). The display resolution of a screen is the total amount of pixels available.

High resolution displays can cause issues with images, making them look blurry if we don't optimize the image for that kind of display.  The code below is made to call a higher resolution image when a user is using a high resolution screen:

@media screen and (-webkit-min-device-pixel-ratio: 1.5),
  screen and (min-resolution: 144dpi),
  screen and (min-resolution: 1.5dppx) {
  .mike {
  background-image:url("../img/mike2x.png");
  background-size: 45px 45px;
  }

  }

Here are some relevant formulas:

device-pixel-ratio: 1 = 96dpi

device-pixel-ratio x 96 = resolution in dpi

^^ That's how we come up with the 144dpi figure in the above code.  The above media query device pixel ratio and resolution number are a good starting point for making adjustments for high resolution screens. The dppx unit represents the number of dots per pixel, and it maps perfectly to the ratio value, so if we use it, we don't use the dpi in that case.  However, dppx is not widely supported yet, so until it is, we should do the match, figure out the dpi, and use the dpi figure for the min-resolution property, for example.

The next thing we went over was the code needed to make the printer-friendly version of a page show only the necessary content (for example, on a blog, we would not want the comments section included).  Below is the code that we entered.  It's quite a bit of code, it makes the page that gets printed be primarily text and helps with efficient printing in many ways.

@media print {
* {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
.main-nav,
.sidebar,
.comments,
.main-footer,
img {
display: none;
}
.main-header {
margin-bottom: 0;
border: none;
text-align: center;
}
a[href^="http:"]::after {
content: " [" attr(href)"]";
color: blue;
}
@page {
margin: .5cm;
}
@page :first {
margin-top: 2cm;
}
h2, ul {
page-break-after: avoid;
}
p, ul {
orphans: 3;
widows: 3;
font-size: 11pt;
}

}

SUMMARY OF CODING SKILLS

Total Treehouse Points: 2,016

Treehouse Points by Subject Matter: HTML 663, CSS 1,323, and Miscellaneous

Treehouse Ranking (%): "You have more total points than 75% of all students."

Badge(s) Earned Today:

Media Queries

Courses Completed:

How to Make a Website
HTML
CSS Foundations

Books Read or in Progress:

"Head First HTML and CSS," by E. Robson & E. Freeman (In progress, I've read the 37 pg. preface and the first 255 pgs. of actual content, which is the HTML section of the book)

Hours Spent Coding Today: 5

Total Hours Coding: 127