将浏览器的宽度设置为scss中的变量

Question

如何获得浏览器的宽度以将其用作变量？

我知道媒体的事。我需要的是得到宽度并对它做一些计算。

我试过使用jQuery，如果浏览器的宽度是固定的，那么效果很好，但是当我调整浏览窗口的大小时，它就不能工作了

以下是我想做的事：

html

<section id="slider">
    <div class="slides">
      <div class="slide">
        <h1>silde 1</h1>
        <p>Lorem ipsum dolor</p>
      </div>
     <div class="slide">
        <h1>silde 2</h1>
        <p>Lorem ipsum dolor</p>
      </div>
    </div> </section>

SCSS

$browser-width: (BROWSER WIDTH HERE) * .75 ;
#slider {
  overflow: hidden;
  position: relative;
  margin: auto;
  width: $browser-width;
  .slides {
    display: block;
    margin: 0;
    padding: 0;
    width: 6000px;
  }
  .slide {
    width: $browser-width;
    display: inline-block;
    float: left;
    text-align: center;
  }
}

作为临时解决方案，我所做的是:使用jQuery：

$(document).ready(function(){   
  var width = $(window).width() * .75;   
  var $slider = $('#slider');   
  var $slideContainer = $slider.find('.slides');   
  var $slides = $slideContainer.find('.slide');   

  $slider.css("width", width);   
  $slides.css("width", width);

  /* function to make the slider here */ 
});

宽度= 75%不工作，宽度=75‘t

Answer 1

没关系，我发现vw是问题的答案，它没有起作用，因为我在滑动函数中犯了这个错误。

‘边距-左’：'-=‘+宽度

我需要做的是：

“边距-左”：-=‘+宽度+“”vw“

永远不要忘记代码中的单元。吸取的教训

下面是我对感兴趣的人的滑动函数：

'use strict';


$(document).ready(function(){

  var width = 75;
  var animationSpeed = 1000;
  var pause = 1000;
  var currentSlide = 1;

  var $slider = $('#slider');
  var $slideContainer = $slider.find('.slides');
  var $slides = $slideContainer.find('.slide');

  var interval;


  function startSlider(){
    interval = setInterval(function() {
      $slideContainer.animate({'margin-left' : '-='+width + "vw"}, animationSpeed, function(){
        currentSlide++;
        if (currentSlide === $slides.length){
          currentSlide = 1;
          $slideContainer.css('margin-left', 0);
        }

      });

    }, pause);
  }
function stopSlider(){
  clearInterval(interval);
}

$slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);

startSlider();

});