Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Marius Furnica
Marius Furnica
9,195 Points

I still don't understand why we put every class in @media...

I still don't understand why we put every class in @media...

4 Answers

Patrik Horváth
Patrik Horváth
11,110 Points
Patrik Horváth
Patrik Horváth
11,110 Points

Imagine browse Youtube PC Wiew on mobile, you get totaly dispointed because you have to ZOOM or scroll to left or right or maybe you using Flash content with Mobile no support

Media Query is only way to make Responsible website ( not only way but easyest )

every one want his website looks good on mobil and Tablet and Desktop devices or not ?

so with media Query you just define how webpage content should looks like on Larger displey ( if you making website by MOBILE FIRST rule )

example : we have NavBar and we want displey it in mobile in 1 Column and in Browser in ROW 

MOBILE:
MENU 1 
MENU 2
MENU 3

PC : 
MENU1  |  MENU 2 | MENU 3

@media queries are so simple

Konrad Traczyk
Konrad Traczyk
22,287 Points
Konrad Traczyk
Konrad Traczyk
22,287 Points

Hello,

Basicly you use @media to apply some css properties only at particular circumstances, conditions that needs to be met to apply those rules. You can write media queries in css file or define @media for the whole css file in html file. Media queries are used for making responsive: websites, webapps and hybrid apps.

Useful examples:

@media only print { ... } // only when you want print the page
@media screen and (max-width: 1023px) { ... } // when window browser width is smaller than 1024 pixels
@media (min-width: 1024px) and (max-width: 1200px) { ... } // when window browser width is is between 1024 and 1200 pixels

// css4 media query (not supported yet)
@media (768px < width < 1024px) { ... } // when window browser width is is between 768 and 1024 pixels

<link rel="stylesheet" type="text/css" href="print.css" media="only print">
<link rel="stylesheet" type="text/css" href="rwd.css" media="screen and (max-width: 1023px)">
<link rel="stylesheet" type="text/css" href="rwd.css" media=" (min-width: 1024px) and (max-width: 1200px)">
Marius Furnica
Marius Furnica
9,195 Points
Marius Furnica
Marius Furnica
9,195 Points

Okey but some of the classes are in @media and some of them are outside . It is a rule about this?

Patrik Horváth
Patrik Horváth
11,110 Points
Patrik Horváth
Patrik Horváth
11,110 Points

always give media query at the end of File because you want override if media querie is true

Media Queries are like IF statments from any programing language , IF this is TRUE change THIS :)

example if your browser width is not more then 1248 you will see nothing :D and if its more you will see whole body as flex :)

body {
displey: none;
}


@media only screen and (min-width: 1249px) {
body {
  displey: flex;
}
}
Marius Furnica
Marius Furnica
9,195 Points
Marius Furnica
Marius Furnica
9,195 Points

Okey thanks, now i think i understand

Patrik Horváth
Patrik Horváth
11,110 Points
Patrik Horváth
Patrik Horváth
11,110 Points

:) its like IF, feel free to ask anytime you need :) and there is a lot of media queries like check if Device is in Leadscape or check if device is iOS iphone and eth with this you can give for iphone users for example give special discount code or idk xD its on you check Mozila MDN