해상도에 따른 변화

해상도에 따른 변화

QA

해상도에 따른 변화

본문

700px까지 375px의 미디어가 나타나게 하고싶습니다.

(700픽셀 이하부터는 work_img와 work_txt가 슬라이드의 아래로 가게 하고싶습니다.)

고수님들의 도움을 부탁드립니다*_*

현재 노트5와 아이폰6plus에서 화면이 깨집니다.(376px~700px까지 깨짐)

i-care.kr

 

css

/*index*/
.latest{width:100%;float:left;}
 
#main_work ul:after {display:block;visibility:hidden;clear:both;content:""}
#main_work ul li{background:#fff;letter-spacing:-0.01em}
#main_work ul li.main_work_1{background:#f8f8f8;}
#main_work .work_txt span{ display:block;padding:5px 0;color:#808080;line-height:1.5em}
 
#lt_notice{clear:both}
#lt_notice,#lt_board,#lt_board2,#lt_gall{margin-top:20px}
 
 
@media all and (min-width : 601px) {
    
    .col_l_60{width:60%}
    .col_l_40{width:40%}
	.col_l_100{width:100%}
    #main_work ul{margin-left:20px}
    #main_work ul li{overflow:hidden}
    #main_work .work_img img{max-width:100px;width:100%;height:auto}
    #lt_board2 .lt{margin-left:20px}
 
}
@media (min-width :701px) {
    
    #main_work .work_img{width:35%;height:122px;line-height:112px;display:block;float:left;}
    #main_work .work_txt{width:65%;height:122px;display:block;float:left;}
    #main_work .work_txt span.work_txt_tit{margin-top:20px ;font-weight:bold;font-size:1.25em;color:#111}
 
}
@media (min-width:601px) and (max-width :700px) {
    
    #main_work .work_img{width:35%;height:100px;line-height:100px;display:block;float:left;}
    #main_work .work_txt{width:65%;height:100px;display:block;float:left;}
    #main_work .work_txt span.work_txt_tit{line-height:100px;padding:0 ;font-weight:bold;font-size:1.25em;color:#111;}
    #main_work .work_txt span.work_txt_p{display:none}
 
}
 
@media all and (max-width : 600px) {
 
    #main_work{margin-top:20px}
    #main_work ul li{float:left;width:33.3%;text-align:center;}
    #main_work .work_img{display:block;}
    #main_work .work_img img{max-width:100px;width:80%;height:auto}
    #main_work .work_txt span.work_txt_p{display:none;}
    #main_work .work_txt span.work_txt_tit{margin:0 0 15px;font-size:1.2em;color:#111;font-weight:bold}
 
}
@media all and (max-width : 375px) {
    #container_title{padding-bottom:13px}
    #container {padding:15px 10px}
    #main_work{margin-top:10px}
    #main_work ul li{width:100%;clear:both}
    #main_work .work_txt span.work_txt_p{display:block;padding:0 0 15px}
    #main_work .work_txt span.work_txt_tit{padding-top:0;margin:0;font-size:1.2em;color:#111;font-weight:bold}
    #lt_notice,#lt_board,#lt_board2,#lt_gall{margin-top:10px}
 
}

 

php


<div id="main_work" class="col_l_40 latest">
    <ul>
        <li>
            <a href="/bbs/content.php?co_id=company" class="work_img"><img src="<?php echo G5_THEME_IMG_URL; ?>/loca.png" alt="청첩장"></a>
            <a href="/bbs/content.php?co_id=company" class="work_txt"><br /><span><img src="<?php echo G5_THEME_IMG_URL; ?>/name2.png" alt="청첩장"></span>
			<span class="work_txt_p">9월 10일(일) 오후 5시<br>목화웨딩컨벤션 아모르홀<br>▷상세보기◁</span></a>
            
        </li>
        <li class="main_work_1">
            <a href="ㅁㄴㅇㄹ" class="work_img"><img src="<?php echo G5_THEME_IMG_URL; ?>/man.png" alt="신랑에게"></a>
            <a href="ㅁㄴㅇㄹ" class="work_txt"><br /><span><img src="<?php echo G5_THEME_IMG_URL; ?>/nameman.png" alt="청첩장"></span>
			<span class="work_txt_p">*** 개인정보보호를 위한 휴대폰번호 노출방지 ***<br>▷통화하기(모바일전용)◁</span></a>        </li>
        <li>
            <a href="ㅁㄴㅇㄹ" class="work_img"><img src="<?php echo G5_THEME_IMG_URL; ?>/girl.png" alt="신부에게"></a>
            <a href="ㅁㄴㅇㄹ" class="work_txt"><br /><span><img src="<?php echo G5_THEME_IMG_URL; ?>/namegirl.png" alt="청첩장"></span>
			<span class="work_txt_p">*** 개인정보보호를 위한 휴대폰번호 노출방지 ***<br>▷통화하기(모바일전용)◁</span></a>        </li>
        </li>
    </ul>
 
</div>

이 질문에 댓글 쓰기 :

답변 1

자체해결 하였습니다.


@media (min-width:601px) and (max-width :700px) {
    
    #main_work .work_img{width:25%;height:110px;line-height:100px;display:block;float:left;}
    #main_work .work_txt{width:75%;height:110px;display:block;float:left;}
    #main_work .work_txt span.work_txt_tit{line-height:100px;padding:0 ;font-weight:bold;font-size:1.25em;color:#111;}
 
 
}
 
@media all and (max-width : 600px) {
 
    #main_work{margin-top:20px}
    #main_work ul li{float:left;width:100%;text-align:center;}
    #main_work .work_img{display:block;}
    #main_work .work_img img{max-width:100px;width:80%;height:auto}
    #main_work .work_txt span.work_txt_tit{margin:0 0 15px;font-size:1.2em;color:#111;font-weight:bold}
            
 
}
답변을 작성하시기 전에 로그인 해주세요.
전체 3

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT