태블릿을 위한 미디어쿼리가 동작하지 않습니다.
본문
반응형 디자인 웹사이트를 만들었는데 CSS가 꼬인 것 같습니다.
제 사이트(http://red2.net/rwd2/)에 들어가셔서 브라우저 너비를 768px~959px로 조절해보시면
분명히 테블릿용 CSS가 있는데 아무 변화가 없습니다.
(전체 CSS: http://red2.net/rwd2/css/default.css)
어디가 잘못되었는지 모르겠네요. 그누 고수님들의 답변 기다립니다. ㅠㅠ.....
/* 태블릿용 CSS */
@media all and (min-width:768px){
#toggle-menu{
position:absolute;
/*
top:0;
left:-210px;
display:block;
*/
}
.content{
display:flex;
flex-direction:column;
}
.latest-article{
width:50%;
/* border:1px solid #000; */
/* 스타일이 안먹힌다 -_-a */
}
/* 모바일에서 제목을 제외한 것들을 다시 보여준다. */
#board-table thead tr th:first-child, #board-table tbody tr td:first-child,
#board-table thead tr th:nth-child(2), #board-table tbody tr td:nth-child(2),
#board-table thead tr th:nth-child(4), #board-table tbody tr td:nth-child(4),
/* #board-table thead tr th:nth-child(5), #board-table tbody tr td:nth-child(5), */
#board-table thead tr th:nth-child(6), #board-table tbody tr td:nth-child(6){
display:table-cell;
}
}
답변 3
@media screen and (min-width: 768px) and (max-width: 959px)
min 값과 max 값도 한번 넣어봐주세요
창을 줄이면 뭔가 변화는 있네요.(메뉴부분이 보이지 않고 전체보기 아이콘이 뜸)
all 대신 screen도 넣고 테스트해 보세요 ㅎㅎ
