jnewman12/ResponsiveCSS.md

## ResponsiveCSS.md

      
    Raw
  

              ResponsiveCSS.md
            
          
    Responsive CSS


Students will be able to....


Explain what a media query is, and when you would use it
Use media queries to write responsive CSS
Display projects on various screen sizes without CSS issues


Intro - What is Responsive Design?


Responsive Design uses HTML and CSS to move or change elements on a page based on the viewport size to make it look good on any screen - laptop, tablet, phone, etc.
Later in the course, we will learn about some frameworks that help with responsive design, but first, we'll do it by hand.


What is a media query?


CSS Media queries allow you to target CSS rules based on - for instance - screen size, device-orientation or display-density. This means you can use CSS Media Queries to tweak a CSS for an iPad, printer or create a responsive site.


How are media queries applied in CSS?

Since media queries can target many types of conditions, all of the applications of CSS media queries start with the @media keyword.
@media <type-of-media> and (<condition-key>: <value>) {
  /*STANDARD CSS RULES */
}

What types of media can be targetted?


Value
Description


all
Used for all media type devices


print
Used for printers


screen
Used for computer screens, tablets, smart-phones etc.


speech
Used for screenreaders that "reads" the page out loud


What types of conditions can be used?

Many kinds! The most common one you'll see for responsive site design is width expressions (some examples further below), but here's a list of the other properties you can set conditions for:


part 1
color
color-index
aspect-ratio
device-aspect-ratio
device-height
device-width
display-mode


part 2
grid
height
monochrome
orientation
resolution
scan
width


These expression types allow us to set conditions on when certain CSS rules should get applied.
For example, if the display-mode of a mobile device is set to portrait, make the font-size of the <header> 16px.
Or, more commonly, if the screen width is at least 400px, etc etc etc.
In the following example, the <body> tag will have a lightblue background color applied to when the screen width is anywhere between 0 and 767 pixels:

@media screen and (max-width: 767px) {
    body {
        background-color: lightblue;
    }
}


The following similar example will give the <body> a different background color when the width of the screen is 1200 pixels wide or more:

@media screen and (min-width: 1200px) {
    body {
        background-color: #FF0000;
    }
}


You can also specify a range of screen width, so that the rule will not be applied if the screen width is less than or greater than the range:

@media screen and (min-width: 768px) and (max-width: 1200px) {
    body {
        background-color: chartreuse;
    }
}


Notice that in all of these examples, the CSS rules inside of the media query are written as they would normally, they just appear inside another set of curly braces. This means that we can write as many CSS rules in a media query as we want:

@media screen and (min-width: 768px) and (max-width: 1200px) {
    body {
        background-color: chartreuse;
    }
    
    a {
        color: #eaeaea;
        font-style: italic;
        text-decoration: none;
    }
  
    #container {
        width: 600px;
        margin: 0 auto;
        padding: 0 12px;
    }
}

<meta>


One use of the <meta> tag in HTML5 is to set the viewport for your webpage. It should be placed in the <head> of your index.html file.

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


This tag allows you to set the content size to fit the viewport (browser window) to different devices. It also sets the initial scale to 1.
Copy the starter_code into your workspace and add this meta tag to the head of the html file.

@media Queries


CSS3 lets you use @media tags to set CSS properties based on conditions, such as screen size. Here's an example:

@media screen and (max-width: 980px) {
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 65%;
	}
	#sidebar {
		width: 30%;
	}
}


In the example on the last slide, these styles within the @media tag will only be applied when the screen has a width no larger than 980px. 980px is our 'break point', where the style will change.
Let's add a few different chunks of conditional formatting, based on screen size.


Independent Practice

Using @media and the example above, make two more blocks of conditional styling:

When the screen size is 700px or smaller:

Set the content and sidebar divs to not float and to have automatic width


When the screen size is 480px or smaller

Set the header div to automatic height
Change the font size of all h1s to 24px
Do not display the sidebar div


Other Ways to Make Your Webpage Responsive


There are a couple of other simple ways to make sure your webpage fits on any screen.
Instead of setting div width with pixels, you can set the width with percentages (%) or based on viewport width (vw).
Height can be set with percentages (%) or viewport height (vh).
There are also frameworks for responsive design, but we will get into those later in the course.


Exercise:


Try building out a web page for a blog (don't worry about the JavaScript here), and make it responsive!
Clone starter code and go from there!


Resources:


MDN - Using Media Queries
cssmediaqueries.com
Value	Description
all	Used for all media type devices
print	Used for printers
screen	Used for computer screens, tablets, smart-phones etc.
speech	Used for screenreaders that "reads" the page out loud