Responsive Web Design) Media query

claire-euni·2020년 6월 23일
0

css 코드 내부에서 media query 구현하기 위한 문법

@media only 디바이스 and  (조건문) {실행문}

@media only screen and (max-width: 480px) {  
  body {  
    font-size: 12px;  
  } 
}
  • @media : media 를 시작한다는 의미

  • only screen : 어떤 디바이스에 적용할지 선택
    screen/ print/ all 등

  • and (max-width:480px;) : 전체 크기가 480px 이하에서는 모두 적용된다는 의미
    ** 조건문이 2개 이상인 경우는 and () and () 이런식으로

  • { font-size:12px; } : 위의 조건에서는 모두 폰트사이즈가 바뀐다.

< sass, scss, css >

  • sass (Syntactically Awesome Style Sheet)
  • scss 는 sass의 모든 기능을 지원하고 css 구문과 호환되도록 하는 css의 상위집합.
    sass와의 간단한 차이는 {}, ; 의 유무차이
profile
It’s now or never

0개의 댓글