滑塊與窗口寬度

Question

https://jsfiddle.net/57wm5dy7/3/

我首先在jsfiddle中單擊“運行”，並且我的基本/開始寬度是min-width:900px媒體查詢，在這里滑塊可以正常工作...

...但是后來我將鼠標手動調整為較小的最大寬度700px媒體查詢窗口

然后單擊下一步按鈕（向右箭頭）

即使我位於較小的max-width 700px （幻燈片寬度500px）中， min-width:900px從min-width:900px媒體查詢（幻燈片寬度700px）中min-width:900px幻燈片寬度。 我想單擊時執行下一個/上一個按鈕，以執行我當前所在的媒體查詢的.c-testimonial的寬度。無論我在兩次媒體查詢之間調整窗口大小的次數是多少。

@media screen and  (max-width:700px) {

  .c-testimonials {
        position: relative;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        text-align:center;
        padding:70px 0;
          &:before {
              content: '';
              position:absolute;
              top:0;
              bottom:0;
              z-index:-1;
              width:100vw;
              left: calc(-50vw + 50%);
              background-color: #f8f8f8;
          }    
          &__mask {
              margin:0 auto;
              position: relative;
              overflow:hidden;
          }
    }
}

Answer 1

您必須與使用相同的媒體查詢保持一致-一次使用max-width ，然后使用min-width ，這會導致問題。 對於低於900px的所有內容，將重用一個規則，對於高於700px的所有內容，將重用另一條規則，因此這200px之間會有沖突：

我認為建議的方法是：

• 編寫默認行為
• 編寫max-width: 900px的特定代碼max-width: 900px
• 為max-width: 700px寫一個特定的代碼max-width: 700px ，這將使前一個超載

或另一種方法-相反的方法-從較小的方法開始，然后使用min-width 。

作為指導，您可以檢查最流行的grid庫（例如Bootstrap網格系統）的工作方式。 然后往往不將max-width和min-width混合在一起，因為它們相互重疊，通常會帶來意想不到的結果。

另一件事-CSS中有兩個斷點（900px和700px），但是代碼中只有一個斷點...

這是您代碼的更新版本（仍然有一些錯誤，但是容器已正確滑動）。 這應該是將來進行改進的好方法： https : //jsfiddle.net/57wm5dy7/4/

旁注：請嘗試以更好的方式重用您的代碼-代碼段中的許多代碼都是不需要的而被復制，因此可讀性差-請檢查我移至全局上下文的代碼塊。