Using viewport for responsiveness instead of media

Question

My wordpress theme and the plugins I have installed conflict with one another forcing me to do my own CSS coding. After toying around with CSS and the inspect element tool on chrome, I fixed the responsiveness (not really fixed, more like hacked I guess..) of my website thevandreasproject.com. I used this code to make it work on the iPhone 5 screen:

@media (min-width: 680px) {
    .home-background .textwidget {
        font-size: 50px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: 8px;
        font-family: 'Roboto';
        min-height: 880px;
        padding-top: 20px;
    }   
}

@media (max-width: 679px) {
    .home-background .textwidget {
        padding-top: 20px;
        padding-bottom: 175px;
        font-style: normal;
        font-weight: 500;
        font-family: 'Roboto';
    }

.site-content {
    height: 0!important;
    }
#footer-banner {
    padding:50px;
    }
}

I was wondering if anyone could help me figure out how to rescale my images and text correctly for ALL devices instead of having to figure out media queries for every device there is. I appreciate it!

Answer 1

Start with the smallest screen size imaginable then expand the viewport until it looks like crap. Put a breakpoint in. Repeat process until you reach largest screen size you want to accommodate. I think Dave Rupert said that somewhere. Anyways short answer is don't use media queries based on popular devices but instead based on your content. There is no easy answer.