Смена стилей в зависимости от размера екрана

1. Через медиа запросы. Самый популярный вариант.

1.1 Для каждого экрана добавляем свои файлы стилей:

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">

Больше информации о media здесь

1.2 Для каждого екрана вносим правки водном файле стилей:

/* При максимальной ширине екрана */
@media (max-width: 900px) {
  .hed-zag h2 {display:none;}
}

/* При просмотре на любых екранах и для печати */
@media screen, print  (min-width: 900px) {
  article {padding: 1rem 3rem;}
}

Больше здесь - смотреть

2 вариант. Через скрипт меняем название файла со стилями.

function  changeCss() {
   var w =  screen.width;
   var h =  screen.height;
   if (w <=  '1024' && h <= '768')
       {  document.getElementById("stylesheet").href="css/style_1024х768.css";
                }
            else
                  { if (w == '1152' && h ==  '864')
                  {document.getElementById("stylesheet").href="css/style_1152х864.css";}
                  else
                      { if (w == '1280'  && h == '800')
                      {document.getElementById("stylesheet").href="css/style_1280х800.css";}
                  else
                      { if (w >= '1280' && h >=  '1024')
                      {document.getElementById("stylesheet").href="css/style_1024х1024.css";}
                  };  };
                };
           }; 

* Этот скрипт должен стоять в head:

<script  type="text/jаvascript"  src="jаvascript.js"></script>
<script  type="text/jаvascript">window.onload  = changeCss;</script>
<link rel="stylesheet" href="css/style.css"  type="text/css" id="stylesheet" media="screen"  />
</head>

И не забываем ставить запрет на маштабирование в мобильных устройствах:

<meta name="viewport" content="width=device-width, initial-scale=1">