ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Funny today ไปไหน???
โดย chatee supasand พฤ 12 ธ.ค. 2019 11:44 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
4
พฤ 12 ธ.ค. 2019 11:44 am โดย chatee supasand
VDO - แนะนำการใช้งาน Plugin Content M Change Log
โดย numtan5839 พฤ 12 ธ.ค. 2019 10:47 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
0
3
พฤ 12 ธ.ค. 2019 10:47 am โดย numtan5839
งานประจำวันที่ 12 ธันวาคม 2562
โดย numtan5839 พฤ 12 ธ.ค. 2019 10:04 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
0
4
พฤ 12 ธ.ค. 2019 10:04 am โดย numtan5839
วิธีการนำข้อมูลคำอธิบายภาพออก ในโพสต์ของ php
โดย Ittichai_chupol พ 11 ธ.ค. 2019 7:03 pm บอร์ด PHP Knowledge
1
20
พฤ 12 ธ.ค. 2019 10:59 am โดย Sirayu
โปรแกรมคำนวณเพซ
โดย prmindphp พ 11 ธ.ค. 2019 6:50 pm บอร์ด MindPHP News & Feedback
0
18
พ 11 ธ.ค. 2019 6:50 pm โดย prmindphp
ArrayList Java กับการหาค่าที่มากที่สุดแล้วลบออก
โดย Grammanano พ 11 ธ.ค. 2019 6:38 pm บอร์ด Share Knowledge
0
20
พ 11 ธ.ค. 2019 6:38 pm โดย Grammanano
การเขียน switch case ในภาษา C
โดย Grammanano พ 11 ธ.ค. 2019 5:52 pm บอร์ด Share Knowledge
0
15
พ 11 ธ.ค. 2019 5:52 pm โดย Grammanano
VDO - Introducing to Pace Calculator
โดย numtan5839 พ 11 ธ.ค. 2019 5:38 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
16
พฤ 12 ธ.ค. 2019 11:15 am โดย mindphp
การลบข้อมูลจาก ArrayList ภาษา Java
โดย Grammanano พ 11 ธ.ค. 2019 5:32 pm บอร์ด Share Knowledge
0
16
พ 11 ธ.ค. 2019 5:32 pm โดย Grammanano
วิธีแปลงไฟล์ PDF เป็นไฟล์ Word ทางเว็ปไซต์
โดย noppadonsk พ 11 ธ.ค. 2019 4:24 pm บอร์ด Share Knowledge
0
22
พ 11 ธ.ค. 2019 4:24 pm โดย noppadonsk
วิธีใช้ text shortcut ใน Google Docs สร้างคำที่พิมพ์บ่อยให้พิมพ์ได้เร็วขึ้น
โดย noppadonsk พ 11 ธ.ค. 2019 4:02 pm บอร์ด Share Knowledge
0
8
พ 11 ธ.ค. 2019 4:02 pm โดย noppadonsk
รู้รึยัง Google Search ค้นหาเนื้อหาในวีดีโอได้แล้ว
โดย noppadonsk พ 11 ธ.ค. 2019 3:47 pm บอร์ด Share Knowledge
0
12
พ 11 ธ.ค. 2019 3:47 pm โดย noppadonsk
10 อันดับรถยนต์วินเทจ ที่ใครเห็นก็ต้องมอง
โดย Meygrand พ 11 ธ.ค. 2019 3:04 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
18
พ 11 ธ.ค. 2019 3:04 pm โดย Meygrand
อยากทราบวิธีการ override ไฟล์ bookmark มาใช้งานใน Extension ของ phpbb
โดย Ittichai_chupol พ 11 ธ.ค. 2019 11:00 am บอร์ด Programming - PHP
0
12
พ 11 ธ.ค. 2019 11:00 am โดย Ittichai_chupol
งานประจำวันที่ 11 ธันวาคม 2562
โดย noppadonsk พ 11 ธ.ค. 2019 10:05 am บอร์ด MT36 - นายนพดล สุชญากูล
10
42
พ 11 ธ.ค. 2019 7:00 pm โดย noppadonsk
งานประจำวันที่ 11 ธันวาคม 2562
โดย Grammanano พ 11 ธ.ค. 2019 10:02 am บอร์ด M098 - อนงค์นาท ไฝขาว
1
8
พ 11 ธ.ค. 2019 6:59 pm โดย Grammanano
งานประจำวันที่ 11 ธันวาคม 2562
โดย numtan5839 พ 11 ธ.ค. 2019 9:52 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
16
พ 11 ธ.ค. 2019 7:23 pm โดย numtan5839
R - Rotate back up file
โดย Grammanano จ 09 ธ.ค. 2019 8:20 pm บอร์ด M098 - อนงค์นาท ไฝขาว
1
7
จ 09 ธ.ค. 2019 8:24 pm โดย mindphp
การดึงข้อมูลใน ArrayList ภาษา Java
โดย Grammanano จ 09 ธ.ค. 2019 7:42 pm บอร์ด Share Knowledge
0
17
จ 09 ธ.ค. 2019 7:42 pm โดย Grammanano
ฺB - ไม่สามารถ cancel ใบกำกับภาษีที่สร้างผ่าน withholding tax โดยตรงได้
โดย nnamfon.26 จ 09 ธ.ค. 2019 7:27 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
4
จ 09 ธ.ค. 2019 7:27 pm โดย nnamfon.26