[CSS] min-width / max-width

-  미디어 쿼리를 사용 할 때

브라우저의 폭을 인식해서 각 조건에 맞게 처리하기

@media (min-width: 1000px) {} /*최소 폭이 1000px 일 때 적용되는 코드 */

=> 작은 사이즈의 레이아웃을 기본으로 하고 확장되는 형태로 작성

@media (max-width: 1000px) {} /*최대 폭이 1000px 이하인 경우 적용되는 코드 */

=> 가장 큰 사이즈 레이아웃을 기본으로 축소하는 형태로 작성

 

 

예시)

전체 화면의 20%이지만 500px 이상으로 커질 땐 커지게 하고 싶지 않을 때

width: 20%
max-width: 500px;

자식(li)이 부모(ul)의 width를 넘지 않게 할 때

ul{width: 500px;}

li{max-width: 500px;}

 

참고 : https://studiomeal.com/archives/1004

반응형 웹, min-width와 max-width 중 어떤 것을 사용하는게 좋을까