平板电脑的媒体查询不起作用

Question

我创建了响应式网页设计网站。

这是一个问题。

访问我的网站（http://red2.net/rwd2/），并减少浏览器的宽度（768px~959px）。

但平板电脑的媒体查询无法更改网站的布局。

下面是平板电脑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;
}

}

完整网站css

@charset "utf-8";

/* 링크 스타일 */

a:link {
  color:#00f;
  text-decoration:underline;
}
a:visited {
  color: #800080;
  text-decoration: underline;
}
a:hover {
  color: #f00;
  text-decoration: underline;
}
a:active {
  color: #f00;
  text-decoration: underline;
}

#header-menu a:link, #header-menu a:visited {
  color: #000;
  text-decoration: none;
}
#header-menu a:hover, #header-menu a:active {
  color: #f00;
  text-decoration: none;
}

#logo a:link, #logo a:visited {
  color: #000;
  text-decoration: none;
}
#logo a:hover, #logo a:active {
  color: #f00;
  text-decoration: none;
}

#toggle-menu a:link, #toggle-menu a:visited {
  color: #fff;
  text-decoration: none;
}
#toggle-menu a:hover, #toggle-menu a:active {
  color: #f00;
  text-decoration: none;
}

#toggle-menu section a:link, #toggle-menu section a:visited {
  color: #fff;
  text-decoration: none;
}
#toggle-menu section a:hover, #toggle-menu section a:active {
  color: #f00;
  text-decoration: none;
}

.content .latest-article a:link, .content .latest-article a:visited {
  color: #000;
  text-decoration: none;
}
.content .latest-article a:hover, .content .latest-article a:active {
  color: #f00;
  text-decoration: none;
}

#sidebar-menu a:link, #sidebar-menu a:visited {
  color: #fff;
  text-decoration: none;
}
#sidebar-menu a:hover, #sidebar-menu a:active {
  color: #f00;
  text-decoration: none;
}

#footer a:link, #footer a:visited {
  color: #fff;
  text-decoration: none;
}
#footer a:hover, #footer a:active {
  color: #f00;
  text-decoration: none;
}

#board-table thead a:link, #board-table thead a:visited {
  color: #fff;
  text-decoration: underline;
}
#board-table thead a:hover, #board-table thead a:active {
  color: #f00;
  text-decoration: underline;
}

#board-table tbody a:link, #board-table tbody a:visited {
  color: #004db1;
  text-decoration: none;
}
#board-table tbody a:hover, #board-table tbody a:active {
  color: #f00;
  text-decoration: underline;
}

.content-board h2 a:link, .content-board h2 a:visited {
  color: #000;
  text-decoration: none;
}
.content-board h2 a:hover, .content-board h2 a:active {
  color: #f00;
  text-decoration: underline;
}

#board-list-function-top a:link, #board-list-function-top a:visited {
  color: #000;
  text-decoration: none;
}
#board-list-function-top a:hover, #board-list-function-top a:active {
  color: #f00;
  text-decoration: none;
}

#board-list-function-bottom a:link, #board-list-function-bottom a:visited {
  color: #000;
  text-decoration: none;
}
#board-list-function-bottom a:hover, #board-list-function-bottom a:active {
  color: #f00;
  text-decoration: none;
}

#board-list-function-bottom div a:link, #board-list-function-bottom div a:visited {
  color: #fff;
  text-decoration: none;
}
#board-list-function-bottom div a:hover, #board-list-function-bottom div a:active {
  color: #fff;
  text-decoration: none;
}

#board-list-page a:link, #board-list-page a:visited {
  color: #000;
  text-decoration: none;
}
#board-list-page a:hover, #board-list-page a:active {
  color: #f00;
  text-decoration: none;
}

/* 모바일용 CSS */

#wrap{
display:flex;
flex-flow:column nowrap;
width:100%; /* 80%; */
margin:0 auto;
max-width:1200px;
background:#e1e1e1;
}

#wrap section, #wrap aside{
box-sizing:border-box;
}

#header-menu{
/* order:1; */
width:100%;
/* background:#2ecc71; */
/* border-bottom:1px solid #39d67c; */
display:none;
}

#header-menu-list{
display:flex;
justify-content:flex-end;
}

#header-menu-list li{
/* width:25%; */
text-align:center;
}

#header-menu-list li a{
display:block;
padding:15px 15px;
padding:0.938rem 0.938rem;
}

#header{
display:flex;
/* order:2; */
flex-direction:column;
position:relative;
width:100%;
}

#logo{
/* order:1; */
width:100%;
height:50px;
/*
padding:14px;
padding:1rem;
font-size:1.188em;
font-size:1.188rem;
line-height:20px;
*/

line-height:50px;

text-align:center;
/* text-transform:uppercase; */
/* background:#e1e1e1; */ /* #2ecc71; */
/* text-shadow:0px 1px 1px #25ab5e; */
font-family:'Verdana Bold';
letter-spacing:-0.2rem;
background:#e1e1e1 url(../images/s_images/logo_small.png) center center no-repeat;
text-indent:-9999px;
}

/*
#logo:hover{
background:#e1e1e1 url(images/s_images/logo_small_over.png) center center no-repeat;
}
*/

#logo a{
margin:0 auto;
display:block;
width:160px;
height:50px;
line-height:50px;
/* border:1px solid #000; */
}

/*
#logo span{
color:#f00;
}
*/

/* px -> rem 계산기 -_-zz */
/* http://foliovision.com/2013/03/responsive-design-calculator */

#toggle-button{
display:block;
width:50px;
width:3.57142857rem;
height:50px;
height:3.57142857rem;
position:absolute;
/* top:10px; */
/* top:0.625rem; */
top:0;
/* right:10px; */
/* right:0.625rem; */
left:0;
text-indent:-9999px;
background:url(../images/s_images/menu_toggle_btn.png) no-repeat;
cursor:pointer;
}

#toggle-menu{
display:none;
background:#333;
color:#fff;

position:relative;
}

#toggle-menu ul ul{
display:none;
/* width:100%; */
/* border:1px solid #000; */
}

#toggle-menu li{
display:flex;
background: #313337;/* #2c3e50; */
/* border-top:1px solid #3f4145; */
/* border-bottom:1px solid #131416; */
}


/* 하위 메뉴 토글 버튼을 누르면 나오는 메뉴 */
#toggle-menu li li{
/* display:block; */
background:#1f2023; /* #3d3d78; */
/* width:100%; */
text-indent:15px;
/* border-bottom:1px solid #000; */
}


#toggle-menu nav li a{
width:80%;
padding:15px; /* 20px 20px; */
padding:1.07142857rem;
/* padding:1.250rem 1.250rem; */
}

#toggle-menu li span{
width:20%;
text-indent:-9999px;
background:url(../images/s_images/sub_menu_toggle_btn.png) center center no-repeat;
cursor:pointer;
/* text-align:center; */
/* vertical-align:middle; */
/* border:1px solid #000; */
/* border-left:1px solid #000; */
}

/* #toggle-menu li span:hover{ */
/* background:url(images/s_images/sub_menu_toggle_btn_hover.png) center center no-repeat; */
/* text-align:center; */
/* vertical-align:middle; */
/* border:1px solid #000; */
/* border-left:1px solid #000; */
/* } */



/* 목록 안의 요소들을 위에서 아래로 배치 -_-! */
#toggle-menu nav *{
display:flex;
flex-direction:column;
}

/* div 안의 요소들을 왼쪽에서 오른쪽으로 배치 */
#toggle-menu div{
display:flex;
flex-direction:row;
}

/*
#search{
display:none;
flex-direction:;
}
*/

#login{

}

#login, #search{
padding:15px;
padding:1.07142857rem;
}

#search-button{
padding:5px;
padding:0.35714286rem;
}

/*
#search input[type="text"]{
width:260px;
border:1px solid #000;
}
*/


.content{
/* padding:40px 12.5%; */
width:100%;
/*
margin:10px auto;
margin:0.71428571rem auto;
padding:5px;
padding:0.35714286rem;
*/
/* 40px ÷ 320px */
background:#fff;
/* order:1; */
}

#sidebar-menu{
/*
margin:10px;
margin:0.71428571rem;
padding:5px;
padding:0.35714286rem;
*/
background:#666;
}

#sidebar-menu h2{
color:#fff;
background:#06c;
padding:5px;
padding:0.35714286rem;
line-height:30px;
line-height:2.14285714rem;
}

#sidebar-menu ul{
list-style-type:none;
text-indent:10px;
text-indent:0.71428571rem;
line-height:30px;
line-height:2.14285714rem;
}


#toggle-menu section{
color:#fff;
background:;#666 /* #1d1e20; */
}


.latest-article{
width:100%;
}

.content .latest-article ul{
padding-left:5px;
padding-left:0.35714286rem;
text-indent:10px;
text-indent:0.71428571rem;
line-height:30px;
line-height:2.14285714rem;
}

.content .latest-article li{
list-style:none; /* square; */
/* list-style-position:inside; */
background:url(../images/s_images/bullet.gif) no-repeat left;
}

/* http://www.w3schools.com/cssref/pr_list-style-position.asp */


.latest-article a, #sidebar-menu a{
width:100%;
display:block;
}

#wrap-content{
/* width:90%; */
/*
margin-bottom:10px;
margin-bottom:0.71428571rem;
*/
/*
padding:14px;
padding:1rem;
*/
background:#fff;
}


#footer{
width:100%;
text-align:center;
background:#333;
color:#fff;
line-height:40px;
line-height:2.85714286rem;
}

#footer ul{
display:flex;
justify-content:center;
}

/*
#footer ul li{
padding-right:1rem;
}
*/

#footer ul li:last-child{
padding-right:0; /* 마지막 목록은 오른쪽 여백이 없음 */
}

#footer a{
padding:10px;
padding:0.71428571rem;
}

/* 모바일, 태블릿에서는 외부 로그인 안뜨게 */
#sidebar-outlogin{
display:none;
}


/* 구글 애드센스 */
#banner-bottom{
/* background:#e1e1e1; */
/* margin-bottom:10px; */
text-align:center; 
}

/* 게시판 목록 스타일 */

.content-board{
display:block;
/* flex-direction:row; */
}

#board-table{
width:100%;
margin-bottom:1rem;
}

#board-table caption{
position:absolute;
top:-9999px;
left:-9999px;
width:1px;
height:1px;
overflow:hidden;
visibility:hidden;
}

/* 모바일에서 제목을 제외한 것들을 숨긴다.  */
#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:none;
}

#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(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){
text-align:center;
}

/* 게시판 테이블 셀 너비 지정 */
#board-table thead tr th:first-child, #board-table tbody tr td:first-child{
width:10%;
}

#board-table thead tr th:first-child, #board-table tbody tr td:nth-child(2){
width:10%;
}

#board-table thead tr th:first-child, #board-table tbody tr td:nth-child(3){
width:45%;
}

#board-table thead tr th:first-child, #board-table tbody tr td:nth-child(4){
width:15%;
}

#board-table thead tr th:first-child, #board-table tbody tr td:nth-child(5){
width:10%;
}

#board-table thead tr th:first-child, #board-table tbody tr td:nth-child(6){
width:10%;
}


#board-table tbody tr{
/* border-bottom:1px dotted #000; */
}

/*
#board-table tbody tr:hover{
background:#00b0ff;
}
*/

/* 참고: http://www.ign.com/boards/forums/pc.7203/ */

#board-table tbody tr:nth-child(odd){
background:#f6f6f6;
}

/*
#board-table tbody tr:nth-child(odd):hover{
background:#d6e7f9;
}
*/

#board-table thead{
color:#fff;
background:#06c;
}

#board-table thead tr th{
padding:10px; /* 18px 0; */
/* padding:1.125rem 0; */
}

#board-table tbody tr td{
padding:10px; /* 22px 0; */
/* padding:1.375rem 0; */
}

/*
#board-table tbody tr:hover{
background:#d6e7f9;
}
*/

/* RSS, 관리자 */

#board-list-function-top{
display:flex;
justify-content:flex-end;
}

#board-list-function-top ul{
display:flex;
}

#board-list-function-top a{
margin-right:5px;
display:block;
padding:10px;
}


/* 목록, 선택삭제, 선택복사, 선택이동 */

#board-list-function-bottom{
display:flex;
justify-content:space-between;
margin-bottom:1rem;
}

#board-list-function-bottom ul{
display:flex;
}

#board-list-function-bottom a{
margin-right:5px;
}

#board-list-function-bottom ul a{
display:block;
padding:10px;
background:#e7e9ea;
}

/* 페이지 */

