[tailwind] 반응형웹 적용

노호준·2023년 9월 6일
0
  • 사용하는 이유 : 화면 크기에따른 컴포넌트 크기적용을 쉽게할 수 있음
  • 사용법
// 정해진값
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

// 사용법
<img class="w-16 md:w-32 lg:w-48" src="...">
  • 팁 : w,h,m등 1~10까진 1씩 증가 10 이후로는 4의배수만큼 증가(12, 16... 96까지)

0개의 댓글