#javascript #css #wordpress #import #960.gs
#javascript #css #wordpress #импорт #960.gs
Вопрос:
Я хочу использовать 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'
]
};
Связанная таблица стилей
@импорт «css / reset.css»; @импорт «css/typography.css»; @импорт «css/layout.css»; @импорт «css / 960.css»; @импорт «css/mobile.css»: и так далее…
Ответ №1:
Это не сработает, но ничто не мешает вам использовать медиа-запросы или использовать adapt.js и просто сохраняем эти файлы вне.
Adapt.js работает с использованием javascript для динамического вызова css-файла. Вы можете сохранить все ваши основные стили в связанном файле, на который вы ссылались, и исключить только файлы css, которые создают макет сетки для каждого размера экрана. Ваш путь должен выглядеть примерно так:
<?php bloginfo('template_directory'); ?>/css/adapt/
Который предполагает ваш adapt.js файлы таблиц стилей хранятся в каталоге /css /adapt в корневом каталоге вашего шаблона и вашем adapt.js файл javascript хранится в каталоге /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-файлы. Если вы сделаете это, вы захотите сначала определить базовые стили (обычно называемые «сначала для мобильных устройств»), а затем выборочно улучшать сайт на основе все более широких видовых экранов. Смотрите статью Итана Маркотта «Адаптивный веб-дизайн» для хорошего объяснения.
Комментарии:
1. Я не совсем уверен, что вы имеете в виду, поэтому я все еще могу использовать adapt.js и пусть он выбирает, какой файл css загружать, в зависимости от размера экрана?
2. @AndersKitson Это правильно. Нет причин, по которым каждую таблицу стилей нужно комбинировать и / или связывать так, как вы описываете.
3. Итак, моя проблема на самом деле заключается в том, чтобы заставить wordpress распознавать стили вообще, мне нужно немного поработать на php, чтобы заставить их видеть их нормально, это выходит за рамки моей компетенции.
4. @AndersKitson Я привел пример точной конфигурации, которая вам нужна для adapt.js который просто нужно вставить в ваш header.php не должен требовать никакого дополнительного php. Я не совсем уверен, что вы подразумеваете под «заставить wordpress распознавать стили вообще». Не могли бы вы уточнить?
5. хорошо, вот где я потерпел неудачу, не обернув путь в теги php, спасибо за это.
Ответ №2:
Если вы создаете свою собственную тему, вы можете использовать тему Roots,http://www.rootstheme.com
Они включают опцию «адаптировать» в качестве одного из фреймворков CSS, наряду с bootstrap и некоторыми другими.
Имейте в виду, что это, по сути, пустая тема, и вам придется создавать ее самостоятельно. Но обеспечивает отличную основу с помощью adapt, а также других адаптивных лучших практик, включая шаблон HTML5.