สวัดดีครับสำหรับในที่ต้องพัฒนาเว็บไซต์ในตอนนี้ก็คงจะเป็นจะต้องให้
เว็บไซต์ของเราสามารถรองรับกับหน้าจอโทรศัพท์ที่จะมีขนาดเล็กกว่าหน้าจอคอมพิวเตอร์ทำให้การใช้งานเว็บไซต์ผ่านมือถือจะต้องแตกต่างออกไปจากหน้าจอคอมพิวเตอร์เช่นถ้าหน้าจอคอมการอาจจะแสดงรูปได้ 3 รูปต่อ แถวแต่ว่าถ้าเป็นหน้าจอโทรศัพท์ก็จะลดให้เหลือแถวละรูปเท่านั้นเพื่อไม่ให้ผู้ใช้เลื่อนออกไปยาว ๆ เพือดูรูป แล้วเราจะกำหนด
css ยังไงล่ะวันนี้เราก็มีเงื่อนไขมานำเสนอกันจะเป็นอย่างไรลองไปดูกันเลย
โดยในตัวอย่างที่จะนำเสนอนี้ก็จะเป็นการกำหนดว่าถ้าจอเล็กกว่า 600px สีพื้นหลังของ border จะเป็นสีฟ้าให้ใช้เงื่อนไข @media แบบนี้
โค้ด: เลือกทั้งหมด
@media (max-width: 600px) {
div {
background-color: lightblue;
}
}
จากโค้ดก็จะเห็นได้ว่าถ้าความกว่าของหน้าจอต่ำกว่า 600px จะให้แท็กใน div พื้นหลังจะเป็นสีฟ้า
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 1px solid;
height: 200px;
text-align: center;
background-color: green;
}
@media (max-width: 600px) {
div {
background-color: lightblue;
}
}
</style>
</head>
<body>
<div >
ถ้าจอขนาด 600px ลงไปสีพื้นหลังของ border จะเป็นสีฟ้า
</div>
</body>
</html>
ตอนแรกเราก็จะกำหนดให้พื้นหลังเป็นสีเขียวแต่ถ้าเราลดจอมาเล็กกว่า 600px พื้นหลังก็จะกลานเป็นสีฟ้า
ผลลัพธ์ที่ได้
หน้าจอคอมพิวเตอร์
- Selection_999(364).png (11.53 KiB) Viewed 2788 times
หน้าจอเล็กกว่า 600px
- Selection_999(365).png (33.7 KiB) Viewed 2788 times
เป็นอย่างไรกันบ้างครับสำหรับการเปลี่ยนกำหนัดให้ใช้คำสั่ง css ต่างกันเมือมีขนาดหน้าจอที่แต่ต่างกันก็ถ้าใครที่จะใส่คำสั่งที่มันยากขึ้นอย่างถ้าจอเล็กลงให้แสดงรูปเป็นทีละรูปอะไรแบบนี้ก็ได้ก็คงจะทำให้เว็บไซต์ของเราน่าใช่ในจอโทรศัพธ์มากยิ่งขึ้นนั้นเองก็หวังว่าผู้ที่เข้ามาอ่านจะได้รับความรู้กันไปบ้างไม่มากก็น้อยนะครับ
สวัดดีครับสำหรับในที่ต้องพัฒนาเว็บไซต์ในตอนนี้ก็คงจะเป็นจะต้องให้[url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3585-website-%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C.html]เว็บไซต์[/url]ของเราสามารถรองรับกับหน้าจอโทรศัพท์ที่จะมีขนาดเล็กกว่าหน้าจอคอมพิวเตอร์ทำให้การใช้งานเว็บไซต์ผ่านมือถือจะต้องแตกต่างออกไปจากหน้าจอคอมพิวเตอร์เช่นถ้าหน้าจอคอมการอาจจะแสดงรูปได้ 3 รูปต่อ แถวแต่ว่าถ้าเป็นหน้าจอโทรศัพท์ก็จะลดให้เหลือแถวละรูปเท่านั้นเพื่อไม่ให้ผู้ใช้เลื่อนออกไปยาว ๆ เพือดูรูป แล้วเราจะกำหนด [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2193-css-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]css[/url] ยังไงล่ะวันนี้เราก็มีเงื่อนไขมานำเสนอกันจะเป็นอย่างไรลองไปดูกันเลย
โดยในตัวอย่างที่จะนำเสนอนี้ก็จะเป็นการกำหนดว่าถ้าจอเล็กกว่า 600px สีพื้นหลังของ border จะเป็นสีฟ้าให้ใช้เงื่อนไข @media แบบนี้
[code]@media (max-width: 600px) {
div {
background-color: lightblue;
}
}[/code]
จากโค้ดก็จะเห็นได้ว่าถ้าความกว่าของหน้าจอต่ำกว่า 600px จะให้แท็กใน div พื้นหลังจะเป็นสีฟ้า
ตัวอย่าง
[code]<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 1px solid;
height: 200px;
text-align: center;
background-color: green;
}
@media (max-width: 600px) {
div {
background-color: lightblue;
}
}
</style>
</head>
<body>
<div >
ถ้าจอขนาด 600px ลงไปสีพื้นหลังของ border จะเป็นสีฟ้า
</div>
</body>
</html>
[/code]
ตอนแรกเราก็จะกำหนดให้พื้นหลังเป็นสีเขียวแต่ถ้าเราลดจอมาเล็กกว่า 600px พื้นหลังก็จะกลานเป็นสีฟ้า
ผลลัพธ์ที่ได้
หน้าจอคอมพิวเตอร์
[attachment=1]Selection_999(364).png[/attachment]
หน้าจอเล็กกว่า 600px
[attachment=0]Selection_999(365).png[/attachment]
เป็นอย่างไรกันบ้างครับสำหรับการเปลี่ยนกำหนัดให้ใช้คำสั่ง css ต่างกันเมือมีขนาดหน้าจอที่แต่ต่างกันก็ถ้าใครที่จะใส่คำสั่งที่มันยากขึ้นอย่างถ้าจอเล็กลงให้แสดงรูปเป็นทีละรูปอะไรแบบนี้ก็ได้ก็คงจะทำให้เว็บไซต์ของเราน่าใช่ในจอโทรศัพธ์มากยิ่งขึ้นนั้นเองก็หวังว่าผู้ที่เข้ามาอ่านจะได้รับความรู้กันไปบ้างไม่มากก็น้อยนะครับ