안녕하세요.
초보가 개인 커뮤니티 작업중에 문제가 발생하여 문의 드립니다
다음 코드를 어떻게 수정해야 태블릿에서 pc랑 같은 화면을 노출 시킬 수 있을까요?
첨부파일에 css업로드 하겠습니다. default.css
@media screen and (max-width:768px){
.xe{padding-top:50px;}
.mobile-B{padding-top:92px;}
.xe_width{width:auto !important;max-width:768px;}
.ce .in_body,
.ec .in_body{padding:0 !important;}
.ec .e1,
.ce .e1{display:none;}
.ce .content,
.ec .content{float:none;width:98%;padding:0 1% 0 1%;}
.header{background:#795548;height:auto !important;position:fixed;border-bottom:0;top:0 !important;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 3px rgba(0,0,0,0.3);}
.in_header{background-color:rgba(0,0,0,0.02);}
.header h1 {position:relative;text-align:center;margin:0 50px;top:4px;line-height:32px;height:32px;}
.header h1 *{vertical-align:top;}
.header h1 img{max-height:32px;}
.fix_menu,
.top_header,
.gnb,
.large_logo{display:none !important;}
.logo_min{display:block;}
.top_menu{display:block;}
.wrap_logo{padding:5px 0;height:40px;}
.wrap_menu{display:none;}
.mobile_menu{display:inline-block;}
.wrap_sub_header {padding-top:0;height: 3px;}
.sub_header{height:100px;}
.bg_breadclumb h2{height:50px;line-height:50px;top:50%;margin-top:-25px;font-size:18px;font-weight:normal}
.bg_breadclumb h2 a{padding:15px 15px;}
.bg_breadclumb h2:after{height:2px;top:40px;}
.foot_logo{display:none;}
.copylight{padding:0px 0 0 0}
.ec .lnb{display:none}
.breadclumb_title{margin-bottom:0;}
.wrap_breadclumb{padding-right:5px;}
.breadclumb_title {height:120px;}
.xe .widgetTable_DW .in_title a,
.xe .widgetGallery_DW_list .title,
.wrapTab li a{font-size:14px;}
.foot_absolute{position:relative;clear:both;padding:10px 0 0px 0;top:0;text-align:left;}
.wrap_in_select {display:none;}
.foot_link{display:block;}
.foot_sns li{float:left;padding:0 4px 0 0px;}
}
@media screen and (min-width:768px){
.footer ul{margin-left:-1px;}
.footer_li1{padding-left:10px;}
.bg_bottom_banner {margin:0 2%;}
.right_top{right:2%;}
.in_footer {padding:20px 10px 20px 10px !important;}
.foot_menu li{left:-1px;position:relative;}
.foot_menu li.foot_li1{padding-left:10px;}
}
@media screen and (max-width:760px){
}
@media screen and (max-width:730px){
}
@media screen and (max-width:667px){
}
@media screen and (max-width:630px){
}
/* 안드로이드(진저+) landscape */
@media screen and (max-width:533px){
}
@media screen and (max-width:500px){
}
/* 아이폰4+ landscape */
@media screen and (max-width:440px){
}
@media screen and (max-width:410px){
}
@media screen and (max-width:375px){
.breadclumb_li3{display:none}
}
/* 안드로이드(진저+), 아이폰4+ */
@media screen and (max-width:320px){
.header h1 *{vertical-align:top;}
.header h1 img{max-width:200px;}
.breadclumb_li2{display:none;}
}
크게 아래 코드로 쌓인 부분에서 차이가 납니다.
@media screen and (max-width:768px)
@media screen and (min-width:768px)
태블릿이라면 보통 1024~1280정도 해상도이지 않나요? 만약 태블릿이 768이라면
저 숫자를 767로 바꿔보세요.
건물로 따지면 골조만 때려맞추는 거라 정확하지는 않습니다.
css문제에서 가장 좋은 건 사이트 주소를 알려주시는 것입니다.