บทความ

ธนินัช ดอทคอม - ผู้เชี่ยวชาญทำเว็บไซต์

การใช้ media queries สำหรับ responsive จะช่วยให้เว็บไซต์สามารถปรับแต่งเนื้อหาให้เหมาะสมกับขนาดหน้าจอของอุปกรณ์ที่เข้ามาเยี่ยมชมได้ตามความต้องการ โดยปกติแล้วจะมี media queries สำหรับ mobile, desktop, tablet ดังนี้

Mobile โดยทั่วไปใช้ media queries กำหนดเงื่อนไขของหน้าจอที่มีความกว้างไม่เกิน 480px ดังนั้น คำสั่ง media queries สำหรับ mobile จะมีรูปแบบดังนี้

@media (max-width: 480px) {
  /* CSS Code for Mobile Devices */
}

Desktop โดยทั่วไปใช้ media queries กำหนดเงื่อนไขของหน้าจอที่มีความกว้างมากกว่า 1024px ดังนั้น คำสั่ง media queries สำหรับ desktop จะมีรูปแบบดังนี้

@media (min-width: 1024px) {
  /* CSS Code for Desktop Devices */
}

Tablet โดยทั่วไปใช้ media queries กำหนดเงื่อนไขของหน้าจอที่มีความกว้างระหว่าง 481px ถึง 1023px ดังนั้น คำสั่ง media queries สำหรับ tablet จะมีรูปแบบดังนี้

@media (min-width: 481px) and (max-width: 1023px) {
  /* CSS Code for Tablet Devices */
}

สำหรับคำสั่ง media queries สำหรับการกำหนด portrait และ landscape จะใช้เพื่อกำหนดเงื่อนไขของหน้าจอที่มีการแนวตั้งหรือแนวนอน ดังนี้

Portrait โดยทั่วไปใช้ media queries กำหนดเงื่อนไขของหน้าจอที่เป็นแนวตั้ง คือความยาวมากกว่าความกว้าง ดังนั้น คำสั่ง media queries สำหรับการกำหนดเงื่อนไขของหน้าจอที่เป็นแนวตั

@media (orientation: portrait) {
  /* CSS Code for Portrait Orientation */
}

Landscape โดยทั่วไปใช้ media queries กำหนดเงื่อนไขของหน้าจอที่เป็นแนวนอน คือความกว้างมากกว่าความยาว ดังนั้น คำสั่ง media queries สำหรับการกำหนดเงื่อนไขของหน้าจอที่เป็นแนวนอนจะมีรูปแบบดังนี้

@media (orientation: landscape) {
  /* CSS Code for Landscape Orientation */
}

การใช้ media queries สำหรับ responsive และการกำหนดเงื่อนไขของหน้าจอให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานเข้ามาเยี่ยมชมเว็บไซต์นั้น จะช่วยให้เว็บไซต์มีประสิทธิภาพและปรับตัวได้ดีกว่าเว็บไซต์ที่ไม่ได้ใช้ media queries.

ยังมี media queries อื่นๆ ที่ใช้สำหรับ responsive design อีกมากมาย ตัวอย่างเช่น

Retina display โดยทั่วไปใช้ media queries กำหนดเงื่อนไขของหน้าจอที่มี density ของ pixel สูง เช่น Retina display ของ iPhone ดังนั้น คำสั่ง media queries สำหรับ Retina display จะมีรูปแบบดังนี้

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
  /* CSS Code for Retina Display */
}

Print โดยทั่วไปใช้ media queries สำหรับการพิมพ์เพื่อกำหนดการแสดงผลของหน้าเว็บไซต์ที่ถูกพิมพ์ คำสั่ง media queries สำหรับการพิมพ์จะมีรูปแบบดังนี้

@media print {
  /* CSS Code for Print */
}

High DPI Displays โดยทั่วไปใช้ media queries กำหนดเงื่อนไขของหน้าจอที่มี density ของ pixel สูง ซึ่งคำสั่งนี้จะช่วยให้เว็บไซต์แสดงผลได้คมชัดและชัดเจนมากขึ้น คำสั่ง media queries สำหรับ High DPI Displays จะมีรูปแบบดังนี้

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  /* CSS Code for High DPI Displays */
}

