การเรียนการสอนที่ตอบสนองต่อ
W3.CSS รวมถึงการตอบสนองระบบกริดมือถือครั้งแรกในการจัดการรูปแบบของคุณ:
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
50px
ส่วนที่เหลือ
1/4
ส่วนที่เหลือ
100px
45px
ส่วนที่เหลือ
ระบบกริด W3.CSS คือตอบสนองและคอลัมน์ที่จะจัดอีกครั้งโดยอัตโนมัติขึ้นอยู่กับขนาดหน้าจอ:
| ชั้น | ลักษณะ |
|---|---|
| W3 ครึ่ง | ตรงบริเวณ 1/2 ของหน้าต่าง (บนหน้าจอขนาดกลางและขนาดใหญ่) |
| W3 สาม | ตรงบริเวณ 1/3 ของหน้าต่าง (บนหน้าจอขนาดกลางและขนาดใหญ่) |
| W3-twothird | ตรงบริเวณ 2/3 ของหน้าต่าง (บนหน้าจอขนาดกลางและขนาดใหญ่) |
| W3 ไตรมาส | ตรงบริเวณ 1/4 ของหน้าต่าง (บนหน้าจอขนาดกลางและขนาดใหญ่) |
| W3-threequarter | ตรงบริเวณ 3/4 ของหน้าต่าง (บนหน้าจอขนาดกลางและขนาดใหญ่) |
| W3 ส่วนที่เหลือ | กำหนดส่วนที่เหลือของแถว |
| W3-Col | กำหนดคอลัมน์ใน 12 คอลัมน์ตารางของเหลวตอบสนอง (เพิ่มเติมในบทต่อไป) |
แถวที่ตอบสนองต่อ
การเรียนการตอบสนองจะต้องอยู่ภายใน W3 แถวที่จะตอบสนองได้อย่างเต็มที่
| ชั้น | ลักษณะ |
|---|---|
| W3 แถว | กำหนดภาชนะ padding น้อยสำหรับการเรียนการตอบสนอง |
| W3 แถว-padding | กำหนดภาชนะเบาะสำหรับการเรียนการตอบสนอง |
W3 ครึ่งชั้น
ความกว้างของ W3 ครึ่งชั้นเรียนเป็น 1/2 ขององค์ประกอบหลัก (style = "width: 50%")
บนหน้าจอ * ขนาดเล็กก็ปรับขนาดถึง 100%
W3 ครึ่ง
W3 ครึ่ง
ตัวอย่าง
<div class="w3-row">
<div class="w3-green w3-container w3-half">
<h2>w3-half</h2>
</div>
<div class="w3-container w3-half">
<h2>w3-half</h2>
</div>
</div> ลองตัวเอง» W3 สามชั้น
ความกว้างของชั้น W3-ที่สามคือ 1/3 ขององค์ประกอบหลัก (style = "width: 33.33%")
บนหน้าจอ * ขนาดเล็กก็ปรับขนาดถึง 100%
W3 สาม
W3 สาม
W3 สาม
ตัวอย่างการใช้ W3 สาม
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> ลองตัวเอง» The Class-W3 twothird
ความกว้างของชั้น W3-twothird เป็น 2/3 ขององค์ประกอบหลัก (style = "width: 66.66%")
บนหน้าจอ * ขนาดเล็กก็ปรับขนาดถึง 100%
W3-twothird
W3 สาม
ตัวอย่างการใช้ W3 สาม
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> ลองตัวเอง» The Class W3 ไตรมาส
ความกว้างของชั้น W3 ไตรมาสเป็น 1/4 ขององค์ประกอบหลัก (style = "width: 25%")
บนหน้าจอ * ขนาดเล็กก็ปรับขนาดถึง 100%
W3 ไตรมาส
W3 ไตรมาส
W3 ไตรมาส
W3 ไตรมาส
ตัวอย่างการใช้ W3 ไตรมาส
<div class="w3-row">
<div class="w3-green w3-container
w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> ลองตัวเอง» The Class-W3 threequarter
ความกว้างของชั้น W3-threequarter เป็น 3/4 ขององค์ประกอบหลัก (style = "width: 75%")
บนหน้าจอ * ขนาดเล็กก็ปรับขนาดถึง 100%
W3 ไตรมาส
W3 ไตรมาส
ตัวอย่างการใช้ W3-threequarter
<div class="w3-row">
<div class="w3-green w3-container
w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> ลองตัวเอง» อยู่รวมกัน
W3 ไตรมาส
W3 ครึ่ง
W3 ไตรมาส
W3 ไตรมาส
W3 ไตรมาส
W3 ครึ่ง
W3 ครึ่ง
W3 ไตรมาส
W3 ไตรมาส
แถวซ้อนกัน
ตัวอย่าง: W3 ครึ่งภายใน W3 ครึ่ง
<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
</div> ลองตัวเอง» คอลัมน์การใช้ส่วนที่เหลือ
ผม 150px
ผมส่วนที่เหลือ
ตัวอย่างการใช้ W3 ส่วนที่เหลือ
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest
w3-green"><p>rest</p></div>
</div> ลองตัวเอง» คอลัมน์การใช้ร้อยละ
20%
60%
20%
ตัวอย่างการใช้ร้อยละ
<div class="w3-row">
<div class="w3-col"
style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div
class="w3-col" style="width:20%"><p>20%</p></div>
</div> ลองตัวเอง» The Class W3 เนื้อหา
ชั้น W3 เนื้อหากำหนดภาชนะสำหรับเนื้อหาขนาดศูนย์กลางคงที่:
ความแตกต่างระหว่าง W3-W3 แถวและแถว-padding
ชั้น W3 แถวกำหนดภาชนะเบาะน้อยในขณะที่ระดับ W3 แถว-padding เพิ่มช่องว่างด้านซ้ายและขวาเพื่อ 8px แต่ละคอลัมน์:
W3 แถว:
W3 แถว-padding:
ตัวอย่าง
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div> ลองตัวเอง» 12 คอลัมน์ตารางของเหลวตอบสนอง
W3.CSS ยังสนับสนุนขั้นสูง 12 คอลัมน์ของเหลวที่ตอบสนองต่อตาราง
ปรับขนาดหน้าเพื่อเห็นผล!
ส่วนนี้จะครอบครอง 12 คอลัมน์บนหน้าจอขนาดเล็ก 4 บนหน้าจอขนาดกลางและ 3 บนจอขนาดใหญ่
ส่วนนี้จะครอบครอง 12 คอลัมน์บนหน้าจอขนาดเล็ก 8 บนหน้าจอขนาดกลางและ 9 บนจอขนาดใหญ่
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับตารางของเหลวในบทต่อมา
* ความละเอียดหน้าจอ
ในตัวการตอบสนองของ W3.CSS ใช้ขนาด DP ของหน้าจอ
W3.CSS จะรักษา iPhone 6 ที่มีความละเอียด 750 x 1334 พิกเซลหน้าจอขนาดเล็ก 375 x 667 พิกเซล
หน้าจอขนาดเล็กที่มีน้อยกว่า 601 พิกเซล DP, หน้าจอขนาดกลางน้อยกว่า 993 พิกเซล DP
ด้านล่างเป็นรายการมติอุปกรณ์ทั่วไปและรายงานขนาด DP:
iPhone 4
มติ
640 x 960
DP
320 x 480
iPhone 5
มติ
640 x 1136
DP
320 x 528
ไอโฟน 6
มติ
750 x 1334
DP
375 x 667
iPhone 6S
มติ
1080 x 1920
DP
414 x 736
Galaxy S6
มติ
1440 x 2560
DP
360 x 640
หมายเหตุ 4
มติ
1440 x 2560
DP
400 x 853
Nexus 6
มติ
1440 x 2560
DP
411 x 731
ไอแพดมินิ
มติ
768 x 1024
DP
768 x 1024
iPad
มติ
1536 x 2048
DP
728 x 1024
แล็ปท็อปทั่วไป
มติ
1366 x 768
DP
1366 x 768
สก์ท็อปทั่วไป
มติ
1920 x 1080
DP
1920 x 1080