adapt.js 960 GS с WordPress - PullRequest
Новая
       16

adapt.js 960 GS с WordPress

0 голосов
/ 11 ноября 2011

Я хочу использовать скрипт 960 gs adaptive.js, который позволяет выбирать разные таблицы стилей в зависимости от размера экрана пользователя в пикселях. Однако я использую WordPress, и все мои CSS-файлы связаны в один основной CSS-файл. Мне интересно, если это все еще будет работать должным образом. Я не думаю, что здесь будет скрипт ниже и ниже, который является верхней частью файла CSS. Я не уверен, как подойти к этому. 

// Edit to suit your needs.
var ADAPT_CONFIG = {
  // Where is your CSS?
  path: 'assets/css/',

  // false = Only run once, when page first loads.
  // true = Change on window resize and page tilt.
  dynamic: true,

  // Optional callback... myCallback(i, width)
  callback: myCallback,

  // First range entry is the minimum.
  // Last range entry is the maximum.
  // Separate ranges by "to" keyword.
  range: [
    '0px    to 760px  = mobile.css',
    '760px  to 980px  = 720.css',
    '980px  to 1280px = 960.css',
    '1280px to 1600px = 1200.css',
    '1600px to 1920px = 1560.css',
    '1940px to 2540px = 1920.css',
    '2540px           = 2520.css'
  ]
};

Связанная таблица стилей

@ import "css / reset.css"; @import "css / typography.css"; @Импортировать "CSS / layout.css"; @import "css / 960.css"; @import "css / mobile.css": так на ...

Ответы [ 2 ]

1 голос
/ 29 января 2012

Если вы создаете свою собственную тему, вы можете использовать Roots Theme, http://www.rootstheme.com/

Они включают опцию «Adapt» в качестве одной из структур CSS, наряду с начальной загрузкой и некоторыми другими.

Имейте в виду, что это в основном пустая тема, и вам придется оформить ее самостоятельно.Но предоставляет отличную основу для адаптации, а также других отзывчивых лучших практик, включая шаблон HTML5.

1 голос
/ 11 ноября 2011

Это не будет работать, но ничто не мешает вам использовать медиа-запросы или использовать adapt.js и просто не пускать эти файлы.

Adapt.js работает с использованием javascript для динамического вызова файла css. Вы можете сохранить все свои основные стили в связанном файле, на который вы ссылались, и не указывать только файлы CSS, которые создают макет сетки для каждого размера экрана. Ваш путь должен выглядеть примерно так:

<?php bloginfo('template_directory'); ?>/css/adapt/

Предполагается, что ваши файлы таблиц стилей adapt.js хранятся в каталоге / css / adapt внутри корня вашего шаблона, а ваш файл javascript adapt.js находится в каталоге / js внутри корня вашего шаблона. Вам не нужно будет указывать Wordpress включать файлы, потому что для этого и нужен скрипт.

Полный код может выглядеть примерно так: 

<noscript> 
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/adapt/mobile.min.css" />
</noscript> 
<script> 
// Edit to suit your needs.
var ADAPT_CONFIG = {
  // Where is your CSS?
  path: '<?php echo get_template_directory_uri(); ?>/css/adapt/',

  // false = Only run once, when page first loads.
  // true = Change on window resize and page tilt.
  dynamic: true,

  // First range entry is the minimum.
  // Last range entry is the maximum.
  // Separate ranges by "to" keyword.
  range: [
    '0px    to 760px  = mobile.min.css',
    '760px  to 980px  = 720.min.css',
    '980px  to 1280px = 960.min.css',
    '1280px to 1600px = 1200.min.css',
    '1600px to 1920px = 1560.min.css',
    '1920px           = fluid.min.css'
  ]
};
</script> 
<script src="<?php echo get_template_directory_uri(); ?>/js/adapt.min.js"></script>

Если вы решите использовать вместо этого медиа-запросы, вы можете встраивать их непосредственно в файлы CSS. Если вы сделаете это, вы сначала захотите определить простые стили (обычно называемые «mobile-first»), а затем выборочно улучшать сайт, основываясь на более широких и широких окнах просмотра. См. Статью Итана Маркотта Отзывчивый веб-дизайн для хорошего объяснения.

...