내 CSS 작업 중 두 미디어 쿼리 중단 점 .. 나머지는 작동하지 않는 이유는 무엇입니까?

내 질문에 내 iphone 분 및 최대 너비는 내 CSS에로드되지만 내 ipads 최소 및 최대 너비가 것입니다 이유는 무엇입니까? 내 모든 CSS는 개별적으로 작동하지만 전부는 아님을 압니다. 나는 또한 여러 스타일 시트를 대신 사용해 보았지만 똑같은 문제가있었습니다. 마지막 2 스타일 시트 만로드됩니다. 그들이 것을입니다 -내 CSS 작업 중 두 미디어 쿼리 중단 점 .. 나머지는 작동하지 않는 이유는 무엇입니까?

<head> 
<title></title> 

<meta charset="UTF-8"/> 

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

<link rel="stylesheet" type="text/css" href="css/stylesheet.css?v=1"/> 

</head> 




container, header, menu, home-info { 
display: inline-block; 
} 


body { 
background-color: pearl white; 
} 


#container { 
width: 50%; 
height: 800px; 
background-color: white; 

position: fixed; 
transform: translateX(-50%); 
left: 50%; 
box-shadow: 0 0 75px 0px rgba(12, 3, 25, 0.8); 
margin-bottom: 5px; 
} 

.header { 
height: 200px; 
width: 100%; 
color: white; 
transform: translateX(-50%); 
left: 50%; 
position: absolute; 
text-align: center; 
font-size: 220px; 
background-color: grey; 

} 



.menu { 
position: absolute; 
top: 205px; 
left: 50%; 
transform: translateX(-50%); 
padding: 5px; 

} 

.menu ul{ 
margin: 0; 
padding: 0; 
float:left; 

} 

.menu ul li{ 
float:left; 
list-style:none; 
position:relative; 
} 
.menu ul li a{ 

display:block; 

    text-decoration:none; 
    padding:10px 10px; 
    text-align:center; 
    width: 775px; 
    height: 25px; 
    background-color: silver; 
    font-size: 25px; 
    border-radius: 5px; 
    color: white; 
} 
.menu ul li a:hover{ 

    background: yellow; 
    color: #00357d; 
    box-shadow: 5px 5px 25px 5px yellow; 
} 

.menu ul ul{ 

    visibility:hidden; 
    position:absolute; 
} 
.menu ul li:hover ul{ 

visibility:visible; 
} 




.menu ul ul li a:hover { 

background: yellow; 
color: #00357d; 

} 
.menu ul ul ul { 

visibility: hidden; 
position: absolute; 

} 
.menu ul ul li:hover ul { 

visibility: visible; 
} 



.menu ul ul ul li a:hover { 

background: yellow; 
color: #00357d; 

} 
.menu ul ul ul ul { 

visibility: hidden; 
position: absolute; 

} 
.menu ul ul ul li:hover ul { 

visibility: visible; 
} 

.menu ul ul ul ul li a:hover { 

background: yellow; 
color: #00357d; 

} 
.menu ul ul ul ul ul { 

    visibility: hidden; 
    position: absolute; 

} 
.menu ul ul ul ul li:hover ul { 

    visibility: visible; 
} 

.home-info { 
color: grey; 
font-size: 20px; 
top: 550px; 

position: absolute; 

margin-left: auto; 
margin-right: auto; 

} 

/*max-ipads*/ 

@media only screen and (max-width: 1024px){ 

    #container { 
    width: 50%; 
    height: 800px; 
    background-color: white; 

    position: fixed; 

    transform: translateX(-50%); 
    left: 50%; 
    box-shadow: 0 0 75px 0px rgba(12, 3, 25, 0.8); 
    margin-bottom: 5px; 
} 
} 
@media only screen and (max-width: 1024px){ 
.header { 

position: absolute; 
    height: 100px; 
    width: 100%; 
    color: white; 
    transform: translateX(-50%); 
    left: 50%; 

    text-align: center; 
    font-size: 105px; 
    background-color: grey; 
} 
} 
@media only screen and (max-width: 1024px){ 
.menu { 

position: absolute; 

    top: 75px; 
    left: 50%; 
    transform: translateX(-50%); 
    padding: 5px; 

} 
} 
@media only screen and (max-width: 1024px){ 
.menu ul li a{ 

display:block; 

    text-decoration:none; 
    padding:10px 10px; 
    text-align:center; 
    width: 350px; 
    height: 15px; 
    background-color: silver; 
    font-size: 25px; 
    border-radius: 5px; 
    color: white; 
} 
} 
@media only screen and (max-width: 1024px){ 
.home-info { 
color: grey; 
font-size: 15px; 
top: 420px; 

position: absolute; 

margin-left: auto; 
margin-right: auto; 
} 
} 

/*---min-width---*/ 

