2013-11-21 1 views
0

반응 형 사이트를 디자인하고 있습니다. (처음 개발하는 홈 페이지는 세션 시작 부분을 제외한 모든 HTML이지만 일부 페이지는 많은 정보를 포함합니다. 그래서 분명히 PHP로 홈페이지를 저장 해요). MAMP 서버를 테스트했을 때, 모든 화면 크기에서 모든 CSS를 올바르게로드했습니다. 그러나, 거기에 그것을 테스트 내 fatcow 서버에로드 할 때 바탕 화면 모드로 설정된 너비 아래에 브라우저를 축소하면 모든 CSS를로드하지 않습니다 (모든 기본 - 검은 텍스트, 색 변경, 아니요 테두리, 모든 것이 왼쪽 맞춤 등). 그러나 최소한의 데스크탑 크기로 브라우저 창이 있으면 CSS가 마술처럼 나타납니다. 응답 성있는 메타 태그가 있습니다 (아래 코드 참조). 왜 CSS가 항상 내 MAMP 서버에 연결되어 있지만 조건부로 인터넷에로드됩니까? 감사!반응 형 CSS는 로컬 서버에서 correctl을로드합니다. 리모컨에서 데스크톱 만 올바르게로드됩니다.

인덱스 페이지 헤더 코드 : 아마 당신은 말할 수

<!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에서이 사이트를 설계하고있다. 이전에 메모장에서 코딩 할 때 이런 문제가 있었지만, 일반적으로 Dreamweaver는 많은 조정 작업을하지 않고도 이런 종류의 작업을 처리 할 수있었습니다.

미리 도움을 청하십시오!

편집 : 그건 그렇고, 그냥 LAMP가있는 제 Linux VirtualBox에서 테스트되었습니다. 너무 잘 작동합니다. 나는 이것이 Fatcow의 설정일지도 모른다고 생각하지만 어디로 가야할지 모른다.

+0

broswer의 개발 도구에 CSS 파일이로드 된 것을 볼 수 있습니까? – MattDiamant

답변

0

오케이, 이상적인 해결책은 아니지만 약간의 수정을 거쳐 마침내 해결 방법을 찾았습니다.

Adobe Dreamweaver의 유체 격자 레이아웃은 달리 지정하지 않는 한 큰 화면이 작은 화면 CSS 속성에서 상속하도록 설계되었습니다. 처음에는 화면 크기를 정의하지 않은 다음 점진적으로 "@에서 min-width"를 추가하여 각 큰 화면의 변경 사항을 시작합니다. 각 "@"섹션에서 변경되지 않은 항목은 자동으로 상속됩니다.

내 솔루션은 상속 기능을 중단하지만 각 화면 크기에서 CSS로드 및 변경을 적절하게 수행합니다. 동일한 기능을 유지하기 만하면됩니다. 화면 상단에 "@"행을 추가하고 최소 폭 대신 MAX 폭을 설정하면 CSS는 각 화면 크기를 개별적으로로드하지만로드는 모두 수행합니다. 상속 기능이 손상된 이유는 @ max-width 코드 행을 추가하는 것이므로 해당 점을 넘어선 기능은 없습니다.

누군가가 더 좋은 해결책을 가지고 있다면 나는 완전히 귀를 기울입니다. 이것은 문제를 해결하기위한 이상적인 방법은 아니지만 최소한 괜찮은 반창고입니다.

관련 문제