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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Standards of Baccarat
โดย chanoudom ส 21 ก.ย. 2019 1:47 am บอร์ด Share Knowledge
0
6
ส 21 ก.ย. 2019 1:47 am โดย chanoudom
การบันทึกบัญชี รับเงินมัดจำในเดือนกับข้ามเดือน บันทึกยังไง แตกต่างกันมั้ยค่ะ
โดย thatsawan ศ 20 ก.ย. 2019 8:08 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
6
ศ 20 ก.ย. 2019 8:08 pm โดย thatsawan
ทำความรู้จัก Cloud
โดย aninthana ศ 20 ก.ย. 2019 8:01 pm บอร์ด Linux - Web Server
0
5
ศ 20 ก.ย. 2019 8:01 pm โดย aninthana
เปรียบเทียบ smart watch รุ่นต่างๆ จากหลายๆค่าย รุ่นไหนโดน รุ่นไหนดี มารับชมกันได้เลย
โดย chatee supasand ศ 20 ก.ย. 2019 5:41 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
12
ศ 20 ก.ย. 2019 5:41 pm โดย chatee supasand
วิธีสมัครและใช้งาน api อัตราแลกเปลี่ยนเงินตรา จาก ธนาคารแห่งประเทศไทย ด้วย php
โดย birdkritsna ศ 20 ก.ย. 2019 4:14 pm บอร์ด Programming - PHP
0
13
ศ 20 ก.ย. 2019 4:14 pm โดย birdkritsna
จะทำ path way เป็นลูกศรชีต้องทำยังไงครับ
โดย jamepiyawat ศ 20 ก.ย. 2019 3:50 pm บอร์ด HTML CSS
0
10
ศ 20 ก.ย. 2019 3:50 pm โดย jamepiyawat
อยากทราบวิธีที่จะทำให้เมือเรากดปุ่มซื้อสินค้าแล้วจะมีหน้า pop เด้งขึ้นมาครับ
โดย jamepiyawat ศ 20 ก.ย. 2019 3:30 pm บอร์ด HTML CSS
0
8
ศ 20 ก.ย. 2019 3:30 pm โดย jamepiyawat
อยากทราบวิธีทำปุ่มกดสลับค่าระหว่าง list box ครับ
โดย birdkritsna ศ 20 ก.ย. 2019 2:59 pm บอร์ด Programming - PHP
4
30
ศ 20 ก.ย. 2019 4:10 pm โดย mindphp
ระดับ User นี้มีข้อจำกัดอะไรบ้างครับ
โดย Patipat ศ 20 ก.ย. 2019 2:45 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
16
ศ 20 ก.ย. 2019 2:50 pm โดย tsukasaz
ทำไมโค้ดของผมแสดงผลชื่อจังหวัดชื่ออำเภอผิดครับ
โดย jamepiyawat ศ 20 ก.ย. 2019 2:20 pm บอร์ด JavaScript & Jquery Ajax
8
32
ศ 20 ก.ย. 2019 3:22 pm โดย jamepiyawat
งานประจำวันที่ 20 กันยายน 2562
โดย birdkritsna ศ 20 ก.ย. 2019 9:22 am บอร์ด M094 - กฤษณะ จะโรจน์รัมย์
2
12
ศ 20 ก.ย. 2019 6:32 pm โดย birdkritsna
VDO ทดลองการเข้าใช้งาน การเข้าใช้งาน ในการสร้าง เว็บไซต์ พร้อม โดเมน
โดย aninthana ศ 20 ก.ย. 2019 10:27 am บอร์ด M092 - อนินธนา บุญยัง
2
9
ศ 20 ก.ย. 2019 11:57 am โดย aninthana
VDO สอนการทำให้เว็บเข้าใช้งานด้วย https บน DA
โดย aninthana ศ 20 ก.ย. 2019 10:16 am บอร์ด M092 - อนินธนา บุญยัง
1
9
ศ 20 ก.ย. 2019 11:32 am โดย thatsawan
งานประจำวันที่ 20 กันยายน 2562
โดย chatee supasand ศ 20 ก.ย. 2019 9:53 am บอร์ด MT33 - นายชาตรี สุภาแสน
2
13
ศ 20 ก.ย. 2019 7:32 pm โดย chatee supasand
งานประจำวันที่ 20 กันยายน 2562
โดย aninthana ศ 20 ก.ย. 2019 9:45 am บอร์ด M092 - อนินธนา บุญยัง
0
4
ศ 20 ก.ย. 2019 9:45 am โดย aninthana
งานประจำวันที่ 20 กันยายน 2562
โดย aninthana ศ 20 ก.ย. 2019 9:43 am บอร์ด M092 - อนินธนา บุญยัง
5
38
ศ 20 ก.ย. 2019 6:49 pm โดย aninthana
งานประจำวันที่ 20 กันยายน 2562
โดย Patipat ศ 20 ก.ย. 2019 9:38 am บอร์ด M088 - ปฏิภัทร สารธรรม
1
4
ศ 20 ก.ย. 2019 6:49 pm โดย Patipat
งานประจำวันที่ 20 กันยายน 2562
โดย jamepiyawat ศ 20 ก.ย. 2019 9:10 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
2
9
ศ 20 ก.ย. 2019 6:57 pm โดย jamepiyawat
งานประจำวันที่ 20 กันยายน 2562
โดย jirawoot ศ 20 ก.ย. 2019 9:06 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
1
3
ศ 20 ก.ย. 2019 7:09 pm โดย jirawoot
ทำความรู้จักกับ Google Lighthouse ตรวจสอบคุณภาพเว็บไซต์
โดย birdkritsna พฤ 19 ก.ย. 2019 6:37 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
19
พฤ 19 ก.ย. 2019 6:37 pm โดย birdkritsna