@media only screen and (min-width: 768px){ 
#container { 
width: 50%; 
height: 1024px; 
background-color: white; 

position: fixed; 

transform: translateX(-50%); 
left: 50%; 
box-shadow: 0 0 75px 0px rgba(12, 3, 25, 0.8); 
margin-bottom: 5px; 
} 
} 
@media only screen and (min-width: 768px){ 
.header { 

height: 80px; 
width: 100%; 
background-color: grey; 
color: white; 
transform: translateX(-50%); 
left: 50%; 

position: absolute; 

text-align: center; 
font-size: 80px; 
} 
} 
@media only screen and (min-width: 768px){ 
.menu { 

position: absolute; 

top: 55px; 
left: 50%; 
padding: 5px; 
transform: translateX(-50%); 
} 
} 
@media only screen and (min-width: 768px){ 
.menu ul li a{ 

display:block; 

    text-decoration:none; 
    padding:10px 10px; 
    text-align:center; 
    width: 480px; 
    height: 25px; 
    background-color: silver; 
    font-size: 15px; 
    border-radius: 5px; 
    color: white; 
} 
} 
@media only screen and (min-width: 768px){ 
.home-info { 

color: grey; 
font-size: 21px; 
top: 430px; 

position: absolute; 

margin-left: auto; 
margin-right: auto; 
} 
} 

/*iphones-max*/ 

@media only screen and (max-width: 480px){ 
#container { 

width: 50%; 
height: 350px; 
background-color: white; 

position: fixed; 

transform: translateX(-50%); 
left: 50%; 
box-shadow: 0 0 75px 0px rgba(12, 3, 25, 0.8); 
margin-bottom: 5px; 
} 
} 
@media only screen and (max-width: 480px){ 
.header { 

height: 50px; 
width: 100%; 
color: white; 
transform: translateX(-50%); 
left: 50%; 

position: absolute; 

text-align: center; 
font-size: 50px; 
background-color: grey; 
} 
} 
@media only screen and (max-width: 480px){ 
.menu { 

position: absolute; 

top: 55px; 
left: 50%; 
transform: translateX(-50%); 
padding: 5px; 

} 
} 
@media only screen and (max-width: 480px){ 
.menu ul li a{ 

display:block; 

    text-decoration:none; 
    padding:10px 10px; 
    text-align:center; 
    width: 125px; 
    height: 15px; 
    background-color: silver; 
    font-size: 10px; 
    border-radius: 5px; 
    color: white; 
} 
} 
@media only screen and (max-width: 480px){ 
.home-info { 

color: grey; 
font-size: 10px; 
top: 270px; 

position: absolute; 

margin-left: auto; 
margin-right: auto; 
} 
} 

/*smartphone-min*/ 

@media only screen and (min-width: 320px){ 
#container { 

width: 50%; 
height: 420px; 
background-color: white; 

position: fixed; 

transform: translateX(-50%); 
left: 50%; 
box-shadow: 0 0 75px 0px rgba(12, 3, 25, 0.8); 
margin-bottom: 5px; 
} 
} 
@media only screen and (min-width: 320px){ 
.header { 

height: 80px; 
width: 100%; 
background-color: grey; 
color: white; 
transform: translateX(-50%); 
left: 50%; 

position: absolute; 

text-align: center; 
font-size: 80px; 
} 
} 
@media only screen and (min-width: 320px){ 
.menu { 

position: absolute; 

left: 50%; 
padding: 5px; 
transform: translateX(-50%); 
margin-top: 30px; 
} 
} 
@media only screen and (min-width: 320px){ 
.menu ul li a{ 

display:block; 

    text-decoration:none; 
    padding:10px 10px; 
    text-align:center; 
    width: 200px; 
    height: 25px; 
    background-color: silver; 
    font-size: 10px; 
    border-radius: 5px; 
    color: white; 
} 
} 
@media only screen and (min-width: 320px){ 
.home-info { 

color: grey; 
font-size: 10px; 
top: 320px; 

position: absolute; 

margin-left: auto; 
margin-right: auto; 
} 
}

출처

2016-08-11 Wally

이 (실제 소스를 보지 않고 말할 힘든) 당신의 스타일을 스타일 시트에 누워 있습니다 정확히 경우, 나는 당신의 문제가 아니라 아이 패드 스타일이로드되지 않습니다 믿습니다 잘못된 순서로로드 중입니다.

은 작게 (위)에서 가장 큰 (아래) (즉, 320, 480, 768 등)으로 스타일을 배치해야합니다. 그렇지 않으면 작은 화면 스타일이 큰 화면 스타일보다 우선합니다.

@media (max-width: 1024px) { 
    .box { background: red; } 
} 

@media (min-width: 420px) { 
    .box { background: yellow; } 
}

background 색상 ~ 420에서가 1024px 모든 화면에 노란색 될 것입니다 : 내가 할 경우 예를 들어

따라서 작은 순서에서 큰 순서로 전환하거나 미디어 쿼리를보다 구체적으로 지정할 수 있습니다. 예 :

출처

2016-08-11 21:58:05

그래서 너는 모두 최대 너비와 최대 너비를 모두 가지고있다. 그러면 페이지 스타일이 768-1024로 좋아 보인다. 내 질문에 답한 것 같아! – Wally

(특히 Less 또는 Sass와 같은 전 처리기를 사용하는 경우) 다른 관습을 따라야하지만 일반적으로 스타일 시트의 맨 위에있는 가장 작은 화면의 스타일을 정의해야합니다. 또한 이것이 도움이된다면 내 대답을 해결 된 것으로 표시 할 수 있습니까? 감사 –

내 CSS 작업 중 두 미디어 쿼리 중단 점 .. 나머지는 작동하지 않는 이유는 무엇입니까?

답변

관련 문제