Использование возвращенных запросов области просмотра в качестве переменных SASS

Question

Я просто не вижу никого, кто бы говорил об этой проблеме. Нужно, чтобы сайт подходил к любому экрану точно без прокрутки. Некоторые элементы имеют фиксированное соотношение (логотип, видеоплееры и т. Д.), Что означает, что другие области должны аморфно расширяться / сжиматься, чтобы соответствовать их фиксированному поведению, которое никогда не может превышать 100% ширины или высоты. Сложно объяснить, но поведение, приведенное ниже, показывает, что оно работает. Для этого мне нужно иметь возможность определять ширину в терминах высоты и наоборот (ширина = 56,25% высоты и т. Д.)

Я могу заставить его работать, используя vh, vw, vmin, кучу функций calc и т. Д., Но поддержка браузера неоднозначна, и я не знаю, как заполнить все это. Мой vh, vw, calc решение ниже:

http://sassmeister.com/gist/3dee56a4092a86cf070a

Только другой чистый CSS, о котором я знаю, что даже начинает обращать внимание, это трюк заполнения процентами, связывающий высоту отступа с родительской шириной, но этого недостаточно. Мне нужно иметь возможность использовать операторы min, max, ширину и высоту связи в обоих направлениях.

Так что... если я не ошибаюсь, запросы @media только когда-либо возвращают true / false, поэтому они не могут предоставить фактическое измерение в окне просмотра, верно? Это то, что мне действительно нужно... точное измерение пикселей доступной высоты и ширины области просмотра.

Какое решение здесь? Должен ли я использовать JavaScript, чтобы получить эти точные размеры, а затем сделать все упорядочивание в JavaScript? Используйте JS, чтобы получить переменные, а затем передать их в CSS?

Примерно так: https://gist.github.com/scottjehl/2051999 и метод для импорта этих возвращенных значений в css должен работать, нет? Это слишком сильно замедляет работу сайта, чтобы сначала вызвать js-вызов, прежде чем что-то еще произойдет?

Также необходимо найти правильный способ сделать все эти расчеты. Должен ли я просто использовать javascript для выполнения всех вызовов и полностью исключить такие вещи, как следующие?

$ желоб: кальций (((100vh + 100vw) / 2) * 0,04)

Затем, используя эту переменную внутри другой функции:

$ ширина столбца: calc(100vw - (1.7778 * (100vh - 2 * $ желоб)) - 3 * $ желоб)

Вы поняли идею. Я думаю, что я близок к концу того, что я могу сделать с CSS. JS решение? Гибридный? Что-то другое?

Спасибо.

Answer 1

Похоже, медиа-запросы это то, что вы ищете.

Чтобы настроить таргетинг на экраны с максимальной шириной 1200 пикселей и минимальной шириной 800, можно использовать следующее:

@media all and (max-width: 1200px) and (min-width: 800px) {
    //some css here
}

Проверьте, как bootstrap-sass реализует контейнеры здесь.

Также проверьте другой SO ответ о медиа-запросах.

Вы даже можете указать ландшафтный и портретный макеты.

@media (orientation:portrait) { ... }

Или соотношение сторон:

@media screen and (device-aspect-ratio: 16/9) { ... }

Надеюсь, это поможет. Вы можете использовать некоторые из этих причудливых вычислений внутри / с медиазапросами, что должно немного упростить ситуацию.

Этот javascript вернет высоту экрана:

var x = "Total Height: " + screen.height;
document.getElementById("demo").innerHTML=x;

Ширина:

var x = "Total Width: " + screen.width;
document.getElementById("demo").innerHTML=x;

Некоторые JQuery:

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document