Monday, 15 July 2024

การใช้ Media Query ใน CSS ให้เว็บแสดงผล Responsive

05 May 2018
184
luminox watches

Media Query เป็นเทคนิคการใช้ CSS ที่ช่วยให้สามารถปรับแต่งสไตล์การแสดงผลของเว็บไซต์ได้ตามขนาดหน้าจอของอุปกรณ์ที่ใช้เข้าชมเว็บไซต์ ซึ่งจะช่วยให้เว็บไซต์มีการแสดงผลที่ถูกต้องและสวยงามในทุกๆ ขนาดหน้าจอ

Media-Queries

Media-Queries

Media Query จะใช้ syntax ดังนี้

@media screen and (max-width: 768px) {
/* รูปแบบการเขียน CSS สำหรับหน้าจอขนาดไม่เกิน 768px */
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
/* รูปแบบการเขียน CSS สำหรับหน้าจอขนาดตั้งแต่ 769px ถึง 1024px */
}

@media screen and (min-width: 1025px) {
/* รูปแบบการเขียน CSS สำหรับหน้าจอขนาดมากกว่า 1025px */
}

 

ในตัวอย่างข้างต้น จะมีการกำหนด media type ให้เป็น screen ซึ่งหมายถึงเรากำหนด CSS สำหรับแสดงผลบนหน้าจอ และมีการกำหนดขนาดหน้าจอด้วยเงื่อนไข max-width และ min-width ซึ่งจะช่วยให้ CSS ที่เรากำหนดนั้นถูกใช้งานในขนาดหน้าจอที่ต้องการเท่านั้น โดยเงื่อนไข max-width จะกำหนดขนาดหน้าจอสูงสุดที่ CSS นั้นถูกใช้ และเงื่อนไข min-width จะกำหนดขนาดหน้าจอต่ำสุดที่ CSS นั้นถูกใช้ ในตัวอย่างข้างต้น เรากำหนด CSS สำหรับหน้าจอขนาดไม่เกิน 768px ในข้อความแรก สำหรับหน้าจอขนาดตั้งแต่ 769px ถึง 1024px

Media Query สามารถใช้ร่วมกับ tag อื่นๆ ใน HTML เพื่อปรับแต่งสไตล์การแสดงผลของเว็บไซต์ให้เหมาะสมกับขนาดหน้าจอ ตัวอย่างการใช้งานคือการปรับแต่งสไตล์ของภาพถ่ายให้เหมาะสมกับขนาดหน้าจอ

 

<div class=“image-container”> <img src=“image.jpg” alt=“Image”> </div>

 

 

/* ปรับแต่งสไตล์ของภาพถ่ายเมื่อหน้าจอมีขนาดไม่เกิน 768px */
@media screen and (max-width: 768px) {
.image-container {
width: 100%;
padding: 0;
}
.image-container img {
width: 100%;
}
}

/* ปรับแต่งสไตล์ของภาพถ่ายเมื่อหน้าจอมีขนาดตั้งแต่ 769px ถึง 1024px */
@media screen and (min-width: 769px) and (max-width: 1024px) {
.image-container {
width: 50%;
padding: 20px;
}
.image-container img {
width: 100%;
}
}

/* ปรับแต่งสไตล์ของภาพถ่ายเมื่อหน้าจอมีขนาดมากกว่า 1025px */
@media screen and (min-width: 1025px) {
.image-container {
width: 30%;
padding: 20px;
}
.image-container img {
width: 100%;
}
}
ในตัวอย่างข้างต้น เราใช้ Media Query เพื่อปรับแต่งขนาดและตำแหน่งของภาพถ่ายใน tag โดยเรากำหนด CSS สำหรับแต่ละขนาดหน้าจอที่เราต้องการ ซึ่งจะช่วยให้ภาพถ่ายแสดงผลได้ตามขนาดหน้าจอและเหมาะสมกับการแสดงผลของเว็บไซต์ได้อย่างดี

Thanat Sirikitphattana

แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ

Follow Us / Thanat Sirikitphattana