Wednesday, December 18, 2013

Media Queries, the If-Then of the web! (HTML, CSS, JavaScript)

I love me some if-then statements, and media queries are what's up in CSS with that!
Here's the syntax for a media query:


Within the brackets are the condition that you're testing.
If that condition is TRUE, then the statements will execute on the elements of choice.
For example....


Above, when the page width is less than 501px, the font-size of h1 (header 1) is set to 50px.


FUCKING AMAZING. Remember to add your media query at the bottom of your style tags. Since CSS does "cascade" downward, you'll screw yourself if somewhere later in the style tag you modify what your media query is modifying. CSS pays attention to the modification that is closest to the bottom of the tag, so that's where you want your conditional formatting.

Anyway peeps I just got back from WINNING PUB TRIVIA, HELLZ YEAH, so I'm going to bed.
n00b, out!

No comments:

Post a Comment