CSS 미디어 쿼리로 > 자유게시판

뒤로가기 자유게시판

정보 CSS 미디어 쿼리로

페이지 정보

작성자

마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

(47.♡.♡.2) 작성일 20-05-12 23:58 조회 12,847 댓글 6

본문

오늘은 CSS 미디어 쿼리

각 폰별로 사이즈가 다르다 보니.. 아이폰은 딱 정해져 있는데.. https://sir.kr/so_css/91

안드로이드 폰이 문제네요..

대략 320까지

380까지

480까지 3가지로 해서 툴바 메뉴가 10개정도 들어가게 만들어 봤습니다.

2줄로 안나오게 했으니, 부족한 메뉴는 2차 메뉴를 만들어 봐야 겠습니다.

추천1 비추천 0

댓글목록 6

마젠토님의 댓글

마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

아이피 (47.♡.♡.2) 작성일 20-05-13 00:16

Viewport size라고 하네요. https://viewportsizer.com/devices/ s20에 대한 정보가 업네요

무와보님의 댓글

무와보 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

아이피 (175.♡.♡.20) 작성일 20-05-13 05:34

이 부분의 가장 편한 해결은 em 아닐까 싶네요.
메뉴의 패딩값과 너비값을 em으로 해결하고 display값을 변화시켜주면 조금 더 단순화시킬 수 있을 것 같습니다.

마젠토님의 댓글의 댓글

마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

아이피 (47.♡.♡.2) 작성일 20-05-13 05:55

분석을 해보니 3개정도면 대충 맞아 들어가는 것 같습니다. 시간 되면 em에 대해서 좀 보겠습니다.

무와보님의 댓글의 댓글

무와보 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

아이피 (175.♡.♡.20) 작성일 20-05-13 07:58

Viewport는 BS나 MD 기준으로 4개 혹은 3개가 처음부터 불문율이었습니다.
처음 Viewport가 선보일 때 예닐곱개를 뽑아쓰고 Portrait, Vertical을 구분해서 사용했는데 이제는 3~4개로 정리하는게 대세가 되어버렸지요.
이걸 조금 더 세심하게 표현하기 위해서 em 단위를 BS, MD 공통으로 사용하고 있구요.