มูลนิธิการแสดงผล CSS
ตามขนาดหน้าจอขององค์ประกอบการแสดงผล
เรียนต่อไปนี้จะขึ้นอยู่กับอุปกรณ์ (ขนาดหน้าจอ) องค์ประกอบการแสดงผล
| หมวดหมู่ | ลักษณะ |
|---|---|
| .show สำหรับขนาดเล็กเท่านั้น | แสดงเฉพาะองค์ประกอบบนอุปกรณ์ขนาดเล็ก (หน้าจอกว้างน้อยกว่า 40.0625em) |
| .show สำหรับกลางขึ้น | แสดงองค์ประกอบบนกลางและสูงกว่าอุปกรณ์ (หน้าจอกว้างมากกว่า 40.0625em) |
| .show สำหรับกลางเท่านั้น | แสดงเฉพาะในองค์ประกอบอุปกรณ์ขนาดกลาง (กว้างของหน้าจอระหว่าง 40.0625em เพื่อ 64.0625em) |
| .show สำหรับขนาดใหญ่ขึ้น | ในอุปกรณ์ขนาดใหญ่และอื่น ๆ องค์ประกอบการแสดงผล (หน้าจอกว้างมากกว่า 64.0625em) |
| .show สำหรับขนาดใหญ่เท่านั้น | ปรากฏเฉพาะในองค์ประกอบอุปกรณ์ขนาดใหญ่ (กว้างของหน้าจอระหว่าง 64.0625em เพื่อ 90.0625em) |
| .show สำหรับ XLarge ขึ้น | แสดงองค์ประกอบบนอุปกรณ์ที่มีขนาดใหญ่และอื่น ๆ (หน้าจอกว้างมากกว่า 90.0625em) |
| .show สำหรับ XLarge เท่านั้น | แสดงเฉพาะในที่มีขนาดใหญ่และอื่น ๆ องค์ประกอบอุปกรณ์ (กว้างของหน้าจอระหว่าง 90.0625em เพื่อ 120.0625em) |
| .show สำหรับ xxlarge ขึ้น | บนอุปกรณ์ขนาดใหญ่และอื่น ๆ องค์ประกอบการแสดงผล (หน้าจอกว้างมากกว่า 120.0625em) |
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงทั้งหมดข้างต้น .show- ระดับการมองเห็น
<p class="show-for-small-only">你在小型设备上。</p> <p class="show-for-medium-up">你在中型、大型、更大型、超大型的设备上。</p> <p class="show-for-medium-only">你在中型设备上。</p> <p class="show-for-large-up">你在大型、更大型、超大型的设备上</p> <p class="show-for-large-only">你在大型设备上。</p> <p class="show-for-xlarge-up">你在更大型、超大型的设备上。</p> <p class="show-for-xlarge-only">你在更大型设备上。</p> <p class="show-for-xxlarge-up">你在超大型设备上。</p>
ตามขนาดหน้าจอองค์ประกอบที่ซ่อนอยู่
เรียนต่อไปนี้จะขึ้นอยู่กับอุปกรณ์ (ขนาดหน้าจอ) เพื่อซ่อนองค์ประกอบ
| หมวดหมู่ | ลักษณะ |
|---|---|
| .hide สำหรับขนาดเล็กเท่านั้น | เท่านั้นซ่อนองค์ประกอบบนอุปกรณ์ขนาดเล็ก (หน้าจอกว้างน้อยกว่า 40.0625em) |
| .hide สำหรับกลางขึ้น | ซ่อนองค์ประกอบในระดับปานกลางและสูงกว่าอุปกรณ์ (หน้าจอกว้างมากกว่า 40.0625em) |
| .hide สำหรับกลางเท่านั้น | ซ่อนองค์ประกอบเฉพาะบนอุปกรณ์ระดับกลาง (กว้างของหน้าจอระหว่าง 40.0625em เพื่อ 64.0625em) |
| .hide สำหรับขนาดใหญ่ขึ้น | ซ่อนองค์ประกอบในอุปกรณ์ขนาดใหญ่และอื่น ๆ (หน้าจอกว้างมากกว่า 64.0625em) |
| .hide สำหรับขนาดใหญ่เท่านั้น | ซ่อนเพียงองค์ประกอบบนอุปกรณ์ขนาดใหญ่ (กว้างของหน้าจอระหว่าง 90.0625em เพื่อ 64.0625em) |
| .hide สำหรับ XLarge ขึ้น | อุปกรณ์ที่มีขนาดใหญ่และอื่น ๆ องค์ประกอบที่ซ่อนอยู่ (หน้าจอกว้างมากกว่า 90.0625em) |
| .hide สำหรับ XLarge เท่านั้น | เท่านั้น (90.0625em กว้างของหน้าจอระหว่าง 120.0625em) ซ่อนองค์ประกอบบนอุปกรณ์ที่มีขนาดใหญ่และอื่น ๆ |
| .hide สำหรับ xxlarge ขึ้น | องค์ประกอบที่ซ่อนอยู่ในอุปกรณ์ที่มีขนาดใหญ่และอื่น ๆ (หน้าจอกว้างมากกว่า 120.0625em) |
<p class="hide-for-small-only">你不在小型设备上。</p> <p class="hide-for-medium-up">你不在中型、大型、更大型、超大型的设备上。</p> <p class="hide-for-medium-only">你不在中型设备上。</p> <p class="hide-for-large-up">你不在大型、更大型、超大型的设备上。</p> <p class="hide-for-large-only">你不在大型设备上。</p> <p class="hide-for-xlarge-up">你不在更大型、超大型的设备上。</p> <p class="hide-for-xlarge-only">你不在更大型设备上。</p> <p class="hide-for-xxlarge-up">你不在超大型设备上。</p>
องค์ประกอบการแสดงผลตามทิศทางหน้าจอ
เรียนต่อไปนี้จะขึ้นอยู่กับอุปกรณ์ (ขนาดหน้าจอ) เพื่อซ่อนองค์ประกอบ
เราสามารถกำหนดองค์ประกอบในทิศทางที่แตกต่างไม่ว่าจะแสดงหรือซ่อน แล็ปท็อปและอุปกรณ์ตั้งโต๊ะอื่น ๆ ในแนวนอนโดยทั่วไป แต่โทรศัพท์มือถือและแท็บเล็ตสามารถเป็นแนวนอนหรือแนวตั้งเราสามารถซ่อนและแสดงองค์ประกอบตามไปยังโทรศัพท์มือถือของผู้ใช้จะได้รับเส้นทาง:
| หมวดหมู่ | ลักษณะ |
|---|---|
| .show สำหรับภูมิทัศน์ | องค์ประกอบ Display ในขวาง (ซ่อนยาว) |
| .show สำหรับภาพ | องค์ประกอบของจอแสดงผล (ที่ซ่อนอยู่ด้านข้าง) ในแนวตั้ง |
ตัวอย่างต่อไปนี้แสดงเนื้อหาของข้อความให้เป็นไปตามทิศทางของการใช้งาน:
ตัวอย่าง
<p class = "แสดงสำหรับ ภูมิทัศน์"> ข้อความจะปรากฏเฉพาะในทิศทางตามขวาง </ p>
<p class = "แสดงสำหรับ -Portrait"> ข้อความเท่านั้นในแนวตั้ง </ p>
<p class = "แสดงสำหรับ -Portrait"> ข้อความเท่านั้นในแนวตั้ง </ p>
ลอง»
อุปกรณ์แสดงผลหน้าจอสัมผัสและซ่อน
คุณสามารถตามไปไม่ว่าอุปกรณ์ที่รองรับการสัมผัสที่จะแสดงองค์ประกอบที่ซ่อนอยู่
| หมวดหมู่ | ลักษณะ |
|---|---|
| .show สำหรับสัมผัส | แสดงในการสนับสนุนอุปกรณ์หน้าจอสัมผัส (ไม่สนับสนุนบนอุปกรณ์ที่ซ่อนไว้) |
| .hide สำหรับสัมผัส | ในการสนับสนุนอุปกรณ์สัมผัสที่ซ่อนอยู่ (ไม่ปรากฏบนอุปกรณ์ที่รองรับ) |
ตัวอย่างต่อไปนี้ตามที่ว่าอุปกรณ์ที่รองรับการสัมผัสเพื่อแสดงข้อความ:
ตัวอย่าง
<p class = "แสดงสำหรับ -Touch"> โทรศัพท์ของคุณรองรับการสัมผัสหน้าจอ </ p>
<p class = "ซ่อนสำหรับ -Touch"> อุปกรณ์ของคุณไม่สนับสนุนหน้าจอสัมผัส </ p>
ลอง» <p class = "ซ่อนสำหรับ -Touch"> อุปกรณ์ของคุณไม่สนับสนุนหน้าจอสัมผัส </ p>