使用SkelJS的斷點-寬屏顯示器的調整？

Question

我正在使用帶有SkelJS框架的響應式網站。 總體而言，我對該網站感到滿意，但在擴展寬屏顯示器主頁上的jquery幻燈片放映時遇到了問題。 在手機，平板電腦和筆記本電腦的屏幕上看起來都不錯，但是當我將其推到大型顯示器上時，我不喜歡幻燈片左右兩側和屏幕邊緣之間的空間。

config.js文件的設置如下：

window._skel_config = {
prefix: 'css/style',
resetCSS: true,
boxModel: 'border',
grid: {
    gutters: 50
},
breakpoints: {
    'mobile': {
        range: '-480',
        lockViewport: true,
        containers: 'fluid',
        grid: {
            collapse: true,
            gutters: 10
        }
    },
    'desktop': {
        range: '481-',
        containers: 1200
    },
    '1000px': {
        range: '481-1200',
        containers: 960
    }
}

};

我正在學習JS方面，因此，如果有人想給我一個外行的回應，我將由衷的感謝。

我試圖理解為什么“桌面”斷點的范圍為'481- _ '，並且容器大小為1200，而“ 1000px”斷點的范圍為'481-1200'，容器為960。

我一直在嘗試調整“ 1000px”參數以包括更大的尺寸（最大1900）並調整容器的尺寸，但是這破壞了我所有的CSS格式。

有問題的網站是www.rmcabinetry.com。

在此先感謝您的幫助！！！ 這個社區是一個了不起的資源。 我正在努力不濫用它。

Answer 1

根據他們的文檔，“注意：由於允許斷點范圍重疊，因此在任何給定時間都可以激活多個中斷點。發生這種情況時，每個選項的組合順序將與最后定義的優先順序組合。”

這表明如果屏幕寬度為481及以上，則容器將等於1200，但如果屏幕寬度小於1200，則容器將等於1200。

在您從HTML5UP使用的模板中，幻燈片放映被包裝在parentDiv中，該標題具有橫幅背景圖像，該橫幅圖像可以縮放以避免左右間隙。

Answer 2

您的設置看起來有些混亂。 嘗試調整它們，以使默認值優先（即先加載默認值，這就是為什么“ range：'*'，”在下面優先）的原因，然后是斷點分解的范圍，然后將其覆蓋（按優先順序） 。 另外，狀態范圍如下所示，在數字前加上-（我認為這可以解決您的問題）。 我還將改變您的裝訂線，並在各個范圍內更改它們，以獲得更好的效果。 試試這些：

{
prefix: 'css/style',
resetCSS: true,
boxModel: 'border',
containers: 1200,
useOrientation: true,
breakpoints: {
  'widest': { range: '*', containers: 1360, grid: { gutters: 50 }, hasStyleSheet: false },
  'wide': { range: '-1680', containers: 1200, grid: { gutters: 40 } },
  'normal': { range: '-1280', containers: 960, grid: { gutters: 30 }, lockViewport: true },
  'narrow': { range: '-1000', containers: '100%', grid: { gutters: 25, collapse: true }, lockViewport: true },
  'mobile': { range: '-640', containers: '100%', grid: { gutters: 10, collapse: true }, lockViewport: true }
}

然后，您需要為每個這些斷點創建一個CSS頁面（如上所述，“最寬”除外），以調整其各個樣式（即“ css / style-wide.css”，“ css / style-normal.css”， 'css / style-narrow.css'，'css / style-mobile.css'）。 只要您通過“ css / style”將它們鏈接為鏈接href的開始部分，前綴設置就可以找到它們。 在這些工作表中調整樣式只會影響所需大小的樣式，從而使您可以自由地進行所需的調整。