[Web] Basic of Media query

□ Media Query

The technique used to create a responsive web. You can specify the size of the component in accordance with the size of the browser.

□ Example

[CSS]
@media (min-width: 768px) {
  .search {
    width: 500px;
  }
}
▷ If your browser sizes larger than 768px, Set the width to 500px for class = "search".

@media (max-width: 560px) {
  .search {
    width: 100%;
  }
}
▷ If your browser sizes smaller than 560px, Set the width to browser size(100%) for class = "search".

[HTML]
<div class="search" style="background-color:gray">1234</div>
▷ You can see the div varying screen sizes

※ [CSS] .search → [HTML] class
   [CSS] #search → [HTML] id