960gs adaptive CSS를 개선했습니다

Question

내 사이트의 모든 페이지에서 960gs 적응 CSS를 사용하고 있습니다. 나는 모든 페이지에 아래의 스크립트가 :

<script> 
var ADAPT_CONFIG = { 
    path: '/css/960gs/', 
    dynamic: true, 
    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', 
    ] 
}; 
</script> 
<script src="/js/adapt.min.js" type="text/javascript"></script> 

내 문제는 사용자가 다른 페이지로 이동하면 모질라 파이어 폭스를 사용하여 특별히 할 때, 적절한 스타일 시트의 선택은 사용자가 볼 수 있다는 것입니다. 제 말은 레이아웃이 처음에는 모든 스크린을 차지하고 1 초도 채 안되어 레이아웃이 적절한 것으로 바뀌 었습니다. 이 일을 설명하는 법을 모르겠습니다. 하지만 내가 원하는 것은 적절한 스타일 시트를 로딩 할 때 성능을 향상시키는 것이다. 새로운 스타일이 생각 (반입되고 그대로

감사

960.gs 사이트에

Answer 1

이

을 말한다는 "Adapt.js의 잠재적 인 단점은 스타일이 적용되지 않은 내용에 대한 간단한 플래시의 가능성 (CSS의 경우 "Ajax"라고 함). CSS 파일을 작게 (3KB) 유지하여 최선의 노력을 기울였습니다. 여러 솔루션의 문제에 대한 제안 된 방법이 아닌 규정 된 접근법을 사용하는 것이 중요합니다. "

이것은 알려진 문제입니다. 나는 자바 스크립트로 이것을하는 큰 팬이 아니라고 말해야한다. CSS는 다른 해상도를 완벽하게 처리 할 수있다. 기본 CSS가 있고 다른 해상도를 처리 할 수있는 몇 가지 속성을 다음과 같이 추가하십시오.

@media only screen and (min-width: 980px) and (max-width: 1280px) { <<<CSS Here>>> } 
@media only screen and (min-width: 760px) and (max-width: 980px) { <<<CSS Here>>> } 
@media only screen and (max-width: 767px) { <<CSS for mobile portrait>> } 
@media only screen and (min-width: 480px) and (max-width: 767px) { <<CSS for Mobile landscape>> }