CSS @import не работает с PHP

0

Я использую следующий html/css, чтобы попытаться импортировать файлы PHP, чтобы действовать как таблицы стилей. Таким образом, я могу динамически редактировать стили в таблицах стилей. Я новичок в @import, но мне нужно изменить таблицу стилей в зависимости от ширины экрана для текущего устройства. Есть ли очевидные ошибки или я не могу использовать @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. IE первая строка: html, body {width: 100%; высота: 100%; Маржа: 0px; }
Показать ещё 3 комментария
Теги:

1 ответ

0

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

<?php header("Content-type: text/css"); ?>
Поделиться
  • 0
    Я только что попробовал это - ничего не изменилось. Страница все еще не стилизована. Страница index.php находится в подкаталоге: shadespeed.com/loyalty_points, поэтому я поместил это в теги head: <base href = " shadespeed.com/loyalty_points " target = "_ blank" />
  • 0
    Используйте Firebug, чтобы убедиться, что ваш браузер не кэширует файлы и, следовательно, не запрашивает новый файл с правильными заголовками.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню