졸업작품을 만들면서 각 디바이스별로 반응형을 처리 해주기 위해 이것 저것 찾아보았다
먼저 반응형 웹을 사용하기 위해서 밑의 코드를 html header에 포함시켜야한다!
<meta name="viewport" content="width=device-width, initial-scale=1">
디바이스 별 해상도 분기점
/* 태블릿 728px ~ 1024px */
@media screen and (max-width: 1024px) {
변경할 속성 {}
}
/* 모바일 728px까지 */
@media screen and (max-width: 728px) {
변경할 속성 {}
}나는 보통 웹을 기준으로 만들기 때문에 웹에서의 반응형은 따로 처리하지 않고 초기값으로 잡는다!
느낀점
반응형을 일일이 처리하다가는 작업할양도 굉장히 많고 의존성이 있는 태그들의 경우 처리 하기도 굉장히 복잡해
어느정도로만 반응형 처리를 하고 실제로 출시해야하는 사이트의 경우 웹 따로 모바일 따로 각자 만드는것이 가장 베스트이다..!!
(각 기기별 최적화 문제도있음)