Плавное увеличение ширины элемента при уменьшении ширины экрана - PullRequest
Новая
       10

Плавное увеличение ширины элемента при уменьшении ширины экрана

0 голосов
/ 29 января 2019

У меня есть некоторый код в файле style.less: 

.wrapper {
  width: 64%;

  @media screen and (max-width: 768px) {
    width: 82%;
  }

  @media screen and (max-width: 320px) {
    width: 94%;
  }
}

Как видите, ширина элемента .wrapper должна составлять 82%, когда ширина экрана составляет 768 пикселей.

Можно ли написать какую-либо функцию, которая позволила бы плавно увеличивать .wrapper ширину элемента каждые 64 пикселя?

64 пикселя были получены следующим образом:

(1920px - 768px) / 18, где 18 - проценты от 64 до 82

Ответы [ 2 ]

0 голосов
/ 29 января 2019

Если мы рассмотрим тот факт, что ваш элемент будет 64% в 1920px 82% в 768px, поэтому ваш элемент должен перейти от 1228.8px до 629.76px, мы также можем увидеть его как 100vw - 691.2px to 100vw - 138.24px.

Мы также можем написать это как показано ниже: 

  100vw - (691.2px - X)

Где X должно быть 0 при 1920px и 552.96px при 768px.мы можем записать это 1920px - 100vw, что даст нам 0, но когда в 768px это даст нам 1152px, что почти вдвое 552.94px, таким образом, мы можем написать X как (1920px - 100vw)/2,08, тогда наша формулаbe 

  100vw - 691.2px + (1920px - 100vw)/2,08

В приведенном ниже примере, когда размер экрана равен 768px, красный цвет должен быть почти равен синему, а когда в 1920px он должен быть равен зеленому: 

.box {
 width:calc(100vw - 691.2px + (1920px - 100vw)/2.08);
 height:50px;
 background:red;
}
.one,
.two {
  height:50px;
}
.one {
  width:64%;
  background:green;
}
.two {
  width:82%;
  background:blue;
}


body {
 margin:0;
}
<div class="box">
</div>

<div class="one">
</div>

<div class="two">
</div>

Приведенная выше логика создаст линейный переход между 1920px и 768px от 64% до 82%.Вы можете заметить, что на 320px у вас не будет 94%, потому что эта точка не принадлежит линейной функции, которую мы определили.В 320px у нас будет 100vw + 78.03px, то есть 124%.

. Вы можете использовать другую формулу, если хотите, чтобы другой линейный переход от 768px к 320px имел 82% и 94%

  100vw - 138.24px + (768px - 100vw)/3.76


.box {
 width:calc(100vw - 691.2px + (1920px - 100vw)/2.08);
 height:50px;
 background:red;
}
.one,
.two,
.three{
  height:50px;
}
.one {
  width:64%;
  background:green;
}
.two {
  width:82%;
  background:blue;
}

.three {
  width:94%;
  background:purple;
}



@media all and (max-width:768px) {
 .box {
   width:calc(100vw - 138.24px + (768px - 100vw)/3.76);
 }

}

body {
 margin:0;
}
<div class="box">
</div>

<div class="one">
</div>

<div class="two">
</div>

<div class="three">
</div>

С помощью приведенного выше кода у нас теперь будет 94% при 320px с сохранением другого процента.

0 голосов
/ 29 января 2019

Демонстрация Codepen

Вы можете использовать меньше loop, чтобы определить ширину для 18 точек останова, и вы можете определить переход поширина для плавного изменения размера 

@iterations: 0;
.wrapper {
  transition: width .5s 0s;

  .wrapper-for (@i) when (@i < 19) {
     @media screen and (max-width: (1920px - @i * 64)) { width: (64% + @i); }
     .wrapper-for(@i + 1);
  }
  .wrapper-for (@iterations);
}

Это компилируется в 

.wrapper {
  transition: width .5s 0s;
}

@media screen and (max-width: 1920px) {
  .wrapper {
    width: 64%;
  }
}
@media screen and (max-width: 1856px) {
  .wrapper {
    width: 65%;
  }
}

//[14 breakpoints]...

@media screen and (max-width: 832px) {
  .wrapper {
    width: 81%;
  }
}
@media screen and (max-width: 768px) {
  .wrapper {
    width: 82%;
  }
}
...