การใช้ media queries สำหรับ responsive design จะช่วยให้เว็บไซต์ของคุณปรับตัวได้ดีตามอุปกรณ์ที่ผู้ใช้งานใช้งาน เพื่อให้ผู้ใช้งานมีประสิทธิภาพในการเข้าถึงเนื้อหา และช่วยให้เว็บไซต์ของคุณดูดีและเหมาะสมกับหลายๆ อุปกรณ์ได้.

Aspect Ratio โดยทั่วไปใช้ media queries สำหรับกำหนดเงื่อนไขของหน้าจอที่มีอัตราส่วนของหน้าจอไม่เท่ากัน เช่น หน้าจอแบบ 16:9 หรือ 4:3 เป็นต้น คำสั่ง media queries สำหรับ Aspect Ratio จะมีรูปแบบดังนี้

@media screen and (aspect-ratio: 16/9) {
  /* CSS Code for Aspect Ratio 16:9 */
}

@media screen and (aspect-ratio: 4/3) {
  /* CSS Code for Aspect Ratio 4:3 */
}

Viewport Units โดยทั่วไปใช้ viewport units เพื่อกำหนดขนาดและระยะห่างขององค์ประกอบในหน้าเว็บไซต์ โดยสามารถกำหนดค่าขนาดและระยะห่างโดยอิงจากขนาดของหน้าจอ คำสั่ง media queries สำหรับ Viewport Units จะมีรูปแบบดังนี้

@media screen and (min-width: 50vw) {
  /* CSS Code for Element with Minimum Width of 50% of Viewport Width */
}

@media screen and (max-height: 50vh) {
  /* CSS Code for Element with Maximum Height of 50% of Viewport Height */
}

การใช้ media queries ต่างๆ นี้จะช่วยให้เว็บไซต์ของคุณปรับตัวได้ดียิ่งขึ้นตามอุปกรณ์และสภาพแวดล้อมที่ผู้ใช้งานเข้ามาเยี่ยมชมเว็บไซต์นั้นๆ โดยสามารถกำหนดเงื่อนไขของหน้าจอให้เหมาะสมกับอุปกรณ์และสภาพแวดล้อมได้.

Hover โดยทั่วไปใช้ media queries สำหรับเมื่อผู้ใช้งานเอาเมาส์ไปชี้ไปยังองค์ประกอบบนหน้าเว็บไซต์ เช่น ปุ่ม, ลิงก์, รูปภาพ คำสั่ง media queries สำหรับ Hover จะมีรูปแบบดังนี้

@media (hover: hover) {
  /* CSS Code for Hover State */
}

Pointer โดยทั่วไปใช้ media queries สำหรับเมื่อผู้ใช้งานใช้ pointer device บนหน้าเว็บไซต์ เช่น เมาส์, แท็บเล็ต, หรือเมืองเรือ คำสั่ง media queries สำหรับ Pointer จะมีรูปแบบดังนี้

@media (pointer: coarse) {
  /* CSS Code for Coarse Pointer */
}

@media (pointer: fine) {
  /* CSS Code for Fine Pointer */
}

การใช้ media queries สำหรับ Hover และ Pointer จะช่วยให้เว็บไซต์ของคุณปรับตัวได้ดีตามอุปกรณ์และสภาพแวดล้อมที่ผู้ใช้งานเข้ามาเยี่ยมชมเว็บไซต์นั้นๆ และเพิ่มประสิทธิภาพในการใช้งานของผู้ใช้งานด้วย.

Dark Mode โดยทั่วไปใช้ media queries สำหรับกำหนดเงื่อนไขเมื่อผู้ใช้งานเปิดใช้งาน Dark Mode บนอุปกรณ์ของตนเอง คำสั่ง media queries สำหรับ Dark Mode จะมีรูปแบบดังนี้

@media (prefers-color-scheme: dark) {
  /* CSS Code for Dark Mode */
}

Light Mode โดยทั่วไปใช้ media queries สำหรับกำหนดเงื่อนไขเมื่อผู้ใช้งานเปิดใช้งาน Light Mode บนอุปกรณ์ของตนเอง คำสั่ง media queries สำหรับ Light Mode จะมีรูปแบบดังนี้

@media (prefers-color-scheme: light) {
  /* CSS Code for Light Mode */
}

