Media Queries - @media

 

 

반응형웹페이지 를 만들때 사용한다. 

특정 부분에 미디어쿼리로 BreakPoints 를 설정해서 반응형 웹페이지를 만듬

width and height of the viewport - 뷰포트의 너비와 높이 width and height of the device - 기기의 너비와 높이  orientation (is the tablet/phone in landscape or portrait mode?) - 방향 resolution - 해결

 

1. 장치 (뷰포트 크기가 다른 경우)

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

 

 

2. 메뉴

float : left 를 none 값으로 바꿔 다시 세로로 볼 수 있게 함
또 width 값을 100%으로 하여 화면에 꽉 차게 하였음

 

/* The navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* On screens that are 600px wide or less, make the menu links stack 
on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

 

 

 

 

3. 열 Columns  

+ 요즘에는 flex 를 사용한다. (CSS Flexbox)

/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack
on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

 

 

width 값을 %로 조정하여 크기별로 열 모양을 바꿈

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack 
on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

 

 

 

4. 요소 숨기기

display : none 값을 이용하면 특정 크기에서 요소를 숨길 수 있다.

display: none;

 

 

5. 방향 별

orientation 값을 사용하면 방향별로 속성을 바꿀 수 있다.

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

 

 

6.최대 최소값 지정

max-width and min-width 값을 통해서 최소,최대 너비를 설정 할 수 있음
설정한 값에서만 속성이 작동함.

추가값을 사용할 시에는 OR 연산자 처럼 작동함. (둘 중 하나 참이면 참)

@media screen and (max-width: 900px) and (min-width: 600px) {
}

/* 추가 값 사용, OR 연산자 처럼 작동 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
}