Отзывчивый CSS загружает корректно на локальный сервер, только удаленно загружается рабочий стол на удаленном
Я проектирую адаптивный сайт (домашняя страница, которую я разрабатываю первой, - это все html, за исключением начала сеанса, но на некоторых страницах будет много php, поэтому очевидно, что я сохраняю домашнюю страницу как php). Когда я проверил на своем сервере MAMP, все работало нормально - он корректно загружал все CSS при любом размере экрана. Однако, когда я загрузил его на свой сервер FATOWOW, чтобы проверить его там, он вообще не загружает CSS, если вы сжимаете браузер ниже ширины, установленной для режима рабочего стола (все идет по умолчанию - черный текст, никаких изменений цвета, нет границы, все выровнено по левому краю и т. д.). Но если у вас есть окно браузера с минимальным размером рабочего стола, волшебным образом появляется CSS. У меня есть адаптивный метатег (см. Код ниже). Почему CSS всегда ссылается на мой сервер MAMP, но при этом загружается в Интернете? Спасибо!
Код заголовка страницы индекса:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="index.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<link rel="stylesheet" href="ajxmenu.css" type="text/css">
<script src="ajxmenu.js" type="text/javascript"></script>
<link rel="stylesheet" href="ajximagerotator.css" type="text/css">
<script src="ajximagerotator.js" type="text/javascript"></script>
</head>
Как вы, вероятно, можете сказать, я создаю этот сайт в Dreamweaver. Подобные проблемы возникали у меня раньше при кодировании в Notepad ++, но обычно Dreamweaver довольно хорошо справляется с подобными вещами, и мне не приходится много настраивать.
Заранее благодарю за любую помощь!
РЕДАКТИРОВАТЬ: Кстати, только что протестирован в моем Linux VirtualBox с LAMP - там тоже работает хорошо. Я думаю, что это может быть установка с Fatcow, но я не знаю, куда идти.
1 ответ
Ладно, не совсем идеальное решение, но после некоторой переделки я, наконец, нашел обходной путь.
Жидкий макет сетки Adobe Dreamweaver позволяет большим экранам наследовать от меньших свойств экрана CSS, если не указано иное. Он делает это, сначала не определяя размер экрана, а затем постепенно добавляя "@ на минимальной ширине", чтобы начать изменения для каждого экрана большего размера. Все, что не изменилось в каждом разделе "@", автоматически наследуется.
Мое решение ломает наследующую функцию, но заставляет CSS загружаться и изменяться соответствующим образом при каждом размере экрана - мне просто нужно повторить функции, которые я хочу сохранить. Если вы добавите строку "@" в верхнюю часть экрана и зададите МАКСИМАЛЬНУЮ ширину вместо минимума, CSS загружает каждый размер экрана отдельно, но все они загружаются. Причина, по которой функция наследования нарушена, заключается в добавлении строки кода @ max-width, и никакие функции не выходят за пределы этой точки.
Если у кого-то есть лучшее решение, я на все уши - это не идеальный способ решения проблемы, но, по крайней мере, это достойный пластырь.