반응형질문 채택완료
안녕하세요 .
이 랜딩페이지를 만들고있는데요,
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
관련 연산자 공부도 하시면 도움될것 같네요.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인