Как составит составить сложную формулу для CALC, в CSS?

Question

[SHentai]

Здравствуйте.

Нужно сделать так, чтобы css сам подстраивал высоту страницу при любом её размере.

1: W-от 347 H-от 592{calc(100vh - 170px)} - все размеры выше страница нормально отображается.
2: W-до 344 H-до 592{calc(100vh - 200px)}}
3: W-до 251 H-до 592 {calc(100vh - 230px)}
4: W-до 203 H-до 592 {calc(100vh - 260px)}
Без медиума.
Как то надо из этого выразить формулу соотношения сторон, чтобы просто вписать её в calc и всё, только вот Я какой то лаганый))

Надеюсь на Вашу помощь.

Comments

[Сергей delphinpro]

медиазапросы запилите, да и всё.

[Ankhena]

Может вам не нужен calc, а есть другое решение? Покажите задачу полностью?

[Ankhena]

Если вам нужно сохранение пропорций с помощью CSS, то так https://jsfiddle.net/Ankhena/cLhxv7eq/
В примере всегда квадрат, измените на нужные значения.

Answer 1

[Никита Кит]

СпасибоПожалуйста
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Comments

[SHentai]

Я бы с удовольствием, но надо будет очень много прописывать) до 0, там с каждым уменьшением ширины на немного, уже к высоте нужно +30.

[Никита Кит]

SHentai, я на самом деле плохо тебя понимаю из-за обилия речевых ошибок в твоих пояснениях, но вот тебе пример:

@media(min-width:347px) and (min-height:592px){
  .selector{
    height: calc(100vh - 170px);
  }
}

Дальше давай как-нибудь сам

[Игорь]

SHentai, это css, он ещё долго не будет языком программирования, только в последние 3-4 года начали появляться такие свойства как калькулятор, если полистать черновики (советую любому верстку время от времени это делать) то можно увидеть что пока ещё все грустно, так что используйте js это будет проще и быстрее

[Игорь]

SHentai, и ширина до 320 пикселей, вы хотите под часы писать? :D

[Никита Кит]

Игорь, на самом деле он просто плохо объяснил, но я постараюсь перевести. Он, видимо, дал простой пример. Ему нужно из этого примера просто высчитать пропорцию - window width к selector height. При resize изменять высоту селектора. Скорее всего от динамически изменяющейся высоты шапки чуви хочет отсчитать. Или что-то вроде того.
В любом случае SHentai прошу наглядный пример необходимого. Без js в твоём случае не выкрутиться

[SHentai]

я понял что объяснил всё через одно место, по этому сделал норм тему с примерами того что не выходит и не так. Как сделать чтобы блок не сползал?

Answer 2

[Александр Таратин]

https://github.com/BrunoFenzl/sass-proportions
css height proportional width