สามารถเปลี่ยนคำสั่ง css ได้ด้วย @media

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
jamepiyawat
PHP VIP Members
PHP VIP Members
โพสต์: 2008
ลงทะเบียนเมื่อ: 21/05/2019 10:45 am

สามารถเปลี่ยนคำสั่ง css ได้ด้วย @media

โพสต์ที่ยังไม่ได้อ่าน โดย jamepiyawat »

สวัดดีครับสำหรับในที่ต้องพัฒนาเว็บไซต์ในตอนนี้ก็คงจะเป็นจะต้องให้เว็บไซต์ของเราสามารถรองรับกับหน้าจอโทรศัพท์ที่จะมีขนาดเล็กกว่าหน้าจอคอมพิวเตอร์ทำให้การใช้งานเว็บไซต์ผ่านมือถือจะต้องแตกต่างออกไปจากหน้าจอคอมพิวเตอร์เช่นถ้าหน้าจอคอมการอาจจะแสดงรูปได้ 3 รูปต่อ แถวแต่ว่าถ้าเป็นหน้าจอโทรศัพท์ก็จะลดให้เหลือแถวละรูปเท่านั้นเพื่อไม่ให้ผู้ใช้เลื่อนออกไปยาว ๆ เพือดูรูป แล้วเราจะกำหนด css ยังไงล่ะวันนี้เราก็มีเงื่อนไขมานำเสนอกันจะเป็นอย่างไรลองไปดูกันเลย

โดยในตัวอย่างที่จะนำเสนอนี้ก็จะเป็นการกำหนดว่าถ้าจอเล็กกว่า 600px สีพื้นหลังของ border จะเป็นสีฟ้าให้ใช้เงื่อนไข @media แบบนี้

โค้ด: เลือกทั้งหมด

@media (max-width: 600px) {
      div {
        background-color: lightblue;
          }
        }
จากโค้ดก็จะเห็นได้ว่าถ้าความกว่าของหน้าจอต่ำกว่า 600px จะให้แท็กใน div พื้นหลังจะเป็นสีฟ้า
ตัวอย่าง

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    div{
      border: 1px solid;
      height: 200px;
      text-align: center;
      background-color: green;



    }
    @media (max-width: 600px) {
      div {
        background-color: lightblue;
          }
        }

    </style>
  </head>
  <body>
    <div >
      ถ้าจอขนาด 600px ลงไปสีพื้นหลังของ border จะเป็นสีฟ้า
    </div>
  </body>
</html>
ตอนแรกเราก็จะกำหนดให้พื้นหลังเป็นสีเขียวแต่ถ้าเราลดจอมาเล็กกว่า 600px พื้นหลังก็จะกลานเป็นสีฟ้า

ผลลัพธ์ที่ได้
หน้าจอคอมพิวเตอร์
Selection_999(364).png
Selection_999(364).png (11.53 KiB) Viewed 2568 times
หน้าจอเล็กกว่า 600px
Selection_999(365).png
Selection_999(365).png (33.7 KiB) Viewed 2568 times
เป็นอย่างไรกันบ้างครับสำหรับการเปลี่ยนกำหนัดให้ใช้คำสั่ง css ต่างกันเมือมีขนาดหน้าจอที่แต่ต่างกันก็ถ้าใครที่จะใส่คำสั่งที่มันยากขึ้นอย่างถ้าจอเล็กลงให้แสดงรูปเป็นทีละรูปอะไรแบบนี้ก็ได้ก็คงจะทำให้เว็บไซต์ของเราน่าใช่ในจอโทรศัพธ์มากยิ่งขึ้นนั้นเองก็หวังว่าผู้ที่เข้ามาอ่านจะได้รับความรู้กันไปบ้างไม่มากก็น้อยนะครับ
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 64