Media Query เป็นความสามารถหนึ่งของ CSS3ใช้ทำเว็บไซต์ Responsive โดยกำหนดขนาดหน้าจอของ Device หรือ อุปกรณ์แสดงผล ใช้คำสั่ง Media Query โดยจะเขียนคำสั่ง CSS ปกติ และเขียนคำสั่งลงไปในเงื่อนไข หลักการของคำสั่งตัวนี้ คือ เอาหน้าจอของอุปกรณ์มากำหนด

 

รูปแบบคำสั่ง

 

@media screen and (max-width: xxxpx) and (min-width: xxxpx) {
    .clss css{
       คำสั่ง
    }
}

 

อธิบาย

 

     max-width: xxxpx คือ  เมื่อความกว้างมากกว่า xxxpx

     min-width: xxxpx คือ เมื่อความกว้างน้อยกว่า xxxpx

 

ตัวอย่างโค้ด

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 1000px) and (min-width: 500px) {
    div.example {
        font-size: 50px;
        padding: 50px;
        border: 8px solid black;
        background: red;
    }
}
</style>
</head>
<body>

<div class="example">Example</div>


</body>
</html>

 

ผลลัพธ์

 

     ผลลัพธ์ความกว้างที่อยู่นอกเงือนไข

ผลลัพธ์ความกว้างที่อยู่นอกเงือนไข
ผลลัพธ์ความกว้างที่อยู่นอกเงือนไข

 

     ผลลัพธ์ที่อยู่ในเงือนไขมากกว่า 100

ผลลัพธ์ที่อยู่ในเงือนไข
ผลลัพธ์ที่อยู่ในเงือนไขมากกว่า 100

 

     ผลลัพธ์ที่อยู่ในเงือนไขน้อยกว่า 500

ผลลัพธ์ที่อยู่ในเงือนไขน้อยกว่า 500
ผลลัพธ์ที่อยู่ในเงือนไขน้อยกว่า 500

 

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML css CodeIgniter Framework

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
SQL JOIN: การรวมข้อมูลจากหลายตารางในฐานข้อมูล
โดย witsarutt000 พฤ 14 มี.ค. 2024 4:07 pm บอร์ด SQL Knowledge
1
289
พฤ 14 มี.ค. 2024 5:44 pm โดย Sirayu View Topic SQL JOIN: การรวมข้อมูลจากหลายตารางในฐานข้อมูล
PHP การเปลี่ยนแปลงที่สร้างปรากฏการณ์ในโลกของเว็บ
โดย witsarutt000 พฤ 14 มี.ค. 2024 11:17 am บอร์ด PHP Knowledge
0
180
พฤ 14 มี.ค. 2024 11:17 am โดย witsarutt000 View Topic PHP การเปลี่ยนแปลงที่สร้างปรากฏการณ์ในโลกของเว็บ
ปัญหา Harddisk ขึ้น 100% เวลาเซฟไฟล์ หรือภาพ จะค้่างที่หน้าแท๊บ Expolorer
โดย Thanavat_n พ 13 มี.ค. 2024 11:02 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
5
416
พ 13 มี.ค. 2024 1:34 pm โดย Thanavat_n View Topic ปัญหา Harddisk ขึ้น 100% เวลาเซฟไฟล์ หรือภาพ จะค้่างที่หน้าแท๊บ Expolorer
ตู้รองเท้า ไอเท็มวิเศษช่วยจัดระเบียบคอลเลกชันรองเท้าคู่โปรด
โดย @Foretoday อ 12 มี.ค. 2024 1:46 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
226
อ 12 มี.ค. 2024 1:46 pm โดย @Foretoday View Topic ตู้รองเท้า ไอเท็มวิเศษช่วยจัดระเบียบคอลเลกชันรองเท้าคู่โปรด
แนะนำสถานที่น่าเที่ยวในจังหวัดชุมพรพร้อมวิธีการเดินทาง
โดย witsarutt000 จ 11 มี.ค. 2024 6:14 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
177
จ 11 มี.ค. 2024 6:14 pm โดย witsarutt000 View Topic แนะนำสถานที่น่าเที่ยวในจังหวัดชุมพรพร้อมวิธีการเดินทาง
ย้าย VM ข้าม Host ด้วย scp กรณีศึกษา Vmware ESXI
โดย mindphp อ 10 มี.ค. 2024 4:36 am บอร์ด Linux - Web Server
0
272
อ 10 มี.ค. 2024 4:36 am โดย mindphp View Topic ย้าย VM ข้าม Host ด้วย scp กรณีศึกษา Vmware ESXI
IP และ vpn (VMware)
โดย ballmykids อ 10 มี.ค. 2024 2:35 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
230
จ 11 มี.ค. 2024 3:19 pm โดย ballmykids View Topic IP และ vpn (VMware)
แบบนี้ต้องทำยังไง ในกรณีที่ Server เดิมเราได้ทำการ Raid 1 กับ HDD 2 ลูกแรกแล้ว
โดย Anonymous ศ 08 มี.ค. 2024 7:02 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
190
ศ 08 มี.ค. 2024 8:12 pm โดย mindphp View Topic แบบนี้ต้องทำยังไง ในกรณีที่ Server เดิมเราได้ทำการ Raid 1 กับ HDD 2 ลูกแรกแล้ว