CSS) 모바일 반응형 홈페이지 css (media query 사용)

head에 아래 meta 선언

meta 선언 안하면 모바일에서 media query 내용이 모바일 화면에 맞춰서 보이지 않으므로 반드시 선언해야함

<meta name="viewport" content="width=device-width,initial-scale=1">
 

 

css에서 화면 사이즈에 따라 아래 코드 사용

.my_div{width:50%;}  /*기본은 가로길이 50%*/
 
@media screen and (max-width:1500px){
  .my_div{width:70%;} /*브라우저 길이가 1500px 이하일때 가로길이 70%*/
}
 
@media screen and (max-width:768px){
  .my_div{width:100%;} /*브라우저 길이가 768px 이하일때 가로길이 100%*/
}