ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

 

        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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
พอจะมีวิธีทำ dropdown จังหวัดแบบไม่ต้องดึงจากฐานข้อมูล
โดย eange08 จ 18 ม.ค. 2021 10:12 pm บอร์ด Programming - PHP
2
9
จ 18 ม.ค. 2021 11:07 pm โดย mindphp
สอบถามเกี่ยวกับ api ของกรมอุตุนิยม
โดย eange08 จ 18 ม.ค. 2021 10:10 pm บอร์ด Programming - PHP
2
8
จ 18 ม.ค. 2021 11:04 pm โดย mindphp
เอาโฟล์เดอร์ออกยังไงครับ
โดย chakirin.bfds จ 18 ม.ค. 2021 3:26 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
20
จ 18 ม.ค. 2021 3:45 pm โดย chakirin.bfds
5 เหตุผลที่ควรจ้างบริษัทรับทำ SEO สำหรับธุรกิจของคุณ !
โดย totheworld จ 18 ม.ค. 2021 2:34 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
จ 18 ม.ค. 2021 2:34 pm โดย totheworld
ทางฝุ่น ขรุขระ ลุยไหนลุยกันกับ ยางรถยนต์ 4x4 คุณภาพสูงที่ออกแบบมาให้ถูกใจสายลุย
โดย unyana จ 18 ม.ค. 2021 11:38 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
6
จ 18 ม.ค. 2021 11:38 am โดย unyana
สอบถามคำสั่งดึง IPV6
โดย eange08 จ 18 ม.ค. 2021 11:09 am บอร์ด Programming - PHP
1
21
จ 18 ม.ค. 2021 1:37 pm โดย mindphp
G - สรุปปัญหาการใช้งาน php odbc และ sql server บน ubuntu
โดย tsukasaz ส 21 ก.พ. 2015 2:52 pm บอร์ด Programming - PHP
1
5
อ 22 ก.พ. 2015 2:09 am โดย mindphp
สอบถามคำศัพท์เทคนิค Droplet คืออะไร
โดย Kannaphat ศ 15 ม.ค. 2021 6:16 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
27
อ 17 ม.ค. 2021 4:51 pm โดย mindphp