Я работаю с отзывчивым сайтом с картой 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.
Заранее благодарю за любую помощь!!! Это сообщество было потрясающим ресурсом. Я стараюсь не злоупотреблять им.
Ваши настройки выглядят немного запутанными. Попробуйте настроить их так, чтобы сначала были загружены ваши значения по умолчанию (т.е. Сначала загружены, а именно, "диапазон": "*", "сначала"), а за ними следуют точки останова, которые разбивают диапазон, который затем переопределяет их (по порядку приоритета), Кроме того, диапазоны состояний, как показано ниже, с - перед номером (я думаю, это решит вашу проблему). Я бы также изменил ваши желоба и изменил их по диапазонам для лучшего эффекта. Попробуйте эти:
{
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. Настройка стилей в этих листах будет влиять только на стиль по желанию, предоставляя вам свободу вносить корректировки, которые вы ищете.
В соответствии с их документами: "Примечание: поскольку диапазоны точек останова разрешены для перекрытия, в любой момент времени может быть активным более одного. Когда это происходит, параметры каждого из них объединяются в соответствии с теми, которые определены в последнем порядке".
Это предполагает, что контейнеры будут равняться 1200, если ширина экрана равна 481 и выше, но не тогда, когда она меньше 1200.
В шаблоне, который вы используете из HTML5UP, слайд-шоу завершается в родительскомDiv, у которого есть фоновое изображение баннера, масштабирующееся, чтобы избежать пробелов слева и справа.