การใช้ media queries สำหรับ Dark Mode และ Light Mode จะช่วยให้เว็บไซต์ของคุณสามารถปรับสีตามการตั้งค่า Dark Mode หรือ Light Mode บนอุปกรณ์ของผู้ใช้งานได้โดยอัตโนมัติ ซึ่งเป็นประโยชน์ในการพัฒนาเว็บไซต์สำหรับผู้ใช้งานที่มีความสะดวกสบายและเป็นมิตรกับผู้ใช้งาน.

User Preferences โดยทั่วไปใช้ media queries สำหรับเมื่อผู้ใช้งานกำหนดค่าของอุปกรณ์ของตนเอง เช่น ขนาดของฟอนต์, ขนาดของเมนู, สีของพื้นหลัง, และอื่นๆ คำสั่ง media queries สำหรับ User Preferences จะมีรูปแบบดังนี้

@media (prefers-reduced-motion: reduce) {
  /* CSS Code for Reduced Motion */
}

@media (prefers-reduced-transparency: reduce) {
  /* CSS Code for Reduced Transparency */
}

@media (prefers-contrast: high) {
  /* CSS Code for High Contrast */
}

@media (prefers-visibility: hidden) {
  /* CSS Code for Hidden Elements */
}

@media (prefers-contrast: no-preference) {
  /* CSS Code for No Preference on Contrast */
}

การใช้ media queries สำหรับ User Preferences จะช่วยให้เว็บไซต์ของคุณสามารถปรับตัวได้ดียิ่งขึ้นตามการตั้งค่าของผู้ใช้งาน ซึ่งจะช่วยให้ผู้ใช้งานมีประสิทธิภาพในการใช้งานและสะดวกสบายยิ่งขึ้น.

Aspect Ratio โดยทั่วไปใช้ media queries สำหรับกำหนดเงื่อนไขเมื่อแสดงภาพหรือวิดีโอโดยให้แสดงในอัตราส่วนที่ต้องการ เช่น อัตราส่วน 16:9, 4:3 หรือ 1:1 คำสั่ง media queries สำหรับ Aspect Ratio จะมีรูปแบบดังนี้

@media (aspect-ratio: 16/9) {
  /* CSS Code for 16:9 Aspect Ratio */
}

@media (aspect-ratio: 4/3) {
  /* CSS Code for 4:3 Aspect Ratio */
}

@media (aspect-ratio: 1/1) {
  /* CSS Code for 1:1 Aspect Ratio */
}

การใช้ media queries สำหรับ Aspect Ratio จะช่วยให้เว็บไซต์ของคุณสามารถปรับส่วนสูงและส่วนกว้างของภาพหรือวิดีโอให้เหมาะสมกับอุปกรณ์และสภาพแวดล้อมที่ผู้ใช้งานเข้ามาเยี่ยมชมเว็บไซต์นั้นๆ และช่วยให้ผู้ใช้งานมีประสิทธิภาพในการดูภาพหรือวิดีโอ.

Viewport Units Viewport Units เป็นหน่วยที่ใช้คำนวณความสูงและความกว้างของหน้าจอของอุปกรณ์ให้เหมาะสม ซึ่งจะช่วยให้เว็บไซต์ของคุณเหมาะสมกับหน้าจอของอุปกรณ์ที่ผู้ใช้งานใช้งานอยู่ คำสั่ง media queries สำหรับ Viewport Units จะมีรูปแบบดังนี้

@media (max-width: 100vh) {
  /* CSS Code for Viewport Height */
}

@media (max-width: 100vw) {
  /* CSS Code for Viewport Width */
}

Viewport Units มี 2 แบบ คือ vw (Viewport Width) และ vh (Viewport Height) ซึ่งจะใช้คำนวณความกว้างและความสูงของหน้าจอเป็นเปอร์เซ็นต์โดยอ้างอิงจากขนาดของอุปกรณ์ การใช้ media queries สำหรับ Viewport Units จะช่วยให้เว็บไซต์ของคุณปรับขนาดและแสดงผลได้อย่างเหมาะสมกับหน้าจอของผู้ใช้งานในทุกๆ ขนาดและสัดส่วน.

