0
다른 기기에서 내 CSS를 수정하기 위해 미디어 쿼리를 사용하고 있지만 두 번째 미디어 쿼리 (최대 너비 : 767)를 변경하면 모바일 용 CSS가 무시됩니다. 누구나 그 이유가 뭔지 알아? 나는 범위 이외의 두 번째 미디어 쿼리와 .nav 리튬 많은 조정을하지 않은하지만 헤더 & 탐색 메뉴에서 문제를 볼 충분했다미디어 쿼리 충돌
/* Mobile */
@media only screen and (min-width: 320px) and (max-width: 480px) {
/* Style adjustments for viewports 480px and under go here */
.row {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
width: 98% !important;
padding-left: 1% !important;
padding-right: 1% !important;
}
span {
letter-spacing: 20px !important;
}
.nav li {
margin-right: 22px !important;
text-align: center !important;
letter-spacing: 2px !important;
}
ul li:last-child {
margin-right: 0px !important;
}
.intro h1 {
font-size: 44px !important;
margin-bottom: -40px !important;
}
.intro img {
visibility: hidden !important;
}
.dotted_line {
visibility: hidden !important;
}
.cta {
height: 450px !important;
width: 330px !important;
margin-top: -30px !important;
margin-bottom: -250px !important;
}
.cta h2 {
font-size: 20px !important;
margin-left: 5px !important;
margin-top: -10px !important;
}
.cta p {
font-size: 16px !important;
margin-left: 5px !important;
margin-top: -10px !important;
}
.home_form {
margin-left: 20px !important;
}
.left input {
width: 280px !important;
margin-bottom: 10px !important;
}
.right {
width: 280px !important;
float: none !important;
}
.right textarea {
height: 120px !important;
width: 285px !important;
}
.submit {
background: url('../img/submit_btn.png') no-repeat !important;
float: left !important;
margin-top: 20px !important;
}
.social {
visibility: hidden !important;
}
.social_icons {
margin-right: auto;
margin-left: auto;
}
footer .left p {
width: 330px !important;
}
footer .middle {
visibility: hidden;
}
footer .right {
visibility: hidden;
}
.copyright {
margin-left: 10px !important;
margin-bottom: -40px;
}
}
@media only screen and (max-width: 767px) {
body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.container { min-width: 0; margin-left: 0px; margin-right: 0px; }
.row { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }
.row .row .column, .row .row .columns { padding: 0; }
.column, .columns { width: auto !important; float: none; margin-left: 0; margin-right: 0; }
.column:last-child, .columns:last-child { margin-right: 0; float: none; }
.row .row .column, .row .row .columns { padding: 0; }
.column, .columns { width: auto !important; float: none; margin-left: 0px; margin-right: 0px; }
.column:last-child, .columns:last-child { margin-right: 0; float: none; }
[class*="column"] + [class*="column"]:last-child { float: none; }
[class*="column"]:before, [class*="column"]:after { display: table; }
[class*="column"]:after { clear: both; }
.push_one, .push_two, .push_three, .push_four, .push_five, .push_six, .push_seven, .push_eight, .push_nine, .push_ten, .push_eleven, .centered { margin-left: 0% !important; }
span {
letter-spacing: 40px !important;
}
.nav li {
margin-right: 62px !important;
text-align: center !important;
letter-spacing: 6px !important;
}
ul li:last-child {
margin-right: 0px !important;
}
.intro h1 {
font-size: 44px !important;
margin-bottom: -40px !important;
}
.intro img {
visibility: hidden !important;
}
.dotted_line {
visibility: hidden !important;
}
.cta {
height: 450px !important;
width: 330px !important;
margin-top: -30px !important;
margin-bottom: -250px !important;
}
.cta h2 {
font-size: 20px !important;
margin-left: 5px !important;
margin-top: -10px !important;
}
.cta p {
font-size: 16px !important;
margin-left: 5px !important;
margin-top: -10px !important;
}
.home_form {
margin-left: 20px !important;
}
.left input {
width: 280px !important;
margin-bottom: 10px !important;
}
.right {
width: 280px !important;
float: none !important;
}
.right textarea {
height: 120px !important;
width: 285px !important;
}
.submit {
background: url('../img/submit_btn.png') no-repeat !important;
float: left !important;
margin-top: 20px !important;
}
.social {
visibility: hidden !important;
}
.social_icons {
margin-right: auto;
margin-left: auto;
}
footer .left p {
width: 330px !important;
}
footer .middle {
visibility: hidden;
}
footer .right {
visibility: hidden;
}
.copyright {
margin-left: 10px !important;
margin-bottom: -40px;
}
}
:
다음은 CSS입니다.
단순히 순서를 바꾸고 두 번째 미디어 쿼리를 먼저 넣고 첫 번째 미디어 쿼리를 두 번째로 놓습니다. – gaynorvader
@gaynorvader, 맞아! +1도 효과가 있습니다. 그러나 '최소 너비'를 사용하면 특히 다른 장치에 스타일을 적용하고 싶지 않을 때 좀 더 안전합니다. –
완벽하게 작동했습니다. 난으로부터 제 2 미디어 질의를 변경 : 미디어 @ 만 화면 (최대 폭 : 767px) 행 : 미디어 전용 화면 @ (최소 폭 : 481px) 및 (최대 폭 : 767px) 고마워요! – Angel