Точки останова с использованием SkelJS - настройки для широкоэкранного монитора?

Question

Точки останова с использованием SkelJS - настройки для широкоэкранного монитора?

0

Я работаю с отзывчивым сайтом с картой 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.

Заранее благодарю за любую помощь!!! Это сообщество было потрясающим ресурсом. Я стараюсь не злоупотреблять им.

sforcash 18 фев. 2014, в 22:05

Источник

Теги:

javascript

jquery

html

css

responsive-design

2 ответа

Ещё вопросы

Jeremiah · Answer 1 · 2014-07-10T08-40-00.000Z

Ваши настройки выглядят немного запутанными. Попробуйте настроить их так, чтобы сначала были загружены ваши значения по умолчанию (т.е. Сначала загружены, а именно, "диапазон": "*", "сначала"), а за ними следуют точки останова, которые разбивают диапазон, который затем переопределяет их (по порядку приоритета), Кроме того, диапазоны состояний, как показано ниже, с - перед номером (я думаю, это решит вашу проблему). Я бы также изменил ваши желоба и изменил их по диапазонам для лучшего эффекта. Попробуйте эти:

{
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. Настройка стилей в этих листах будет влиять только на стиль по желанию, предоставляя вам свободу вносить корректировки, которые вы ищете.

Shaurav Garg · Answer 2 · 2014-03-05T07-01-00.000Z

В соответствии с их документами: "Примечание: поскольку диапазоны точек останова разрешены для перекрытия, в любой момент времени может быть активным более одного. Когда это происходит, параметры каждого из них объединяются в соответствии с теми, которые определены в последнем порядке".

Это предполагает, что контейнеры будут равняться 1200, если ширина экрана равна 481 и выше, но не тогда, когда она меньше 1200.

В шаблоне, который вы используете из HTML5UP, слайд-шоу завершается в родительскомDiv, у которого есть фоновое изображение баннера, масштабирующееся, чтобы избежать пробелов слева и справа.

Это имеет смысл. Так что, если диапазоны точек останова перекрываются, скажем, на экране 1000px, как мне тогда определить, какие параметры «определены последними». Это относится к опциям js (контейнеры, желоба и т. Д.) Или к опциям CSS. Например, предположим, что CSS, связанный с изменением размера логотипа на «настольном» CSS, был на 30% автоматическим, а CSS «1000px» имел 40% на автоматическом, какой CSS будет иметь прецедент?