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

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

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


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

<span class="width"></span>
x
<span class="height"></span>


Демо

*выводится разрешение области, на которой отображается веб-страница

Комментарии (9)


  1. Wellend
    23.01.2016 18:45
    #8749261
    -1

    Я думаю, не самая лучшая мысль делать такое )
    И мой результат: 1366 * 167 (по ссылке демо)


  1. maaGames
    23.01.2016 18:50
    #8749265

    Выводит размер канвы страницы, а не разрешение экрана.


  1. ivan386
    23.01.2016 18:50
    #8749267

    Это размер фрейма а не экрана.


  1. Evgeny42
    23.01.2016 19:02
    #8749277

    На imac 5k не сработает.


    1. degorov
      23.01.2016 19:34
      #8749307

      Сработает, потому что это не пиксели, а точки, на iMac 5K их 2560 на 1440. Хотя наверное его же можно в 5120 на 2880 переключить — там не сработает :)


  1. Semmaz
    23.01.2016 19:09
    #8749281
    +1

    Замечательный пример того, как не надо использовать SASS!
    Панель CSS => View Compiled – смотрим на то как 11 строчек транслировались в пол-мегабайта CSS.


  1. Finom
    23.01.2016 19:09
    #8749283
    +1

    Едрыть его в дышло. 4К медиа запросов?


  1. k12th
    23.01.2016 19:30
    #8749297
    +1

    <div class="inline"></div>

    :)


    1. davo
      23.01.2016 19:34
      #8749305

      ну да, можно было span сразу использовать:)