반응형질문

반응형질문

QA

반응형질문

답변 2

본문

안녕하세요 .

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내용

}

 

그냥 이렇게 해보세요~~

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 364
© SIRSOFT
현재 페이지 제일 처음으로