Как правильно сделать адаптивные стили для разного размера окна браузера?

Question

[Михаил Беляков]

Всем добрый день, суть такова. С горемом пополам сделал верстку под экраны и мобильные устройства, но если на компьютере меняешь размер окна браузера все съезжает, будьте добры тыкните меня в то, что я делаю не так.

@media (min-device-width: 1px) and (max-device-width: 341px) {
    .content
    {height: 1165px !important;}
}
@media (min-device-width: 342px) and (max-device-width: 800px) {
    .content
    {height: 1050px !important;}
}
@media (min-device-width: 800px) and (max-device-width: 1110px) {
    .content
    {height: 980px !important;}
}
@media (min-device-width: 1100px) and (max-device-width: 1170px) {
    .content
    {height: 840px !important;}
}
@media (min-device-width: 1170px) and (max-device-width: 1600px) {
    .content
    {height: 880px !important;}
}
@media (min-device-width: 1600px) {
    .content
    {height: 880px !important;}
}
@media screen and (max-device-width: 341px) {
    .content
    {height: 1165px !important;}
}
@media screen and (min-device-width: 342px ) and (max-device-width: 800px) {
    .content
    {height: 1080px !important;}
}
@media screen and (min-device-width: 800px) and (max-device-width: 1110px) {
    .content
    {height: 980px !important;}
}
@media screen and (min-device-width: 1170px) and (max-device-width: 1600px) {
    .content
    {height: 880px !important;}
}
@media screen and (min-device-width: 1600px) {
    .content
    {height: 880px !important;}
}