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

我正在使用SkelJS框架的響應站點。總的來說，我對這個網站感到滿意，但是我有一個問題，在寬屏顯示器的主頁上擴展了一個jQuery幻燈片放映。它在移動設備，平板電腦和我的筆記本電腦屏幕上看起來很好，但是當我將它推到我的大屏幕顯示器上時，我不喜歡幻燈片的左側和右側以及屏幕邊緣之間的空間。使用SkelJS的斷點 - 寬屏顯示器的調整？

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的容器大小和「1000像素」斷點會從「481-1200」走了960容器。

我已經嘗試過調整'1000px'參數來包含更大的尺寸（最多1900）並調整容器大小，但它破壞了我所有的CSS格式。

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

在此先感謝您的幫助！這個社區是一個很棒的資源。我試圖不要濫用它。「

來源

2014-02-18 sforcash

根據他們的文檔，」注意：由於斷點範圍允許重疊，所以在任何給定時間都可以有多個活動區域激活，發生這種情況時，每個選項都按照最後定義的順序組合。「

這表明容器將等於1200，如果屏幕寬度爲481以上但不是當其低於1200

在要從HTML5UP使用模板，幻燈片被包裹在一個parentDiv其中有一個橫幅背景圖像，可縮放以避免左右兩邊的空白。

來源

2014-03-05 08:28:02

這是有道理的。因此，如果斷點範圍重疊，比如在1000像素的屏幕上，我如何確定哪些選項是「最後定義的」。它是指js選項（容器，水槽等）還是CSS選項。例如，假設在「桌面」CSS上調整徽標大小的CSS是30％auto，而「1000px」CSS是40％auto，CSS會帶先例嗎？ – sforcash

您的設置看起來有點混亂。嘗試調整它們以使您的默認優先（即首先加載，這就是爲什麼「範圍：'*'，」首先在下面），然後是打破範圍的斷點，然後覆蓋它們（通過優先順序）。此外，狀態範圍如下所示，在數字前面（我認爲這可以解決您的問題）。我也會改變你的排水溝，並改變它們的範圍以獲得更好的效果。試試這些：

{ 
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 /風格wide.css」， 'css/style-normal.css'，'css/style-narrow.css'，'css/style-mobile.css'）。只要您通過'css/style'鏈接它們作爲鏈接href的開始部分，前綴設置就會找到它們。調整這些表中的樣式只會影響您希望的尺寸的樣式，讓您可以自由地進行所需的調整。

來源

2014-07-10 11:22:46 CoderZen

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

回答

相關問題