미디어쿼리로 반응형 홈페이지를 만들고 있는데 적용이 되지 않습니다
본문
<title><?php echo $g5_head_title; ?></title>
<style>
@media screen and (max-width: 380px;) {
.mainlogo1 h1{font-size:1px;}
.mainlogo1 h2{font-size:2px;}
}
@media (max-width:768px){.computer {display:none}}
@media (min-width:768px){.mobile {display:none}}
<style>
@media screen and (max-width: 380px;) {
.mainlogo1 h1{font-size:1px;}
.mainlogo1 h2{font-size:2px;}
}
@media (max-width:768px){.computer {display:none}}
@media (min-width:768px){.mobile {display:none}}
@media (min-width: 768px){.left { width: calc(50% ); float:left;}}
@media (max-width: 768px){.left { width: 100%;}}
@media (max-width: 768px){.left { width: 100%;}}
@media (min-width: 768px){.right { width: calc(50%); float:left;}}
@media (max-width: 768px){.right { width: 100%;}}
</style>
@media (max-width: 768px){.right { width: 100%;}}
</style>
<style>
.login{width:100%;}
.left{border:1px solid #AAA; background-color:#EEE;}
.form1{text-align:center; margin-bottom:17px;}
.head{width:100%; height:115px;}
.logo{width:100%;float:left;}
.tab{width:25%; height:50px; padding-top:20px;float:left;border-top:1px solid #EEE;}
.look{font-size:18px; font-weight:bold;}
</style>
.login{width:100%;}
.left{border:1px solid #AAA; background-color:#EEE;}
.form1{text-align:center; margin-bottom:17px;}
.head{width:100%; height:115px;}
.logo{width:100%;float:left;}
.tab{width:25%; height:50px; padding-top:20px;float:left;border-top:1px solid #EEE;}
.look{font-size:18px; font-weight:bold;}
</style>
index.php에 있는 div의 클래스를 설정한후
head.php에 css 스타일을 수정하려고 합니다.
폰트크기 반응형을 위해서 모바일에선 헤드태그의 크기를 줄이려고 미디어쿼리를 사용했는데
빨간부분이 적용이 안됩니다.
<style>
미디어쿼리
</style>을 닫고
밑에 다시 <style>을 만들어서 그럴까요?
답변 1
이렇게 질문 하시면 답변이 어렵습니다.
해당 url 을 작성해 주셔야 답변이 가능합니다.
다만 스타일 시트가 적용이 안되는 대부분의 경우
크롬 요소검사로 해결이 가능합니다.
크롬요소검사를 잘 모르신다면 반드시 학습하시기 바랍니다.
간단히설명 드리면
적용이 안되는 요소-마우스 우클릭-요소검사
적용이 안됐다면 해당 부분이 스트라이크 표시가 되어있고,
우선 적용된 스타일을 확인하실 수 있습니다.
감사합니다 해결되었어요!
답변을 작성하시기 전에 로그인 해주세요.