CSS Media Queries was a pain with all the old mobile phones when I started doing responsive websites but thanks to css-tricks, these guys are badass 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.
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. 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 messing 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;}
}
It’s not hard, I usually just focus on 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 utilize the best optimization and performance depending one what the website is about or how the design works with the user interface.