โพสต์นี้จะกล่าวถึงแนวทางที่จำเป็นในการใช้คำสั่งสื่อ
จะใช้ Media Queries สำหรับอุปกรณ์มือถือได้อย่างไร
ข้อความค้นหาสื่อสามารถนำไปใช้กับอุปกรณ์มือถือได้โดยเพียงแค่พูดว่า “ @สื่อ ” และระบุขนาดหน้าจอในวงเล็บปีกกาขนาดเล็ก จากนั้นคุณสามารถเพิ่ม CSS สำหรับการสืบค้นสื่อนั้นลงในเครื่องหมายปีกกาได้ เมื่อใดก็ตามที่ขนาดหน้าจอตรงกับขนาดที่ผู้ใช้ระบุ ระบบจะใช้การสืบค้นสื่อที่ระบุ
มาดูตัวอย่างเชิงปฏิบัติเพื่อเรียนรู้การใช้งานคำสั่งสื่อสำหรับอุปกรณ์มือถือกันดีกว่า
ตัวอย่าง: สร้างเค้าโครงที่เปลี่ยนจากเค้าโครงสองคอลัมน์เป็นเค้าโครงคอลัมน์เดียวโดยการใช้การสืบค้นสื่อ
ในตัวอย่างด้านล่าง เค้าโครงของเว็บเพจจะเปลี่ยนจากเค้าโครงคอลัมน์เป็นเค้าโครงคอลัมน์เดียว:
ขั้นตอนที่ 1: สร้างโครงสร้าง HTML
- ขั้นแรก สร้างไฟล์ HTML และเชื่อมโยงไฟล์สไตล์ชีต CSS ภายนอกในไฟล์นั้น <หัว> ส่วน.
- จากนั้นให้สร้าง <ส่วนหัว> และเพิ่มส่วนหัวของเว็บไซต์โดยใช้ แท็ก
- สร้างก โดยชื่อคลาสของ “container-class” และอีกสองข้างในนั้นมีชื่อคลาสเป็น “ คอลัมน์ '. < ร่างกาย >
<ส่วนหัว>
< h1 > คำแนะนำลินุกซ์ < / h1 >
< / ส่วนหัว>
< กอง ระดับ = 'คอนเทนเนอร์คลาส' >
< กอง ระดับ = 'คอลัมน์' >
< h2 > ส่วนที่หนึ่ง < / h2 >
< พี > Linux Hint เป็นหนึ่งในแพลตฟอร์มอีเลิร์นนิงที่ดีที่สุด < / พี >
< / กอง >
< กอง ระดับ = 'คอลัมน์' >
< h2 > ส่วนที่ 2 < / h2 >
< พี > Linux Hint เป็นหนึ่งในแพลตฟอร์มอีเลิร์นนิงที่ดีที่สุด < / พี >
< / กอง >
< / กอง >
< / ร่างกาย >ขั้นตอนที่ 2: ใช้ CSS
ในส่วนของร่างกาย:- ขั้นแรก ให้ระบุส่วนของเนื้อหาโดยเขียนว่า “ ร่างกาย ” แท็กและกล่าวถึงวงเล็บปีกกา
- ภายในวงเล็บปีกกา ให้ระบุตระกูลแบบอักษร สีพื้นหลัง ระยะขอบ และช่องว่างภายใน
บน <ส่วนหัว> ส่วน:
- ระบุสีข้อความ การจัดแนวข้อความ สีพื้นหลัง และช่องว่างภายใน
บน “คลาสคอนเทนเนอร์” div:
- ตั้ง ' แสดง ” มูลค่าทรัพย์สินถึง “ ดิ้น ” เพื่อสร้าง Flexbox
- ใช้ ' ปรับเนื้อหา ” เพื่อเพิ่มช่องว่างระหว่างเนื้อหาและเพิ่มช่องว่างภายใน
ในคลาสคอลัมน์:
- ขั้นแรก ให้ระบุค่าที่ระบุไปที่ “ ดิ้น ” คุณสมบัติเพื่อเพิ่มช่องว่างระหว่างส่วนเค้าโครงทั้งสอง
- หลังจากนั้น ให้เพิ่มสีพื้นหลัง เส้นขอบ ระยะห่างจากขอบ และขนาดกล่อง
ขั้นตอนที่ 3: ใช้ Media Query
- หากต้องการใช้การสืบค้นสื่อสำหรับอุปกรณ์เคลื่อนที่ ขั้นแรกให้เพิ่ม ' @สื่อ แท็ก”
- จากนั้นระบุค่า “ 768px ” ซึ่งเป็นเรื่องปกติสำหรับอุปกรณ์เคลื่อนที่ไปจนถึง “ ความกว้างสูงสุด ”คุณสมบัติภายในเหล็กดัดฟันขนาดเล็ก
- หลังจากนั้นให้ระบุ “ คอลัมน์ ” คุณค่าของ “ ดิ้นทิศทาง ” ทรัพย์สินที่จะใช้บังคับกับ “ คลาสคอนเทนเนอร์” สิ่งนี้จะเปลี่ยนทั้งสองคอลัมน์เป็นคอลัมน์เดียวทุกครั้งที่ตรวจพบขนาดหน้าจอที่ระบุ
- สุดท้าย ใช้ CSS บน “ คอลัมน์ ” ชั้นและระบุ “ ระยะขอบ ' และ ' ดิ้น ” ค่า:
ตระกูลฟอนต์: sans-serif;
พื้นหลัง- สี : เงิน;
ระยะขอบ: 0 ;
การขยายความ: 0 ;
}
หัวข้อ {
พื้นหลัง- สี : #2f4f4f;
ช่องว่างภายใน: 20px;
ข้อความ- จัดตำแหน่ง : ศูนย์;
สี : สีขาว;
}
.คอนเทนเนอร์- ระดับ {
จอแสดงผล: ดิ้น;
ปรับให้เหมาะสม- เนื้อหา : ช่องว่างระหว่าง;
ช่องว่างภายใน: 20px;
}
.คอลัมน์ {
ดิ้น: 0 1 คำนวณ ( ห้าสิบ % - 10px ) ;
ชายแดน : 1px สีเขียวทึบ;
พื้นหลัง- สี : สีขาว;
ขนาดกล่อง: เส้นขอบกล่อง;
ช่องว่างภายใน: 20px;
}
@ สื่อ ( สูงสุด- ความกว้าง : 768px ) {
.คอนเทนเนอร์- ระดับ {
ทิศทางแบบยืดหยุ่น: คอลัมน์;
}
.คอลัมน์ {
ดิ้น: 0 1 100 %;
ขอบล่าง: 20px;
}
}เอาท์พุต
นี่คือผลลัพธ์ของหน้าเว็บหลังจากใช้การสืบค้นสื่อ ผลลัพธ์นี้เป็นเค้าโครงแบบตอบสนองสองคอลัมน์:
เมื่อใดก็ตามที่หน้าจอมีขนาดตรงตามที่กำหนดโดยใช้คิวรีสื่อสำหรับอุปกรณ์เคลื่อนที่ หน้าจอจะกลายเป็นเลย์เอาต์แบบคอลัมน์เดียว:
บทสรุป
หากต้องการใช้คำสืบค้นสื่อสำหรับอุปกรณ์เคลื่อนที่ ขั้นแรกให้รวม ' วิวพอร์ต ' ใน ' ศีรษะ ' ส่วน. จากนั้นจึงเขียน CSS เฉพาะการออกแบบสำหรับอุปกรณ์เคลื่อนที่ หลังจากนั้นให้เพิ่มคิวรีสื่อโดยใช้แท็ก “@media” และระบุขนาดหน้าจอมือถือ ตัวอย่างเช่น ระบุ 768px สำหรับแท็บเล็ต และ 480px สำหรับโทรศัพท์มือถือ บทความนี้ได้อธิบายขั้นตอนการดำเนินการคิวรีสื่อสำหรับอุปกรณ์เคลื่อนที่