미디어 쿼리 사용법

Question

Insert title here 다음과 같이 선언했을떄 width가 400이하면 배경이 lightgreen이고 width가 401이상이면 black이라는뜻아닌가요? f12눌러서 iphone x 로 해서 width 가 375 가 됫는데도 왜 검정에서 녹색으로 배경색상이 안변하는걸까요?

dev_jian · Accepted Answer

안녕하세요, 데브지안입니다.문제가 뭔지 찾았어요! 위의 메타태그를 안에 넣고 테스트 해봐주시겠어요 ? 아차! 하실 거에요 !뷰포트 태그를 설정하셔야지 휴대폰으로 보실 때 넓이가 장치의 넓이로 되거든요!그래서 휴대폰 모드로 하실때는 안되는 것처럼 보이셨지만 창으로 테스트할 때는 적용되어 보이는 거에여! 그리고 반응형 디자인에 대해 조금 더 궁금하시다면 아래의 블로그 참고하시면 도움이 될 것 같아여!https://devjian.tistory.com/93

woo.s.o · Answer

해당 소스엔 문제가 없구요.f12로 해서 위에 해상도 줄여도 적용하신 영역 부분의 width를 확인 해보셔야 할겁니다.가령 아래 사이트에 소스 주신 부분 HTML에 다 붙여놓고 Run 하시면 보이실텐데 콘솔 부분의 width 값이 변해야 색상이 변할 겁니다(좌우로 드래그 되니까 확인 해보세요) https://jsfiddle.net/

미디어 쿼리 사용법

2개의 답변

#mediaquery 목록