Выводим разрешение экрана с помощью CSS

После прочтения названия, возникает естественный вопрос: «Зачем?». Можно с помощью JS, в пару строк решить вопрос. Этот метод не претендует на применение в продакшене. Больше подходит для рубрик: «Сделано на чистом CSS», «Just for fun». Но, возможно, кому-нибудь будет интересен.

К самому методу. Используя media queries, можно задать набор стилей для любого разрешения. Свойство content позволяет задать содержимое псевдоэлемента. Это давно известные факты. Использовав их и циклы SASS, создадим следующие стили:

.inline      display: inline  @for $i from 1 through 4096      @media (width: #{$i}px)         .width:after             content: '#{$i}'                  @media (height: #{$i}px)         .height:after             content: '#{$i}' 

Добавим на страницу два блока:

<div class="inline width"></div>  x <div class="inline height"></div> 

Демо

ссылка на оригинал статьи https://habrahabr.ru/post/275753/