Introduction to Computer Science Web Development Flavio Esposito http://cs.slu.edu/~esposito/teaching/1080/ Lecture 14
Lecture outline Discuss HW Intro to Responsive Design Media Queries Responsive Layout
Media Query are style sheet within style sheet Media feature (resolves to true or false) @media (max-width: 750px) { p { color:red; } } If (TRUE) then Styles within curly braces apply
Many Media Query are available @media (max-width: 750px) { } @media (min-width: 300px) { } @media (orientation: portrait) { } Most common Most common @media screen { } // used for computer screens @media print { } // used for printers https://www.w3schools.com/css/css3_mediaqueries.asp
Media Query are combined with logical operators Device with width range @media (min-width: 768px) and (max-width: 990px) { } Comma is equivalent to OR @media (min-width: 768px), (max-width: 990px) { }
Media Query Common Approach First specify the base styles p {color: red;} Then be specific later @media (min-width: 1200px) { } @media (min-width: 768px), @media (max-width: 990px) { } Remember not to overlap breakpoints (i.e. range boundaries)!
Media Query in action Download and follow along (open file with Chrome browser and text editor) http://cs.slu.edu/~esposito/teaching/1080/examples/ media-queries/media-queries-before.html - Add media queries - Note also mobile version and the range of media query from inspector of Chrome
Summary Basic syntax of a media query @media with logical operator
Summary Basic syntax of a media query @media with logical operator Remember not to overlap breakpoints
Summary Basic syntax of a media query @media with logical operator Remember not to overlap breakpoints Usually you provide basic styling then change or add to them in each media query
Practice Quiz Given the following media query: @media (min-width: 768px) and (max-width: 991px) {...} The styles within this media query will apply if the browser window is 991px wide. True or False?
Practice Quiz The usual approach to using media queries is to provide some base styling and then change and/or add to them within each media query. True or False?
Lecture outline Discuss HW Intro to Responsive Design Media Queries Responsive Layout
People browse from mobile!
What is a responsive Web site? Site designed to adapt its layout to the viewing environments by using fluid, proportion-based grid, flexible images and CSS media queries à Site s layout should adapt à Content verbosity or its visual delivery may change For example header text
Alternative to Responsive Web Design Have a server that detects device (user agent) based on the user agent in the HTTP request.
Alternative to Responsive Web Design Have a server that detects device (user agent) based on the user agent in the HTTP request. What is HTTP? High risks of using this feature: 1. develop one site for every device 2. Too much development (one site per version) 3. Risk of not covering all devices (new ones?)
Most common Responsive tool is a 12-column layout
Most common Responsive tool is a 12-column layout Why 12? Its has many factors: Divisible by 1,2,3,4,6, 12
12-column responsive layout Padding 3 3 3 3
A 12-column responsive layout can be split in many ways Padding 3 3 3 3 6 6 4 4 4
We need to use % to be responsive 100% 1 column = 100% / 12 = 8.33% 3 3 3 3 6 6 4 4 4
We need to use % to be responsive 100% 1 column = 100% / 12 = 8.33% 25% 25% 25% 25% 50% 50% 33% 33% 33%
We could also have nested grids, each grid is itself dividable into 12 100% 1 column = 100% / 12 = 8.33% 4 4 4 (33%) 6 6 3 3 3 3 4 4 4
Let s see these notions in practice http://cs.slu.edu/~esposito/teaching/1080/examples/ responsive/responsive-before.html
Most common Responsive tool is a 12-column layout Note the width: 90% plus the margins-right and margin-left set to auto will center the object
Most common Responsive tool is a 12-column layout /* Simple Responsive Framework. */.row { width: 100%; } The row class is trying to take 100% of that space
Now let s define some media queries /********** Large devices only **********/ @media (min-width: 1200px) {.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.collg-10,.col-lg-11,.col-lg-12 { float: left; border: 1px solid green; }.col-lg-1 { width: 8.33%; }.col-lg-2 { width: 16.66%; }.col-lg-3 { width: 25%; }.col-lg-4 { width: 33.33%; } // defining columns and marking with lg for large
Now let s define some media queries /********** Large devices only **********/ @media (min-width: 1200px) {.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.collg-10,.col-lg-11,.col-lg-12 { float: left; border: 1px solid green; }.col-lg-1 { width: 8.33%; }.col-lg-2 { width: 16.66%; }.col-lg-3 { width: 25%; }.col-lg-4 { width: 33.33%; }.col-lg-12 { width: 100%; } one column, should take 8.33% of space 3 columns, should take 25% of space 4 columns, should take 33.3% of space 12 columns should take 100% of space
Now let s define some media queries /********** Medium devices only **********/ @media (min-width: 950px) and (max-width: 1199px) {.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-12 { float: left; border: 1px solid green; }.col-md-1 { width: 8.33%; }.col-md-2 { width: 16.66%; }.col-md-3 { width: 25%; }.col-md-4 { width: 33.33%; }.col-md-12 { width: 100%; } one column, should take 8.33% of space 3 columns, should take 25% of space 12 columns should take 100% of space
I can assign the same element in 2 classes since my media query don t overlap /********** Medium devices only **********/ @media (min-width: 950px) and (max-width: 1199px) {.col-md-1 { width: 8.33%; } } /********** Large devices only **********/ @media (min-width: 1200px) {.col-lg-1 { width: 8.33%; } } Both classes.col-lg-1 and.col-md-1 will never exist at the same time!
Let s now look at the HTML code of the responsive layout <div class="row"> <div class="col-lg-3 col-md-6"><p>item 1</p></div> <div class="col-lg-3 col-md-6"><p>item 2 Wow this is cool</p></div> <div class="col-lg-3 col-md-6"><p>item 3</p></div> <div class="col-lg-3 col-md-6"><p>item 4</p></div> <div class="col-lg-3 col-md-6"><p>item 5 This is cool</p></div> <div class="col-lg-3 col-md-6"><p>item 6</p></div> <div class="col-lg-3 col-md-6"><p>item 7</p></div> <div class="col-lg-3 col-md-6"><p>item 8</p></div></div> When the device is large, the layout space will be occupied by column of size 3 (they spill over on the new line after 4 blocks since there are 12 columns total)
Let s now look at the HTML code of the responsive layout <div class="row"> <div class="col-lg-3 col-md-6"><p>item 1</p></div> <div class="col-lg-3 col-md-6"><p>item 2 Wow this is cool</p></div> <div class="col-lg-3 col-md-6"><p>item 3</p></div> <div class="col-lg-3 col-md-6"><p>item 4</p></div> <div class="col-lg-3 col-md-6"><p>item 5 This is cool</p></div> <div class="col-lg-3 col-md-6"><p>item 6</p></div> <div class="col-lg-3 col-md-6"><p>item 7</p></div> <div class="col-lg-3 col-md-6"><p>item 8</p></div></div> When the device is medium, as I squeeze the browser, the layout becomes a 6 and 6 column.
Let s now look at the HTML code of the responsive layout <div class="row"> <div class="col-lg-3 col-md-6"><p>item 1</p></div> <div class="col-lg-3 col-md-6"><p>item 2 Wow this is cool</p></div> <div class="col-lg-3 col-md-6"><p>item 3</p></div> <div class="col-lg-3 col-md-6"><p>item 4</p></div> <div class="col-lg-3 col-md-6"><p>item 5 This is cool</p></div> <div class="col-lg-3 col-md-6"><p>item 6</p></div> <div class="col-lg-3 col-md-6"><p>item 7</p></div> <div class="col-lg-3 col-md-6"><p>item 8</p></div></div> When I squeeze further outside the medium range, the floating property disappears and the elements are just stacked
Let s now look at how it looks on an iphone Why the layout does not work on a phone?
Let s now look at how it looks on an iphone If we look at the box model, we notice that The box width is 430 but the phone only has 375! Browser is trying to fit entire content into the viewboard of the phone because it does not find a mediaquery that is suitable How do we tell the browser: don t try to zoom-out, this is a responsive website
Don t try to zoom-out is specified with a special HTML meta tag <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>responsive Layout</title> Don t try to zoom out The default should be set without zoom!
Don t try to zoom-out is specified with a special HTML meta tag <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>responsive Layout</title> Verify that it is indeed visualize in one column by inspecting the phone view of this page with chrome: Don t try to zoom out http://cs.slu.edu/~esposito/teaching/1080/examples/ responsive/responsive-after.html The default should be set without zoom!
Practice quiz Most responsive frameworks use a 12-grid layout True or False?
Practice quiz To have a 12-grid layout means that 1 cell in that grid has width: 8.33% (100 / 12) True or False?
Practice quiz The following meta tag: <meta name="viewport" content="width=device-width, initial-scale=1"> Tells the browser to consider the width of the device as the real width of the screen and set its zoom level to 1, i.e., 100%, so it's not zoomed in or zoomed out. True or False?
Introduction to Computer Science Web Development Flavio Esposito http://cs.slu.edu/~esposito/teaching/1080/ Lecture 14