반응형질문
본문
안녕하세요 .
이 랜딩페이지를 만들고있는데요,
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내용
}
그냥 이렇게 해보세요~~
네네 그렇게 수정했습니다 .., 감사합니다 !