Red Deer & Blackfalds Web Design Writes:
As a Web Developer (or frankly anyone who wants to build a Website nowadays) you cannot underestimate the effect of using proper Media Querie for site responsiveness when putting together your CSS. Essentially what a Media Querie does is as follows:
- Organizes your websites CSS (Cascading Stylesheet) Information into different segments
- Each of these segments only becomes “live” on your website when the specific browser width (as identified in pixels) is what the website is currently being shown in
- Enables you to control anything related to CSS (ie. div, class, id, font sizes, positions, images, etc…)
The reason this is so important is because when you get right down to it, if your website does not Transform for an optimal view on a mobile or tablet device then you are going to be missing out on atleast 40-50% of your website traffic! People want to be able to use your website On The Go and you cannot do this if you aren’t using Media Queries.
So let’s get into the thick of it, how do you use them? Below is a full CSS layout that will highlight exactly how to use Media Queries. You can simply add these queries anywhere in your CSS file of your website that you wish, and whatever CSS Rules (See Article) have been applied inside that certain Jurisdiction (if you will) will show on your browser when it is the appropriate size given the rule.
@media screen and (min-width: 960px)
***Anything you type in this section will be used as the appropriate CSS rule when the size of the browser is above 960px in width, or rather what you would see on the majority of laptops and desktop computers
@media screen and (max-width: 960px)
***Anything you type in this section will be used as the appropriate CSS rule when the browser is below 960px in width and above 480px, or rather what you would see on the majority of tablet type devices
@media screen and (max-width: 480px)
***Anything you type in this section will be used as the appropriate CSS rule when the size of the browser is below 480px in width, or rather what you would see on the majority of mobile devices and some very small tablets