Media Query

🎅 Media Queryとは?

🎅 構文

@media <media type> and (media feature) { /*...*/ }

🎅 media feature

@media screen and (max-width: 1023px) { 
              			... 
              }

🎅 Logic条件

@media screen and (min-width: 400px) or (max-width: 800px) { ... }

@media not print and (min-width: 100px) { ... }

🎅 nesting

@media (min-width: 400px) and (max-width: 800px) { /*...*/ } @media (min-width: 400px) { @media (max-width: 800px) { /*...*/ } }

🎅 media query in Html

<link href="style.css" rel="stylesheet" media="screen and (min-width: 400px)"/> <style media="screen and (min-width: 400px)"> ... </style>

🎅 アプリケーションメディアQuery

main {
  display: flex;
  flex-direction: column;
}

@media (min-width: 40rem) {
  main {
    flex-direction: row;
  }
}

🎅 dimensions

🎅 aspect ratio

@media (aspect-ratio: 16/9) { 
		/* 화면비가 16:9인 경우*/ 
} 
@media (min-aspect-ratio: 1/1) { 
	 /* 최소 화면 비가 1:1 이상인 경우.
		즉, 화면의 높이에 비해 너비가 더 넓은 경우 */ 
	 /* (orientation: landscape) 와 동일 */ 
} 
@media (max-aspect-ratio: 1/1) { 
    /* 최대 화면 비가 1:1 미만인 경우. 즉, 화면의 너비에
        비해 높이가 더 높은 경우 */ 
    /* (orientation: portrait) 와 동일 */ 
}

🎅 実際のコード使用練習

.address {
    position: absolute;
    display:flex;
    justify-content: center;
    bottom: 5%;
    left: 100px;
    width: 500px;
    height:700px;
    animation: slide_left 1.2s ease-out;    
    padding: 20px 15px;
    flex-wrap: wrap;
    background-color: white;    
}
@media (max-width: 1720px) { 
   .address {
        position: absolute;
        display:flex;
        justify-content: center;
        bottom:5%;
        left:2%;
        width:500px;
        height:700px;
        animation: slide_left_2 1.2s ease-out;
        background-color: #fefefe;
        padding: 20px 15px;
        flex-wrap: wrap;
    }
}

🎅 の最後の部分