Scripting การใช้ media queries สำหรับ Scripting จะช่วยให้เราสามารถควบคุมการโหลด script ของเว็บไซต์ได้ โดยการตั้งเงื่อนไขเมื่อผู้ใช้งานเข้าถึงเว็บไซต์โดยใช้อุปกรณ์หรือเครื่องมือที่มีความสามารถในการรับส่งข้อมูลเครือข่ายที่จำกัด เช่น อุปกรณ์ที่ใช้เครือข่าย EDGE หรือ 3G คำสั่ง media queries สำหรับ Scripting จะมีรูปแบบดังนี้

@media (scripting: none) {
  /* CSS Code for No Scripting */
}

@media (scripting: initial-only) {
  /* CSS Code for Initial Scripting */
}

@media (scripting: enabled) {
  /* CSS Code for Enabled Scripting */
}

การใช้ media queries สำหรับ Scripting จะช่วยให้เว็บไซต์ของคุณสามารถปรับตัวได้ให้เหมาะสมกับเครื่องมือและอุปกรณ์ที่ผู้ใช้งานใช้งาน เพื่อประสิทธิภาพและประหยัดแหล่งทรัพยากรของเซิร์ฟเวอร์.

Grid Layout โดย Grid Layout เป็นเทคนิคการออกแบบเว็บไซต์ที่ใช้งานกันอย่างแพร่หลายในปัจจุบัน โดยสามารถกำหนดการแสดงผลของเนื้อหาแบบสองมิติได้ ซึ่งจะช่วยให้ผู้พัฒนาสามารถสร้างเว็บไซต์ที่มีการแสดงผลที่ยืดหยุ่นและเป็นระเบียบได้อย่างง่ายดาย

การใช้ media queries สำหรับ Grid Layout จะช่วยให้เราสามารถกำหนดเงื่อนไขเมื่อแสดงผล Grid Layout ได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งานอยู่ เช่น การแสดงผลเป็นแนวนอนหรือแนวตั้ง คำสั่ง media queries สำหรับ Grid Layout จะมีรูปแบบดังนี้

@media (min-width: 768px) {
  /* CSS Code for Grid Layout on Tablet */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
}

@media (min-width: 1024px) {
  /* CSS Code for Grid Layout on Desktop */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 30px;
}

การใช้ media queries สำหรับ Grid Layout จะช่วยให้เว็บไซต์ของคุณสามารถปรับแต่ง Grid Layout ได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน เพื่อความสมบูรณ์และประสิทธิภาพของเว็บไซต์.

Flexbox Flexbox เป็นเทคนิคการออกแบบเว็บไซต์ที่ใช้งานกันอย่างแพร่หลายในปัจจุบัน โดยสามารถกำหนดการแสดงผลของเนื้อหาแบบหลายมิติได้ ซึ่งจะช่วยให้ผู้พัฒนาสามารถสร้างเว็บไซต์ที่มีการแสดงผลที่ยืดหยุ่นและเป็นระเบียบได้อย่างง่ายดาย

การใช้ media queries สำหรับ Flexbox จะช่วยให้เราสามารถกำหนดเงื่อนไขเมื่อแสดงผล Flexbox ได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งานอยู่ เช่น การแสดงผลเป็นแนวนอนหรือแนวตั้ง คำสั่ง media queries สำหรับ Flexbox จะมีรูปแบบดังนี้

