[react] 리액트 styled-component에서 미디어쿼리 적용하기

9/29

클론코딩 팀프로젝트 중에 styled-component에서 반응형 구현을 하기 위해 미디어쿼리 적용

 

▼ 원래는 상품리스트 끝부분이 부모요소에  딱맞지 않았음

 

사용방법

Styled-component 안에 미디어쿼리를 써줌

 

 styles.js에

export const ListWrapper = styled.ul`
	width: 100%;
`;

export const ListOuter = styled.li`
	position: relative;
	min-width: 154px;
	float: left;
	margin: 0;
	background-color: white;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	box-sizing: border-box;

	//width가 0이상일 때
	@media only screen and (min-width: 0) {
		width: 25% !important;
	}

	//width가 1200px이상일 때
	@media only screen and (min-width: 1200px) {
		width: 20% !important;
	}

	//width가 1700px이상일 때
	@media only screen and (min-width: 1700px) {
		width: 14.2857143% !important;
	}
    
    ....
    
   `;

 

적용후