Scribd
Upload
34 views6 pages

Lecture23 MediaQueries

This lecture discusses media queries including their syntax, common features like max-width and orientation, logical operators like and and comma, and a common approach of defining base styles and then overriding them within specific media queries based on breakpoints. It emphasizes not overlapping the range boundaries of breakpoints when defining media queries.

Uploaded by

Ndeye Fatou Ndiaye
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
34 views6 pages

Lecture23 MediaQueries

This lecture discusses media queries including their syntax, common features like max-width and orientation, logical operators like and and comma, and a common approach of defining base styles and then overriding them within specific media queries based on breakpoints. It emphasizes not overlapping the range boundaries of breakpoints when defining media queries.

Uploaded by

Ndeye Fatou Ndiaye
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

In this lecture, we will discuss…

Media Queries
Media Query Syntax
Media  Feature  (resolves  to  true  or  false)  

@media (max-width: 767px) {


p { If  TRUE,  
styles  within  
color: blue; curly  braces  
} apply.  

}
Media Query Common Features

@media (max-width: 800px) {…}

@media (min-width: 800px) {…}

@media (orientation: portrait) {…}

@media screen {…}

@media print {…}

...    
Media Query Common Logical Operators

Devices  with  width  within  a  range  

@media (min-width: 768px) and (max-width: 991px) {…}

Comma  is  equivalent  to  OR:  

@media (max-width: 767px) , (min-width: 992px) {…}

...    
Media Query Common Approach
p { color: blue; } /* base styles */
…
@media (min-width: 1200px) {
…
}

@media (min-width: 992px) and (max-width: 1199px) {


…
}
…

Careful  not  to  overlap  range  boundaries!  


Summary
²  Basic syntax of a media query
•  @media (media feature)
•  @media (media feature) logical operator (media feature)
²  Remember not to overlap breakpoints
²  Usually, you provide base styling
•  Then, change or add to them in each media query

NEXT:
Responsive Layout

You might also like