Tuesday, January 5, 2016

Bootstrap and Media Queries for CSS

I've been playing around with Bootstrap, and have learned about a very cool thing called Media Queries in CSS.

Bootstrap, by the way, was originally called Twitter Blueprint - the guys at Twitter basically created the framework. It's a combination of HTML, CSS, LESS, Sass and Javascript.

The idea behind Bootstrap is to create web templates that work on any device no matter the screen size. In other words, to be Responsive :)

Playing around with it, got me to discover just how cool media queries in CSS are. Here's what one looks like:

@media only screen and (min-width : 1200px)
{
        /* your normal CSS goes here /*
}


The cool thing here is that the CSS between the brackets only applies when the screen is bigger than a certain width. In this case, 1200px.

In this way, you can write specific CSS rules for your HTML for each screen size you want, which is a very handy thing indeed. Here's how to use the media queries:

You can use either min-width or max-width:

Min-width is basically everything greater than or equal to the amount given.

Max-width is basically everything less than or equal to the amount given.

So, if you want to change the size of your <h1> tag on screens less than 992px for example, you'll write it like this:

@media only screen and (max-width : 992px)
{
      h1

      {
            font-size:24px;
      }
}


Whenever the browser window is smaller or equal to 992 pixels wide, then the styles specified in the media query will apply.

Pretty cool hey! I hope this can help you in some or other way!

No comments:

Post a Comment