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页面（除了'widest'，如上所述）以调整他们的个人风格（即'css / style-wide.css'，'css / style-normal。 css'，'css / style-narrow.css'，'css / style-mobile.css'）。只要您通过'css / style'链接它们作为链接href的开头部分，前缀设置就会找到它们。调整这些工作表中的样式只会影响您所需尺寸的样式，让您可以自由地进行所需的调整。

使用SkelJS的断点 - 宽屏显示器的调整？

2 个答案: