Без да съм чел всичко тук. Само да кажа че в css-a има @media queries
Така може да се дотунингова всяка една резолюция за десктоп (или да се направи и мобилно и/или за падове), без да се бара основният css дизайн.
@media only screen and (max-width: 1280px)
{
/*css тука за всички екрани по малки от 1280 точки */
}
@media only screen and (max-width: 800px)
{
/*css тука за всички екрани по малки от 800px точки */
}
@media only screen and (max-width: 460px)
{
/*css тука за телефони */
}
Просто това се слага след основният css дизайн или в отделен css и тези медийни куерита оверайтват основния за някоя резолюция. Не е толкова сложно, колкото изглежда - даже е приятно. А css секциите с @media излизат не толкова големи 20-30 реда.
Ако обаче се прави за мобилни и падове също трябва да се добави:
<head>
...
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>