@media (min-width: 768px) {
  /* CSS Code for Flexbox on Tablet */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

@media (min-width: 1024px) {
  /* CSS Code for Flexbox on Desktop */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

การใช้ media queries สำหรับ Flexbox จะช่วยให้เว็บไซต์ของคุณสามารถปรับแต่ง Flexbox ได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน เพื่อความสมบูรณ์และประสิทธิภาพของเว็บไซต์.

Responsive Images การใช้รูปภาพในเว็บไซต์ที่มีความยืดหยุ่นจะต้องใช้เทคนิค Responsive Images เพื่อให้รูปภาพแสดงผลได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน เช่น ขนาดหน้าจอของอุปกรณ์ การแสดงผลในแนวตั้งหรือแนวนอน เป็นต้น

การใช้งาน Responsive Images จะต้องใช้งานร่วมกับ media queries เพื่อกำหนดขนาดและแสดงผลของรูปภาพ โดยใช้ attribute ของ <img> ดังนี้

<img src="image.jpg" alt="description" 
     srcset="image-small.jpg 480w,
             image-medium.jpg 768w,
             image-large.jpg 1200w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 768px) 80vw,
            1200px"
>

ในตัวอย่างข้างต้นจะกำหนดภาพรวมกับ media queries ดังนี้

ใช้ image-small.jpg เมื่อขนาดหน้าจอไม่เกิน 480px
ใช้ image-medium.jpg เมื่อขนาดหน้าจอไม่เกิน 768px
ใช้ image-large.jpg เมื่อขนาดหน้าจอไม่เกิน 1200px

และกำหนดขนาดภาพเพื่อเลือกภาพที่เหมาะสมกับขนาดหน้าจอดังนี้

ใช้ 100vw เมื่อขนาดหน้าจอไม่เกิน 480px
ใช้ 80vw เมื่อขนาดหน้าจอไม่เกิน 768px
ใช้ขนาด 1200px เมื่อขนาดหน้าจอเกิน 768px

การใช้งาน Responsive Images จะช่วยลดการโหลดของเว็บไซต์ให้เร็วขึ้น และทำให้เว็บไซต์แสดงผลได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน.

CSS Grid CSS Grid เป็นเทคนิคการออกแบบเว็บไซต์ที่เพิ่มความยืดหยุ่นในการแสดงผลเนื้อหาบนเว็บไซต์ โดยใช้งาน Grid Layout ในการกำหนดเทมเพลตของเว็บไซต์ ซึ่งจะช่วยให้ผู้พัฒนาสามารถสร้างเว็บไซต์ที่มีการแสดงผลที่ยืดหยุ่นและสวยงามได้อย่างง่ายดาย

การใช้ media queries สำหรับ CSS Grid จะช่วยให้ผู้พัฒนาสามารถกำหนดการแสดงผลของเนื้อหาของเว็บไซต์ให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน โดยเราสามารถกำหนด Grid Layout แบบต่างๆ ได้ตามต้องการ ตัวอย่างเช่น

@media (min-width: 768px) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
  }
}

@media (min-width: 1024px) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
  }
}

ในตัวอย่างข้างต้น เรากำหนด Grid Layout ให้แสดงผลเป็น 3 คอลัมน์เมื่อขนาดหน้าจอเกิน 768px และกำหนด Grid Layout เป็น 4 คอลัมน์เมื่อขนาดหน้าจอเกิน 1024px

การใช้ media queries สำหรับ CSS Grid จะช่วยให้เราสามารถปรับแต่ง Grid Layout ได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน เพื่อความสมบูรณ์และประสิทธิภาพของเว็บไซต์.

Flexbox Flexbox เป็นเทคนิคการออกแบบเว็บไซต์ที่ช่วยให้เนื้อหาแสดงผลได้อย่างยืดหยุ่นและสวยงาม โดยใช้งาน Flexbox Layout ในการกำหนดการแสดงผลเนื้อหาบนเว็บไซต์ ซึ่งจะช่วยให้ผู้พัฒนาสามารถสร้างเว็บไซต์ที่มีการแสดงผลที่ยืดหยุ่นและสวยงามได้อย่างง่ายดาย

การใช้ media queries สำหรับ Flexbox จะช่วยให้ผู้พัฒนาสามารถกำหนดการแสดงผลของเนื้อหาของเว็บไซต์ให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน โดยเราสามารถกำหนด Flexbox Layout แบบต่างๆ ได้ตามต้องการ ตัวอย่างเช่น

