2013-12-04 3 views
0

Я использую следующий html/css, чтобы попытаться импортировать файлы PHP в качестве таблиц стилей. Таким образом, я могу динамически редактировать стили в таблицах стилей. Я новичок в @import, но мне нужно изменить таблицу стилей в зависимости от ширины экрана для текущего устройства. Есть ли очевидные ошибки или я не могу использовать @import для импорта источника из файла PHP?CSS @import не работает с PHP

<!DOCTYPE html> 
<html> 
    <head> 
    <title></title> 
    <base href="http://www.shadespeed.com/loyalty_points/" target="_blank" /> 
    <meta name="viewport" content="width=device.width"><meta charset="UTF-8"> 
    <style type="text/css">  
     @import url('../stylesheets/stylesheet_160_low_res.php')(max-width: 319px); 
     @import url('../stylesheets/stylesheet_320_small_smartphone.php')(min-width: 320px) and (max-width: 479px); 
     @import url('../stylesheets/stylesheet_480_smartphone.php')(min-width: 480px) and (max-width: 767px); 
     @import url('../stylesheets/stylesheet_768_tablet.php')(min-width: 768px) and (max-width: 1023px); 
     @import url('../stylesheets/stylesheet_1024_monitor.php')(min-width: 1024px) and (max-width: 1279px); 
     @import url('../stylesheets/stylesheet_1280_large_monitor.php')(min-width: 1280px); 
    </style> 
</head> 
<body> 

</body> 
</html> 

До этого я использовал скрипт Javascript, который получает ширину и высоту экрана и сохраняет их в COOKIES, который PHP может читать. Файлы cookie устанавливаются только в том случае, если они не существуют. Проблема в том, что после того, как будут установлены файлы cookie, они не изменятся. Мне нужно, чтобы они могли меняться, если страница обновлена, поэтому макет может измениться, если скажем, пользователь просматривает веб-страницу на планшете или смартфоне, и они поворачивают экран.

EDIT: Я только что заработал, заменив URL-адреса @import полными URL-адресами файлов таблиц стилей PHP.

<style type="text/css"> 

@import url('http://www.shadespeed.com/loyalty_points/stylesheets/stylesheet_160_low_res.php')(max-width: 319px); 
@import url('http://www.shadespeed.com/loyalty_points/stylesheets/stylesheet_320_small_smartphone.php')(min-width: 320px) and (max-width: 479px); 
@import url('http://www.shadespeed.com/loyalty_points/stylesheets/stylesheet_480_smartphone.php')(min-width: 480px) and (max-width: 767px); 
@import url('http://www.shadespeed.com/loyalty_points/stylesheets/stylesheet_768_tablet.php')(min-width: 768px) and (max-width: 1023px); 
@import url('http://www.shadespeed.com/loyalty_points/stylesheets/stylesheet_1024_monitor.php')(min-width: 1024px) and (max-width: 1279px); 
@import url('http://www.shadespeed.com/loyalty_points/stylesheets/stylesheet_1280_large_monitor.php')(min-width: 1280px); 

</style> 

Я уверен, что я пробовал это раньше, поэтому я думаю, что добавление заголовков в файлы PHP было ключевым. Большое спасибо!

Большое спасибо,

-Dan.

+3

Вы отправляете правильные заголовки в своих динамических файлах CSS? –

+0

Возможно, нет? Это буквально стили CSS в файлах PHP. I.E первая строка: html, корпус { ширина: 100%; высота: 100%; margin: 0px; } –

+0

Вы установили свой базовый url на http://www.shadespeed.com/loyalty_points/, поэтому это означает, что ваш первый файл CSS должен быть на http://www.shadespeed.com/stylesheets/stylesheet_160_low_res.php, который это явно не так. Вы понимаете базовый тег? – kba

ответ

0

Убедитесь, что вы отправляете правильные заголовки содержимого для этих файлов. Поместите эту строку вверху этих файлов CSS:

<?php header("Content-type: text/css"); ?> 
+0

Я только что попробовал - ничего не изменилось. Страница все еще не оформлена. Страница index.php находится в подкаталоге: http://www.shadespeed.com/loyalty_points/ поэтому я разместил это в заголовке:

+0

Используйте Firebug для проверки, чтобы ваш браузер не кэшировал файлы и, следовательно, не запрашивал новый файл с соответствующими заголовками. –

+0

Просто очистил кеш в chrome - по-прежнему ничего не изменилось после обновления:/ –

Смежные вопросы