반응형질문

반응형질문

QA

반응형질문

본문

안녕하세요 .

https://afms.co.kr/landing/

 

이 랜딩페이지를 만들고있는데요,

 

pc사이즈,

@media all and (max-width: 768px),

@media all and (max-width: 575px),

이렇게 이미지통갈이를 해주고싶은데

자꾸 이상한 해상도에서 이미지가 바뀌어버립니다 .. 반응형이 익숙치않아서 어렵네요 ㅜㅜ

저위의 해상도아래로 내려갔을때부터 이미지가 바뀌게 도움부탁드립니다 ..

 

이 질문에 댓글 쓰기 :

답변 2

1개의 이미지로 반응형을 사용하면 크기로 인해 글씨가 깨지거나 작아서 안보이는경우가 있기 때문에

img_pc.jpg / img_tablet / img_mo  3개로 만드셔서 구현하시는게 제생각엔 좋아보입니다!

같은 div 안에 위치 시키신후 해당 사진만 block 시켜서 구현 하시면 될 것 같아요

여러 방법이 있겠지만 

이미지를 감싼 div를 all_img 라고 가정하에

.all_img img{display:none; 

}

.all_img pc{display:block}

@media (max-width: 768px){

pc = none;

테블릿 = block;

}

@media (max-width: 575px){

pc = none;

테블릿 = none;

모바일 = block;

}

 

덧붙여 media 뒤에 all and 는 연산자로 not 과 동일하답니다.

 

https://aboooks.tistory.com/365

관련 연산자 공부도 하시면 도움될것 같네요.

@media (max-width: 768px) {

css내용

}

@media (max-width: 575px) {

css내용

}

 

그냥 이렇게 해보세요~~

답변을 작성하시기 전에 로그인 해주세요.
전체 359
QA 내용 검색

회원로그인

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