• March 3, 2023

    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 …



เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!






เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories