폰트사이즈 vw 사용시 전체화면에서 css 깨짐 현상

Question

정상상태 깨지는 상황웹개발 프론트 공부중인 학생입니다....이미지처럼 화면비율100%, 오른쪽 사이드바 없는 전체화면에서만 저렇게 깨져보이네요엣지처럼 오른쪽 사이드바가 있거나 개발자도구를 켜면 또 제대로 보이구요. 노트북, 태블릿, 스마트폰 다 안깨지는데 pc 모니터에서만 깨지구요.. 왜이럴까요 ㅜ

CREATIVE

AND

PASSIONATE

WEB DEVELOPER

NOH YEONG SEOK

미디어 쿼리 이용해서 width값 1920이상에서는 폰트사이즈 13rem, 박스사이즈도 고정 해줬는데도개발자도구에서 디바이스 툴바로 해상도 높여서 봐도 잘 나오는데100%비율 전체화면에서는 폰트사이즈, 박스사이즈가 더 크게 나오네요....어떻게 해결해야 할까요? ㅜㅜ

O-h-y-o · Answer

css수치를 어떻게 잡으신건지.. 괴랄한데요.. 첫번째 사진처럼의 모양을 원하시는거면

CREATIVE

AND

PASSIONATE

이런식으로.. 해보세요..

컴포지트 · Answer

까만 박스 넓이를 % 말고 vw 로 바꿔보시길. 주석에 있는 계산식 보니까 표시 크기를 1440으로 가정하고 계산한 듯 하는군요.아니면, 만약 1440 으로 기준 잡았으면 아예 부모 박스의 max-width 를 1440 으로 잡아서 더 늘리는 일 없게 해도 됩니다.물론 margin: 0 auto; 로 가운데 정렬하면 그나마 예뻐 보이겠죠.

yeori · Answer

&#34;구조가 깨졌다&#34;의 의미가 명확하지 않네요.정확히 4개의 행으로 출력되길 원하고 각 행마다 정확히 첫번째 짤과 같은 구조를 원하신다면 html 구조 자체가 이를 반영하지 못하고 있습니다. 너무나 깨지기 쉽게 div, h2 등이 조직되어 있습니다.

yeori · Answer

CREATIVE

AND

PASSIONATE

WEB DEVELOPER

HOBBY JIN SMITH

.wrapper { width: 100%; } .brand { display: flex; flex-direction: column; row-gap: 1.5vw; } .brand .row { display: flex; column-gap: 1.5vw; } .brand .row h3 { margin: 0; font-size: 6vw; } .brand .row .space { flex: 1 1 auto; background-color: black; }

폰트사이즈 vw 사용시 전체화면에서 css 깨짐 현상

4개의 답변

Q&A 목록