css우선순위, 미디어쿼리 css적용이 안될때는?

 

#우선순위

css를 수정하면서 미디어쿼리가 적용이 안되는 경우를 보았다.

 

이런경우엔 css우선순위 문제가 있을경우이다.

 

개발자도구에서 적용안되는 태그를 클릭해서 우선순위로 적용된걸 볼 수 있다.

 

 

# 예시 / 해결방법

.class_b{

.class_a {

font-size : 1em;

}

}

이런 클래스에 적용한 속성이 있는데, 

 

@media (max_width : 400px){

.class_a {

font-size : 0.7em;

}

}

 

이렇게 모바일 환경에따라 class_a의 폰트사이즈를

적용하려고 할때, 미디어 쿼리가 적용이 안된다면?

 

원 css파일처럼 class_b로 감싸주면 된다.

 

@media (max_width : 400px){

.class_b{

.class_a {

font-size : 0.7em;

}

}

}

 

이렇게 말이다. 그럼 적용이 된다.

 

개발자 도구에서 css우선순위를 보면 된다.