반응형 웹 어떻게 하시나여
본문
피그마로 360 시안 하나만 왔는데
360부터 1024 까지 반응형을 해야됩니다 ㅠㅠ
360 ~ 719
720 ~ 1024
이렇게 분기를 할까 하는데
만약 피그마에 있는 360 시안에 폰트 사이즈가
20이라는 가정에 720~1024 는 어느정도 해야 할까요..?
글자 크기 마진/ 패딩 / 갭 등이 고민입니다 ㅠㅠ
2배수 하기엔 너무 커져요 ㅠ
답변 2
반응형 분기는 보통 이렇게 합니다.
/* 스마트폰 */
@media (max-width: 480px) {
}
/* 일반 스마트폰 */
@media (min-width: 481px) and (max-width: 767px) {
}
/* 태블릿 */
@media (min-width: 768px) and (max-width: 1023px) {
}
/* 노트북~데스크탑 */
@media (min-width: 1024px) {
}
분기를 어떡하냐의 질문이 아니라 늘어난 분기에 따른
수치 증가를 어떻게 시키냐는 질문 입니다 ㅠ
1안
/* 기본 (360px) */
body {
font-size: 20px;
margin: 10px;
padding: 15px;
gap: 10px;
}
/* 720px 이상 */
@media (min-width: 720px) {
body {
font-size: 28px;
margin: 18px;
padding: 25px;
gap: 18px;
}
}
/* 1024px 이상 */
@media (min-width: 1024px) {
body {
font-size: 34px;
margin: 24px;
padding: 32px;
gap: 24px;
}
}
2안
body {
/* min, preferred, max */
font-size: clamp(20px, 2.5vw, 34px);
margin: clamp(10px, 1.5vw, 24px);
padding: clamp(15px, 2vw, 32px);
gap: clamp(10px, 1.5vw, 24px);
}
답변을 작성하시기 전에 로그인 해주세요.