Адаптивный / флюидный дизайн: использование линейной интерполяции для макета - PullRequest
Новая
       46

Адаптивный / флюидный дизайн: использование линейной интерполяции для макета

0 голосов
/ 03 марта 2019

Я пытался сделать что-то похожее на это: CSS Poly Fluid Sizing, используя calc (), vw, точки останова и линейные уравнения

  • Оболочка должна охватывать 100% для областей просмотра600px и меньше.
  • Оболочка должна охватывать 70% для области просмотра 1800 пикселей.
  • Интерполированные значения для всех оставшихся областей просмотра.

Это то, что я до сих пор придумал: 

    #square1 {
        background-color: blue;
        margin: 10px 0;
        width: 100%;
        height: 50px;
    }
    
    #square2 {
        background-color: yellow;
        margin: 10px auto;
        width: calc(100% - 20 * (100vw - 600px)/40);
        height: 50px;
    }
    
    #square3 {
        background-color:green;
        margin: 10px auto;
        width: calc(100% - 20 * (max(100vw, 600px) - 600px)/40);
        height: 50px;
    }
    
    #square4 {
        background-color: red;
        margin: 10px auto;
        width: calc(min(100vw, (100% - 20 * (100vw - 600px)/40)));
        height: 50px;
    }
<div id="square1"></div>
<div id="square2"></div>
<div id="square3"></div>
<div id="square4"></div>

Квадрат 1 только для справки.

Квадрат 2 работает как-то, но только потому, чтоЯ умножил в 20 раз произвольно.Почему это работает?

Квадрат 3 и 4 должны избегать горизонтального переполнения в случае, если область просмотра меньше 600 пикселей.Оба решения не работают.

Ссылка на Fiddle здесь

Есть идеи?Спасибо.

PS: я не профессионал.

...