css 해상도 미디어 쿼리 - ** 단일 페이지 사이트 **

Question

정말 힘든 시간을 보내고 있습니다. 누군가가 나를 알아낼 수 있기를 바랍니다.

목표 : CSS를 사용하여 화면상의 요소를 조정하여 내 사이트가 데스크톱 및 랩톱의 모든 해상도에서 잘 보이게합니다. 단일 페이지 사이트이고 뷰포트 만 맞추기 위해 (스크롤없이) 요소를 화면에 적절하게 배치해야하기 때문에 너비와 높이를 모두 포함해야합니다.

나는 사용자가 창을 끌 수있는 모든 뷰포트 해상도를 고려하기 위해 8 가지 "해상도"를 사용하고 있습니다. 내가 그린 시각적 표현은 다음과 같습니다. 섹션에는 CSS 섹션과 동일한 번호가 매겨져 있습니다. http://i1318.photobucket.com/albums/t654/thekevinbanas/pics%20yo/CSSresolutionswaths_zps41ee8742.jpg

내 코드는 다음과 같습니다. 각 코드에 헤더를 다른 색상으로 표시하여 어떤 코드가 사용되고 있는지 확인할 수 있습니다. 본질적으로 머리글의 색을 모두 8로 변경할 수 있도록 내 뷰포트를 드래그 할 수 있어야합니다. 맞습니까?

/* 1 */ 
@media screen and (max-width:1024px) and (max-height:768px) { 
    (green) 
} 

/* 2 */ 
@media screen and (min-width:1025px) and (max-width:1152px) and (min-height:769px) and (max-height:864px) { 
    (white) 
} 

/* 3 */ 
@media screen and (min-width:1153px) and (max-width:1280px) and (max-height:800px) { 
    (black) 
} 

/* 4 */ 
@media screen and (min-width:1153px) and (max-width:1280px) and (min-height:801px) and (max-height:960px) { 
    (blue) 
} 

/* 5 */ 
@media screen and (max-width:1152px) and (min-height:865px) and (max-height:960px) { 
    (yellow) 
} 

/* 6 */ 
@media screen and (min-height: 961px) and (max-width:1280px) { 
    (orange) 
} 

/* 7 */ 
@media screen and (min-width:1281px) and (min-height:900px) { 
    (gray) 
} 

/* 8 */ 
@media screen and (min-width:1281px) and (max-height:899px) { 
    (aqua) 
} 

결과 : 색상 만 내 헤더 변경, 아무리 내가 아쿠아, 녹색, 검정 (뿐만 아니라 어떤 코드가되고없는 경우, 검은 색과 녹색 사이 팬텀 지역에있는 뷰포트를 드래그 어떤 크기 채용).

@media 화면 대신 @media 화면 만 변경하고 최소/최대 너비/높이 (8 개 섹션 모두)보다는 최소/최대 장치 너비/높이를 변경하려고 시도했지만 ... 회색 헤더가있는 코드 만 사용됩니다. 나는 아이디어가 없어.

누군가 무슨 일이 일어 났는지 설명 할 수 있습니까? 그리고 내가 원하는 것을하기 위해 코드를 수정하는 방법?

Answer 1

브라우저가 여러 선언과 일치 할 수 있습니다. 마지막으로 일치하는 것을 사용하므로 순서를 변경하십시오. 가장 작은 것으로 시작하십시오.

//default 
@media only screen { 
    ... 
} 
//640 x 480 
@media only screen and (max-width:640px) and (max-height:480px) { 
    ... 
} 
//1024 x 768 
@media only screen and (max-width:1024px) and (max-height:768px) { 
    ... 
} 
//1152 x 864 
@media only screen and (max-width:1152px) and (max-height:864px) { 
    ... 
} 
//1152 x 960 
@media only screen and (max-width:1152px) and (max-height:960px) { 
    ... 
} 
//1280 x 800 
@media only screen and (max-width:1280px) and (max-height:800px) { 
    ... 
} 
//1280 x 960 
@media only screen and (max-width:1280px) and (max-height:960px) { 
    ... 
} 
//1280 x 960+ 
@media only screen and (max-width:1280px) and (min-height:961px) { 
    ... 
} 
//1280+ x 899 
@media only screen and (min-width:1281px) and (max-height:899px) { 
    ... 
}