#board-list-page{
display:flex;
justify-content:center;
margin-bottom:1rem;
}

#board-list-page a{
margin-right:5px;
padding:1px;
}

#board-list-page a:last-child{
margin:0;
}

/* 검색 */

#board-list-search *{
display:flex;
justify-content:center;
line-height:20px;
line-height:1.42857143rem;
}

#board-list-search input{
padding:5px;
padding:0.35714286rem;
margin-right:2px;
}

/*
#board-list-function-bottom li:after{
content:"";
}
*/

/* 글쓰기 */

#board-list-function-bottom div a{
display:block;
padding:10px;
background:#f90; /* #dc3700; */
}

/*
#board-list-function-bottom div a:hover{
background:#ff5219;
}
*/

/*
#board-list-page a{
padding:2px;
}
*/

}

/* 태블릿용 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;
}

}

/* PC용 CSS */

@media all and (min-width:960px){

body{
background:#262626;
}

#header{
margin:0 auto;
margin-bottom:10px;
margin-bottom:0.71428571rem;
width:98%;
height:129px;
}

#header-menu{
display:block;
}

#logo{
height:91px;
background:#fff url(../images/bg/main_image.jpg) no-repeat right;
}

#logo a{
margin:0;
width:188px;
height:91px;
background:url(../images/s_images/logo.png) no-repeat left;
}

#toggle-menu{
width:100%;
/* display:block; */
display:flex;
/* flex-direction:row; */
justify-content:space-between;
}

/* 화살표, 토글 버튼, 로그인 */
#toggle-menu li span, #toggle-button, #toggle-menu #login{
display:none;
}

/* 하위 메뉴 나타나게 합니다 */
/* #toggle-menu li:first-child:hover #toggle-menu-main */

#toggle-menu li:first-child:hover #toggle-menu-main,
#toggle-menu li:nth-child(2):hover #toggle-menu-game,
#toggle-menu li:nth-child(3):hover #toggle-menu-content,
#toggle-menu li:nth-child(4):hover #toggle-menu-comm,
#toggle-menu li:nth-child(5):hover #toggle-menu-down,
#toggle-menu li:nth-child(6):hover #toggle-menu-site{
display:block;
}


/* 검색창을 오른쪽으로 배치 */
#toggle-menu section{
order:2;
}

/* 검색창에 여백을 준다 */
#search{
padding:4px;
}

/* 목록 안의 요소들을 왼쪽에서 오른쪽으로 배치 -_-! */
#toggle-menu nav *{
display:flex;
flex-direction:row;
}

/* 목록안의 앵커 요소에 너비, 높이를 주고 텍스트를 바깥으로 이동시킴 */
#toggle-menu nav li a{
width:93px;
height:38px;
padding:0; /* 15px; */
text-indent:-9999px;
}

/* 하위 목록 앵커 */
#toggle-menu nav li li a{
width:150px;
height:auto;
text-indent:0;
padding:10px; /* 15px; */
z-index:1; /* 이 속성을 주면 모든 하위 메뉴 항목이 나타남 */
}


/* 글로벌 네비게이션 왼쪽에 마진을 준다 */
#toggle-menu ul{
margin-left:185px;
}

#toggle-menu ul ul{
position:relative;
margin-left:0;
}

#toggle-menu li li{
position:relative;
}

/* 이걸 먹이면 하위 메뉴가 한줄이 되어 겹침 */
/*
#toggle-menu li li{
position:absolute;
top:38px;
left:-93px;
}
*/

/* 배경 이미지 롤오버 */
#toggle-menu #main-rollover{
background:#fff url(../images/mainmenu/main.png) no-repeat;
}

#toggle-menu #main-rollover:hover{
background:#fff url(../images/mainmenu/main_over.png) no-repeat;
}


#toggle-menu #game-rollover{
background:#fff url(../images/mainmenu/game.png) no-repeat;
}

#toggle-menu #game-rollover:hover{
background:#fff url(../images/mainmenu/game_over.png) no-repeat;
}


#toggle-menu #content-rollover{
background:#fff url(../images/mainmenu/content.png) no-repeat;
}

#toggle-menu #content-rollover:hover{
background:#fff url(../images/mainmenu/content_over.png) no-repeat;
}


