[CSS] 반응형 웹을 제작할 때 팁

반응형 웹을 제작할 때 팁

style.css 를 보면서 response.css 작성

반드시 style.css에서 사용한 선택자 방식과 동일한 방식으로 response.css에서 사용할 것

float 속성이 걸린 것을 없앤다. → float: none 처리

width 속성이 정적으로 걸린 것을 100% 로 변경

width 속성이 모바일 크기보다 큰 것(400px 이상)을 100% 로 변경

height 속성이 정적이거나 100vh는 내용에 맞게 들어가게 auto 로 변경, 이미지 포함

font-size 일부 수정

필요 시 text-align: center

display:flex 지정 후 자식 요소에게 order : n 을 지정함으로써 순서 변경

모바일 사이즈에 맞게 폰트사이즈, 마진, 패딩, 크기 조정하기

경우에 따라 position: absolute 된 요소를 찾아서 static, transform: transition(0) 적용

모바일 작업은 iphone 6 기준으로 하는게 좋다.

구형(작은) 스마트폰을 사용하는 사람이 있을 수도 있기 때문이다.