The media queries

A quick presentation on the media queries.

Transcript

1. { MEDIA QUERIES } INTRODUCTION TO VALENTIN MENARDIE - ROMARIC PAPIS Monday, November 12, 12
2. WHAT ARE THE MEDIA QUERIES? Monday, November 12, 12
3. WHAT ARE THE MEDIA QUERIES? • A CSS feature that helps you specify how your page will be displayed on different mediums • How do I use them? @media query { // your code goes here } Monday, November 12, 12
4. WHAT ARE THE MEDIA QUERIES? • There is a query for everything : print, screen, handheld @media print { // The code here will be used if the page is printed } @media projection { // The code here will be used if the page is projected } • Media queries accept logical operator such as and / , / not @media screen and print { // The code here will be used both on screen and paper } Monday, November 12, 12
5. WHAT ARE THE MEDIA QUERIES? • @MEDIA has advanced queries • Some queries : max-width and min-width @media all and (min-width: 800px) { // here, your code will be used if the width of the screen is bigger than 800px } @media all and (max-width: 1000px) { // your code will be used if the width of your screen don’t exceed 1000px } @media all and (max-width: 1080px) and (min-width:780px) { // you can combine queries by using operators } Monday, November 12, 12
6. ADAPT YOUR WEBSITE W/ THE MEDIA QUERIES Monday, November 12, 12
7. ADAPT YOUR WEBSITE W/ THE MEDIA QUERIES • Our objective is to make our page responsive • What are the different steps we need? • Small size screen (799px width and less) including mobile devices • Large size (800px and further) Monday, November 12, 12
8. ADAPT YOUR WEBSITE W/ THE MEDIA QUERIES • Here is the query which will make our page responsive @media handheld, only screen and (max-width: 799px) { // our code } Monday, November 12, 12
9. DEMO Monday, November 12, 12
10. ADAPT YOUR WEBSITE W/ THE MEDIA QUERIES • The media queries only adapt your page to the different devices • You have to use some techniques with those queries such as relative sizes to be fully responsive Monday, November 12, 12
11. THANK YOU! Monday, November 12, 12