강의

멘토링

커뮤니티

Cộng đồng Hỏi & Đáp của Inflearn

Hình ảnh hồ sơ của cpujeongso5637
cpujeongso5637

câu hỏi đã được viết

Bộ sưu tập trang web phản hồi Flex (Những thành phố tuyệt vời nhất thế giới)

Chuyển đổi layout di động responsive (1) - Cài đặt và 7 section

가로스크롤

Viết

·

444

·

Đã chỉnh sửa

1

■ 질문 남기실 때 꼭! 참고해주세요.

- 먼저 유사한 질문이 있었는지 검색해주세요.
- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.
- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.
- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.

 

 

캡쳐-질문.png

 

 

선생님 안녕하세요

pc, 모바일 반응형은 대응이 됐는데,

웹사이트 창을 1250px정도로만 줄여도

가로스크롤이 발생을 해서요ㅠㅠ

 

혹시 이런 경우에는,

div와 이미지 크기를 80%같은 수치로 줄여야하는건지?

아니면 overflow로 대응을 해야하는건지?

궁금합니다.

 

혹시 몰라서 제가 임의로

img에

max-width:100%

height:auto로 해놨는데

 

이미지가 안넘어가고 가로스크롤이 발생해서요ㅠㅠ

답변주시면 감사합니다.

 

 

다른 질문들을 확인해보니,

@media (min-width: 768px) and (max-width: 1024px)

이런식으로 대응하라고 하셨는데

폰트사이즈와 이미지를 줄여야하는건가요?ㅠㅠㅠ

아니면 flex구조를 컬럼으로 바꿔야할까요?

flex반응형-웹

Câu trả lời 1

0

codingworks님의 프로필 이미지
codingworks
Người chia sẻ kiến thức

컨텐츠 영역에 대한 미디어쿼리 구간을 만들지 않아서 그렇습니다.

예시로 컨텐츠 영역이 1280px이라면 브라우저가 1280픽셀 이하로 내려가면 가로스크롤이 생기기 시작합니다.

section { width: 1280px }

이런 부분을 방지하시려면 아래처럼 미디어 쿼리 구간을 하나 더 만들어 주시면 됩니다.

또는 section의 너비를 처음부터 max-width: 1280px 로 하시는 것도 방법입니다.

@media (max-width: 1280px) {

section { width: 100% }

}

Hình ảnh hồ sơ của cpujeongso5637
cpujeongso5637

câu hỏi đã được viết

Đặt câu hỏi