Orientation: Portrait / Landscape

Media queries can also be used to change layout of a page depending on the orientation of the browser.

You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called “Landscape” orientation:

Use a lightblue background color if the orientation is in landscape mode:

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

Min Width to Max Width

when the browser’s width is between 600 and 900px, change the appearance of a <div> element:

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Using an additional value: In the example below, we add an additional media query to our already existing one using a comma (this will behave like an OR operator):

Example

/* When the width is between 600px and 900px OR above 1100px – change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

เราใช้ คำสั่งนี้ ในไฟล์ .css เพื่อกำหนดการแสดงผลเมื่อขนาดของหน้าจอเปลี่ยนไป เพื่อให้ได้การแสดงผลที่อ่านง่ายที่สุด ดังนั้น หากเราต้องการให้รองรับ จอแสดงผล ทุกขนาด pixel ต้องทำหลายครั้ง เช่น ขนาด 640 , 768 1024 …