Media Queries and Responsive design with CSS

CSS Media Queries was a fucking pain the ass for me when I started doing responsive websites but thanks to css-tricks, these guys are motherfuckin’ tech-ganstas when it comes to getting it right.  Of course everybody has a different way of doing it because they like to organize external CSS style sheets, emphasize better performance or they’re just being lazy as fuck and don’t get paid enough to match the same pair of socks when they have to go a job they fucking hate.    Most hard-core developers use Less or Sass to do their projects but when dealing with people are choosy beggars, I don’t even know if that oxymoron makes sense but if you walk down on Broadway in Capitol Hill, you’ll see that junkie begging for a 5 dollars instead of the usual “Can you give me some change.”

Anyways, I’m starting to put my bet on the min-width cause I started checking out websites on that new Apple MAC and some of these websites are looking tiny tiny.  If you want to learn it the right and professional way, Stop reading this post and click here.  That will take to the w3 and you can get your study on.  If you want to take some short cuts and get through with a quick project continue with short short post.

So I usually just add the styles heet to the top of the index file in the header or if you use partials then before the head tag.


 <link rel="stylesheet" href="css/style.min.css">
 <link rel="stylesheet" href="css/othertricks.css"> 
 

So that pulls out the style sheet from a different folder and I can start fucking around and testing out different styles.  Then I usually do something likes this. They have all kinds of articles on this that better explain it then me.  I think Google has a good example and it’s simple and doesn’t bore your fucking mind. It doesn’t let you scale so the responsive mode fits the smaller screen with the css. The width depends on the device.

 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 

So now you could add this to the bottom of your css.

footer {background-color: #222}

  
@media screen and (min-width : 2400px) { 
  
  #main_section 
  {
   width:2000px; 
   font-size:1.5em; 	
  }

}

@media screen and (max-width : 1600px) {
	#main_section {width:1200px; font-size: 1em;}
}


@media screen and (max-width : 1000px) {
	#main_section {width: 100%;}

}
/* this part generally sucks cause you get into mobile/tablets */
@media screen and (max-width : 699px) {
	
	#container, #logo, #menubar, #content, #footer
	{
	  width:100%;	
	  margin:0 auto;
	}
}

@media screen and (max-width : 480px) {

	#container, #header, #main_section {width: 100%}	
	
        #boring-crap-that-nobody-reads-on-a-mobile,
        #because-its-too-much-information-on-a-small-device,
        #not-to-mention-if-they-have-a-slow-network,
        #the-script-takes-forever-to-load {display:none;}   
}

Holy shit what the fuck!? It’s not that hard, I usually just focus on the mobile phones. I know that I want to stretch everything across the page cause the phone is so small, compared to a laptop or tablet.  I don’t spend a lot of time reading on the site, I hide it or utlilize the best optimization and performance depending one what the website is about or how the design works with the user interface.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.