#toggle-menu #comm-rollover{
background:#fff url(../images/mainmenu/comm.png) no-repeat;
}

#toggle-menu #comm-rollover:hover{
background:#fff url(../images/mainmenu/comm_over.png) no-repeat;
}


#toggle-menu #down-rollover{
background:#fff url(../images/mainmenu/down.png) no-repeat;
}

#toggle-menu #down-rollover:hover{
background:#fff url(../images/mainmenu/down_over.png) no-repeat;
}


#toggle-menu #site-rollover{
background:#fff url(../images/mainmenu/site.png) no-repeat;
}

#toggle-menu #site-rollover:hover{
background:#fff url(../images/mainmenu/site_over.png) no-repeat;
}


/* sir의 위토즈님께 감사를 */
/* http://sir.co.kr/qa/?wr_id=30841 */

#toggle-menu #toggle-menu-main{
position:absolute;
top:38px;
left:185px;
}

#toggle-menu #toggle-menu-game{
position:absolute;
top:38px;
left:278px;
}

#toggle-menu #toggle-menu-content{
position:absolute;
top:38px;
left:371px;
}

#toggle-menu #toggle-menu-comm{
position:absolute;
top:38px;
left:464px;
}

#toggle-menu #toggle-menu-down{
position:absolute;
top:38px;
left:557px;
}

#toggle-menu #toggle-menu-site{
position:absolute;
top:38px;
left:650px;
}


#wrap-test{
width:98%;
margin:0 auto;
display:flex;
flex-direction:row;
}

#wrap-content{
width:90%;
order:2;
margin-bottom:10px;
margin-bottom:0.71428571rem;
padding:14px;
padding:1rem;
background:#fff;
}

#sidebar{
margin-right:10px;
margin-right:0.71428571rem;
/* margin-right:5%; */
width:164px;
width:11.71428571rem;
/* width:15%; */
order:1;
/*
width:164px;
width:11.71428571rem;
margin-right:10px;
margin-right:0.71428571rem;
*/
}


/* 외부 로그인 */

#sidebar-outlogin a:link, #sidebar-outlogin a:visited {
  color: #000;
  text-decoration: none;
}
#sidebar-outlogin a:hover, #sidebar-outlogin a:active {
  color: #f00;
  text-decoration: none;
}

/* PC에서는 외부 로그인 뜨게 */
#sidebar-outlogin{
display:block;
margin-bottom:10px;
padding:10px;
/* CSS3에서는 그라디언트를 지원해서 배경 이미지가 필요없다 -_-zz */
background:linear-gradient(to bottom, #fefefe, #cdcdcd);
}

#sidebar-outlogin legend,
#sidebar-outlogin [for=login-id],
#sidebar-outlogin [for=login-password]{
display:none;
}

#login-id,
#login-password{
font-size:100%;
}

/* input과 로그인 정렬 */
#wrap-outlogin{
display:flex;
flex-direction:row;
justify-content:space-between;
}

#login-id,
#login-password{
width:95px;
margin-bottom:5px;
}

#sidebar-outlogin [type=submit]{
width:45px;
height:45px;
background:#333; /* #4bc6f7; */
color:#fff;
/* border:1px solid #33bcf1; */
}

#sidebar-outlogin [type=submit]:hover{
background:#06c; /* #4bc6f7; */
color:#fff;
}

#sidebar-outlogin p{
line-height:20px;
/* margin-bottom:5px; */
}

/*
#sidebar-outlogin ul:last-child{
display:flex;
justify-content:flex-end;
}
*/

/*
#sidebar-outlogin div:last-child{
line-height:20px;
margin-bottom:5px;
display:flex;
flex-direction:row;
justify-content:space-between;
}
*/

/* 구글 애드센스 */
#banner-bottom{
margin-bottom:10px;
}

/* 모바일에서 제목을 제외한 것들을 다시 보여준다.  */
#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;
}


#board-list-page a{
padding:5px;
background:#e7e9ea;
}


.content{
/* padding:40px 12.5%; */
width:100%;
/*
margin:10px auto;
margin:0.71428571rem auto;
padding:5px;
padding:0.35714286rem;
*/
/* 40px ÷ 320px */
background:#fff;
/* order:1; */
display:flex;
flex-direction:row;
}

.content-info{
display:block;
/* flex-direction:row; */
}


}