W3.CSS การตอบสนองในตัว
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 Responsive Classes
ระบบกริดของ W3.CSS นั้นตอบสนอง และคอลัมน์จะจัดเรียงใหม่โดยอัตโนมัติตามขนาดหน้าจอ:
| ระดับ | คำอธิบาย |
|---|---|
| w3-half | ตรงบริเวณ 1/2 ของหน้าต่าง (บนหน้าจอขนาดกลางและขนาดใหญ่) |
| w3-สาม | ใช้พื้นที่ 1/3 ของหน้าต่าง (บนหน้าจอขนาดกลางและขนาดใหญ่) |
| w3-twothid | ใช้พื้นที่ 2/3 ของหน้าต่าง (บนหน้าจอขนาดกลางและขนาดใหญ่) |
| w3-ไตรมาส | ตรงบริเวณ 1/4 ของหน้าต่าง (บนหน้าจอขนาดกลางและขนาดใหญ่) |
| w3-สามในสี่ | ตรงบริเวณ 3/4 ของหน้าต่าง (บนหน้าจอขนาดกลางและขนาดใหญ่) |
| w3-พักผ่อน | ตรงบริเวณส่วนที่เหลือของความกว้างคอลัมน์ |
| w3-col | กำหนดหนึ่งคอลัมน์ในตารางตอบสนอง 12 คอลัมน์ |
| w3-mobile | เพิ่มการตอบสนองเพื่อมือถือเป็นอันดับแรกไปยังเซลล์ (คอลัมน์) แสดงองค์ประกอบเป็นองค์ประกอบบล็อกบนอุปกรณ์มือถือ |
คลาสที่ตอบสนองด้านบนต้องอยู่ใน คลาส w3-row (หรือคลาสw3-row-padding ) เพื่อให้ตอบสนองได้อย่างเต็มที่
| ระดับ | คำอธิบาย |
|---|---|
| w3-แถว | คอนเทนเนอร์สำหรับคลาสที่ตอบสนอง ไม่มีการเติม |
| w3-row-padding | คอนเทนเนอร์สำหรับคลาสที่ตอบสนอง โดยมีช่องว่างภายใน 8px ด้านซ้ายและขวา |
| w3-เนื้อหา | คอนเทนเนอร์สำหรับเนื้อหาที่มีขนาดคงที่ |
| w3-ซ่อนขนาดเล็ก | ซ่อนเนื้อหาบนหน้าจอขนาดเล็ก (น้อยกว่า 601px) |
| w3-ซ่อน-กลาง | ซ่อนเนื้อหาบนหน้าจอขนาดกลาง |
| w3-ซ่อนขนาดใหญ่ | ซ่อนเนื้อหาบนหน้าจอขนาดใหญ่ (ใหญ่กว่า 992px) |
| l1 - l12 | ขนาดที่ตอบสนองต่อหน้าจอขนาดใหญ่ |
| m1 - m12 | ขนาดตอบสนองสำหรับหน้าจอขนาดกลาง |
| s1 - s12 | ขนาดที่ตอบสนองต่อหน้าจอขนาดเล็ก |
คลาส w3 ครึ่ง
ความกว้างของ คลาส w3-halfคือ 1/2 ขององค์ประกอบหลัก (style="width:50%")
บนหน้าจอที่มีขนาดเล็กกว่า 601 พิกเซล จะปรับขนาดเป็น 100%
w3-half
w3-half
ตัวอย่าง
<div class="w3-row">
<div class="w3-half w3-container w3-green">
<h2>w3-half</h2>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
</div>
</div>
ชั้น w3-สาม
ความกว้างของ คลาส w3-thirdคือ 1/3 ขององค์ประกอบหลัก (style="width:33.33%")
บนหน้าจอที่มีขนาดเล็กกว่า 601 พิกเซล จะปรับขนาดเป็น 100%
w3-สาม
w3-สาม
w3-สาม
ตัวอย่าง
<div class="w3-row">
<div class="w3-third w3-container w3-green">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
</div>
คลาส w3-twothird
ความกว้างของ คลาส w3-twothirdคือ 2/3 ขององค์ประกอบหลัก (style="width:66.66%")
บนหน้าจอที่มีขนาดเล็กกว่า 601 พิกเซล จะปรับขนาดเป็น 100%
w3-twothid
w3-สาม
ตัวอย่าง
<div class="w3-row">
<div class="w3-green w3-container
w3-twothird">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>
คลาส w3-ควอเตอร์
ความกว้างของ คลาส w3- Quarterคือ 1/4 ขององค์ประกอบหลัก (style="width:25%")
บนหน้าจอที่มีขนาดเล็กกว่า 601 พิกเซล จะปรับขนาดเป็น 100%
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>
ชั้น w3-สามในสี่
ความกว้างของ คลาส w3-threeในสี่คือ 3/4 ขององค์ประกอบหลัก (style="width:75%")
บนหน้าจอที่มีขนาดเล็กกว่า 601 พิกเซล จะปรับขนาดเป็น 100%
w3-สามในสี่
w3-ไตรมาส
ตัวอย่าง
<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-half
w3-ไตรมาส
w3-ไตรมาส
w3-ไตรมาส
w3-half
w3-half
w3-ไตรมาส
w3-ไตรมาส
แถวที่ซ้อนกัน
ตัวอย่าง: w3-half ภายใน w3-half
<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>
คอลัมน์ที่ใช้ Rest
คลาสw3-colกำหนดหนึ่งคอลัมน์ในตารางตอบสนอง 12 คอลัมน์
คลาสw3-restจะใช้ความกว้างที่เหลือ:
ฉัน 150px
ฉันคือส่วนที่เหลือ
ตัวอย่าง
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>I
am 150px</p></div>
<div class="w3-rest
w3-green"><p>I am the rest</p></div>
</div>
คอลัมน์ที่ใช้เปอร์เซ็นต์
คุณยังสามารถใช้คุณสมบัติความกว้าง CSS เพื่อตั้งค่าความกว้างเป็นเปอร์เซ็นต์:
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>
คลาสเนื้อหา w3
คลาสw3-contentกำหนดคอนเทนเนอร์สำหรับเนื้อหาที่มีขนาดคงที่ ใช้คุณสมบัติ CSS max-width เพื่อแทนที่ความกว้างเริ่มต้น (980px)
ตัวอย่าง
<body class="w3-content" style="max-width:500px">
page content...
</body>
w3-row กับ w3-row-padding
คลาสw3-rowกำหนดคอนเทนเนอร์ที่ไม่มีช่องว่างภายใน ในขณะที่ คลาส w3-row-paddingจะเพิ่มช่องว่างภายใน 8px ด้านซ้ายและขวาให้กับแต่ละคอลัมน์:
w3-แถว:
w3-สาม
w3-สาม
w3-สาม
w3-row-padding:
w3-สาม
w3-สาม
w3-สาม
w3-แถว:
w3-row-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_snowtops.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_snowtops.jpg"></div>
</div>
ยืดเบาะแถว
คลาสw3-stretchลบระยะขอบด้านขวาและด้านซ้ายออกจากองค์ประกอบ คลาสนี้มักใช้เพื่อยืดแถวบุนวม:
ตัวอย่างที่มี w3-stretch:
ตัวอย่างที่ไม่มี w3-stretch:
ตัวอย่าง
<div class="w3-row-padding w3-section w3-stretch">
<div
class="w3-col s4">
<img src="img_nature_wide.jpg">
</div>
<div class="w3-col s4">
<img src="img_snow_wide.jpg">
</div>
<div class="w3-col s4">
<img
src="img_mountains_wide.jpg">
</div>
</div>
แสดงตอบสนอง / ซ่อน
The w3-hide-small, w3-hide-medium, and w3-hide-large classes hide elements on specific screen sizes.
Note: Resize the browser window to understand how it works:
Example
<div class="w3-container w3-hide-small w3-red">
<p>w3-hide-small will
be hidden on small screens (phones)</p>
</div>
<div
class="w3-container w3-hide-medium w3-green">
<p>w3-hide-medium will
be hidden on medium screens (tablets)</p>
</div>
<div
class="w3-container w3-hide-large w3-blue">
<p>w3-hide-large will be
hidden on large screens (laptops/desktop)</p>
</div>
The w3-mobile Class
The w3-mobile class adds mobile-first responsiveness to any element.
It adds display:block and width:100% to an element on screens that are less than 600px wide.
Example
<a class="w3-button w3-mobile" href="#">Link</a>
Screen Resolutions
The built-in responsiveness of W3.CSS uses the DP size of a screen.
W3.CSS will treat an iPhone 6 with a resolution of 750 x 1334 pixels as a small screen of 375 x 667 pixels DP.
Small screens are less than 601 pixels DP, medium screens are less than 993 pixels DP.
Below is a list of typical device resolutions and reported DP sizes:
Iphone 4
Resolution
640 x 960
DP
320 x 480
Iphone 5
Resolution
640 x 1136
DP
320 x 528
Iphone 6
Resolution
750 x 1334
DP
375 x 667
Iphone 6s
Resolution
1080 x 1920
DP
414 x 736
Galaxy S6
Resolution
1440 x 2560
DP
360 x 640
Note 4
Resolution
1440 x 2560
DP
400 x 853
Nexus 6
Resolution
1440 x 2560
DP
411 x 731
iPad Mini
Resolution
768 x 1024
DP
768 x 1024
iPad
Resolution
1536 x 2048
DP
768 x 1024
Typical Laptop
Resolution
1366 x 768
DP
1366 x 768
Typical Desktop
Resolution
1920 x 1080
DP
1920 x 1080
12 Column Responsive Fluid Grid
W3.CSS also supports an advanced 12 column responsive fluid grid.
Resize the page to see the effect!
This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.
This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.
You will learn a lot more about the fluid grid in a later chapter.