Маргарита Рэй

Попробуйте работать с gulp, там есть очень классный пакет autoprefixer, большую часть проблем решает, и при этом постоянная поддержка, единственное траблы если три блока помещать рядом, но есть хаки))

Подход конечно оч крутой, но на 100/200 строк отдельный файл по мне как то слишком, по поводу медиа, в gulp можно установить clean-css, и запускать его только на сборке, а в процессе работы создать миксины с полным медиа))

у меня это выглядит примерно так:

.checked, input[type="text"]{
                border: 2px solid @white;
                background: @white;
                position: relative;
                font-size: @fontXS;
                font-family: @fBold, sans-serif;
                color: @fBlack;
                padding: 10px ;

                &:after{
                  content: '\f0d7';
                  font-family: FontAwesome, sans-serif;
                  color: @Green;
                  position: absolute;
                  right: 10px;
                  top: 13px;
                }
                .md-media({
                  margin-top: 10px;
                });
                .sm-media({
                  border-radius: 5px;
                });
              }

в конце меняю задачу в галпе и clean-css все подчищает, попробуйте это оч удобно, не нужно ковыряться в медиа, а параллельно основному коду пишутся и медиа)))

А не получится то же самое сделать отрицательным margin? И остаток будет проще решить чем с позиционированием))

Ну можно попробовать мета-тег вьюпорта убрать, может конечно глупое решение, но для теста)))