최신 버전의 Firefox를 사용하고 있으며 미디어 쿼리가 대부분 잘 작동합니다. 이상한 점은 그들이 내 화면 크기에 올바른 방식으로 응답하지 않는다는 것입니다. 다음은 그 예입니다.
.div{
float:left;
width:50%;
text-align:left;
color:#000000;
line-height:18px;
margin-right:15px;
display:inline;
}
@media all and (max-width:1366px){.div{
float:left;
width:40%;
text-align:left;
color:#000000;
line-height:18px;
margin-right:15px;
display:inline;
} }
현재 내 브라우저는 너비가 1600으로 설정되어 있지만 여전히 미디어 쿼리 내에서 코드를 사용하고 있습니다 (위의 기본 코드가 아님). (max-width : 1366px)를 설정할 때 왜 이렇게하나요? 내 CSS 코드 전체에서 다른 많은 경우에서 이것을 발견했습니다. 나는 전에 그것을 해결했지만 간단한 설명이 없는지 확인하고 싶습니다.
쿼리에 문제가 없습니다. Fiddle
사소한 것은 변경하려는 속성 만 지정하면되며 같은 것을 두 번 반복 할 필요가 없습니다. 미디어 쿼리 내의 스타일은 모든 CSS와 마찬가지로 계단식으로 배열됩니다.
표시되지 않는 미디어 쿼리 문제를 해결하려면 :
예를 들면 :
@media screen and (max-width:600px) {
.div {
background-color:red;
}
}
@media screen and (max-width:900px) {
.div {
background-color:green;
}
}
@media screen and (max-width:1200px) {
.div {
background-color:blue;
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다