@media (min-width: 768px) {
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

ในตัวอย่างข้างต้น เรากำหนด Flexbox Layout ให้แสดงผลเป็น Wrap เมื่อขนาดหน้าจอเกิน 768px และกำหนด Flexbox Layout เมื่อขนาดหน้าจอเกิน 1024px

การใช้ media queries สำหรับ Flexbox จะช่วยให้เราสามารถปรับแต่ง Flexbox Layout ได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน เพื่อความสมบูรณ์และประสิทธิภาพของเว็บไซต์.

Responsive Images Responsive Images คือการจัดการรูปภาพในเว็บไซต์เพื่อให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน เช่น การปรับขนาดของรูปภาพให้เหมาะสมกับขนาดหน้าจอ หรือการโหลดรูปภาพที่เหมาะสมกับความเร็วของเครือข่ายที่ผู้ใช้งานใช้งาน

การใช้ media queries สำหรับ Responsive Images จะช่วยให้เราสามารถกำหนดการแสดงผลของรูปภาพให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน โดยเราสามารถกำหนดลักษณะของรูปภาพที่จะแสดงผลได้ตามขนาดหน้าจอ และสามารถใช้งานหลายรูปแบบเช่น srcset หรือ sizes สำหรับการเลือกแสดงผลรูปภาพที่เหมาะสม

ตัวอย่างเช่น

<img src="example.jpg" srcset="example-2x.jpg 2x, example-3x.jpg 3x" sizes="(max-width: 600px) 100vw, 50vw">

ในตัวอย่างข้างต้น เรากำหนดให้แสดงรูปภาพ example.jpg และสามารถแสดงผลรูปภาพอื่นๆ เช่น example-2x.jpg หรือ example-3x.jpg ได้ตามที่เหมาะสม โดยใช้ srcset และกำหนดขนาดของแต่ละรูปภาพด้วย sizes โดยรูปภาพจะแสดงผลให้เหมาะสมกับขนาดหน้าจอที่ใช้งาน

การใช้ media queries สำหรับ Responsive Images จะช่วยให้เราสามารถปรับแต่งการแสดงผลรูปภาพได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน และช่วยให้เว็บไซต์มีปร

Responsive Typography Responsive Typography คือการปรับแต่งตัวอักษรในเว็บไซต์ให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน เช่น การปรับขนาดตัวอักษรให้เหมาะสมกับขนาดหน้าจอ หรือการเปลี่ยนแปลงรูปแบบตัวอักษรเพื่อเพิ่มความอ่านง่ายในอุปกรณ์ต่างๆ

การใช้ media queries สำหรับ Responsive Typography จะช่วยให้เราสามารถกำหนดการแสดงผลของตัวอักษรให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน โดยเราสามารถกำหนดลักษณะของตัวอักษรที่จะแสดงผลได้ตามขนาดหน้าจอ และสามารถใช้งานหลายรูปแบบเช่น font-size หรือ line-height สำหรับการเลือกแสดงผลตัวอักษรที่เหมาะสม

ตัวอย่างเช่น

@media (max-width: 768px) {
  body {
    font-size: 14px;
    line-height: 1.5;
  }
}

@media (min-width: 769px) {
  body {
    font-size: 16px;
    line-height: 1.6;
  }
}

ในตัวอย่างข้างต้น เรากำหนดขนาดตัวอักษรและ line-height ของเว็บไซต์เมื่อขนาดหน้าจอต่ำกว่า 768px และเมื่อขนาดหน้าจอมีขนาดมากกว่า 769px โดยการใช้ media queries สำหรับ Responsive Typography จะช่วยให้เราสามารถปรับแต่งการแสดงผลตัวอักษรได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน และช่วยให้เว็บไซต์มีประสิทธิภาพในการแสดงผลตัวอักษรเพื่อความสมบูรณ์ของเว็

Responsive Images Responsive Images คือการปรับแต่งการแสดงผลรูปภาพในเว็บไซต์ให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน เช่น การปรับขนาดรูปภาพให้เหมาะสมกับขนาดหน้าจอ หรือการโหลดรูปภาพให้ตรงกับความเร็วเน็ตเวิร์คของผู้ใช้งาน

การใช้งาน Responsive Images ในเว็บไซต์ จะช่วยให้เราปรับแต่งการแสดงผลรูปภาพให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน โดยสามารถกำหนดขนาดรูปภาพและสัดส่วนในการแสดงผลให้เหมาะสมกับขนาดหน้าจอของผู้ใช้งาน หรือใช้งานรูปภาพตามความเหมาะสมของอุปกรณ์ โดยการใช้งาน Responsive Images นั้น เราสามารถใช้งานหลายๆ วิธีตามความเหมาะสม เช่น ใช้งาน srcset attribute ของ <img> tag หรือ <picture> tag, หรือใช้งาน CSS background-image property หรือ <picture> tag

ตัวอย่างเช่น

<img src="image.jpg"
     srcset="image-large.jpg 1200w,
             image-medium.jpg 768w,
             image-small.jpg 480w"
     sizes="(min-width: 1200px) 1000px,
            (min-width: 768px) 720px,
            100vw"
     alt="An example of a responsive image">

ในตัวอย่างข้างต้น เรากำหนดใช้งาน srcset attribute ของ <img> tag โดยระบุรูปภาพสำหรับขนาดหน้าจอต่างๆ โดยใช้ค่าความกว้างของรูปภาพ (width) ในการเลือกการแสดงผลรูปภาพ และกำหนด sizes attribute เพื่อระบุขนาดของรูปภาพที่ต้องการแสดงในขนาด

นอกจากนี้เรายังสามารถใช้งาน <picture> tag ในการแสดงผลรูปภาพแบบ responsive โดยการกำหนด source element สำหรับรูปภาพที่ต้องการแสดงในขนาดหน้าจอต่างๆ ดังตัวอย่างนี้

<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <source media="(min-width: 480px)" srcset="small.jpg">
  <img src="fallback.jpg" alt="An example of a responsive image">
</picture>

ในตัวอย่างข้างต้น เราใช้งาน <picture> tag เพื่อแสดงรูปภาพแบบ responsive โดยกำหนด source element สำหรับแต่ละขนาดหน้าจอ และกำหนดรูปภาพ fallback ด้วย <img> tag สำหรับกรณีที่ไม่สามารถแสดงผลรูปภาพในขนาดที่เราต้องการได้

สำหรับ responsive images สามารถใช้งานได้กับหลายๆ รูปแบบของไฟล์รูปภาพ เช่น JPEG, PNG, GIF, SVG และ WebP ซึ่ง WebP เป็นรูปแบบไฟล์รูปภาพที่พัฒนาโดย Google และมีขนาดไฟล์เล็กกว่ารูปแบบอื่นๆ แต่ยังรองรับคุณภาพภาพที่สูงกว่า

การใช้งาน Responsive Images ยังสามารถใช้งานร่วมกับ CSS background-image property แบบง่าย ๆ ด้วยการกำหนด background-size property และ background-image property เช่น

<div class="responsive-image"></div>

<style>
.responsive-image {
  background-image: url('image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

@media screen and (max-width: 480px) {
  .responsive-image {
    background-image: url('image-small.jpg');
  }
}

@media screen and (min-width: 481px) and (max-width: 1023px) {
  .responsive-image {
    background-image: url('image-medium.jpg');
  }
}

@media screen and (min-width: 1024px) {
  .responsive-image {
    background-image: url('image-large.jpg');
  }
}
</style>

ในตัวอย่างข้างต้น เราใช้งาน CSS background-image property และ background-size property สำหรับแสดงผลรูปภาพ โดยกำหนดค่าของ background-image property เพื่อแสดงรูปภาพ และกำหนดค่าของ background-size property เพื่อปรับขนาดของรูปภาพให้เหมาะสมกับขนาดขององค์ประกอบ

โดยที่เราใช้ @media queries ในการกำหนดขนาดรูปภาพสำหรับขนาดหน้าจอต่างๆ โดยใช้ขนาดของหน้าจอเป็นเกณฑ์ในการเลือกแสดงรูปภาพที่เหมาะสมกับขนาดหน้าจอนั้นๆ ดังนั้นเมื่อเราสร้างเว็บไซต์ด้วย Responsive Images แล้ว เว็บไซต์จะแสดงผลรูปภาพที่เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน อีกทั้งยังช่วยลดภาระการโหลดข้อมูลในเว็บไซต์ด้วย

นอกจากนี้ Responsive Images ยังสามารถใช้งานร่วมกับ JavaScript libraries อื่นๆ เช่น Lazy Loading หรือ Intersection Observer เพื่อช่วยลดการโหลดข้อมูลในเว็บไซต์และเพิ่มประสิทธิภาพการโหลดหน้าเว็บไซต์ โดยลดการโหลดรูปภาพที่ไม่จำเป็นในการแสดงผลในขณะที่ผู้ใช้งานเลื่อนหน้าเว็บไปยังส่วนที่ไม่ต้องการใช้งานรูปภาพนั้น

ยังมี JavaScript libraries อื่นๆ ที่ช่วยในการแสดงผลรูปภาพแบบ responsive เช่น Picturefill, Adaptive Images, และ Responsive Img ซึ่งสามารถใช้งานได้ง่ายๆ โดยการอิมพลีเมนต์เป็น JavaScript file และใช้งานฟังก์ชันที่ต้องการตามความต้องการของโปรเจคแต่ละอย่าง