เมื่อจำนวนผู้ใช้โทรศัพท์มือถือบนอินเทอร์เน็ตเพิ่มมากขึ้น ระบบจึงได้กลายมาเป็น ความสำคัญมากขึ้นสำหรับนักออกแบบเว็บ ในการจัดวางเนื้อหาให้อยู่ในรูปแบบที่ได้ผลดี เหมาะกับหน้าจอหลายขนาด การออกแบบเว็บที่ตอบสนองตามอุปกรณ์ เดิมกำหนดโดย Ethan Marcotte ใน A List Apart เป็นกลยุทธ์การออกแบบที่ตอบสนองต่อ และอุปกรณ์ของพวกเขา โดยเปลี่ยนเลย์เอาต์ของเว็บไซต์ให้เหมาะกับอุปกรณ์ที่ใช้ สำหรับ เช่น เว็บไซต์ที่ปรับเปลี่ยนตามอุปกรณ์อาจแสดงเนื้อหาในมุมมองคอลัมน์เดียวบนโทรศัพท์ 2 คอลัมน์ในแท็บเล็ต และ 3 หรือ 4 คอลัมน์ในคอมพิวเตอร์เดสก์ท็อป
เนื่องจากอุปกรณ์ที่ใช้อินเทอร์เน็ตได้มีหน้าจอหลายขนาด สิ่งสำคัญสำหรับเว็บไซต์ของคุณในการปรับให้เข้ากับขนาดหน้าจอที่มีอยู่หรือในอนาคต โมเดิร์น การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ยังพิจารณารูปแบบการโต้ตอบต่างๆ เช่น หน้าจอสัมผัส ด้วย โดยมีเป้าหมายเพื่อเพิ่มประสิทธิภาพประสบการณ์การใช้งานสำหรับทุกคน
ตั้งค่าวิวพอร์ต
หน้าเว็บที่เพิ่มประสิทธิภาพสำหรับอุปกรณ์ที่หลากหลายต้องมีแท็กเมตาวิวพอร์ตใน ส่วนหัวของเอกสาร แท็กนี้จะบอกเบราว์เซอร์ถึงวิธีควบคุมแท็ก และการปรับขนาด
เพื่อมอบประสบการณ์ที่ดีที่สุด เบราว์เซอร์บนอุปกรณ์เคลื่อนที่จะแสดงผลหน้าเว็บตาม
ความกว้างของหน้าจอเดสก์ท็อป (โดยปกติจะอยู่ที่ประมาณ 980px แต่จะแตกต่างกันไปตามอุปกรณ์ต่างๆ)
แล้วพยายามทำให้เนื้อหาดูดีขึ้นโดยการเพิ่มขนาดตัวอักษรและ
การปรับขนาดเนื้อหาให้พอดีกับหน้าจอ ซึ่งอาจทำให้แบบอักษรดูไม่สม่ำเสมอและ
กำหนดให้ผู้ใช้ซูมเข้าเพื่อดูและโต้ตอบกับเนื้อหา
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
การใช้ค่าวิวพอร์ตเมตา width=device-width จะบอกหน้าเว็บให้ตรงกับ
ความกว้างของหน้าจอเป็นพิกเซลอิสระของอุปกรณ์ (DIP) ซึ่งเป็นหน่วยพิกเซลภาพมาตรฐาน
(ซึ่งอาจประกอบด้วยพิกเซลจริงจำนวนมากบนหน้าจอความหนาแน่นสูง) ช่วงเวลานี้
ช่วยให้หน้าเว็บจัดเรียงเนื้อหาใหม่เพื่อให้ตรงกับหน้าจอขนาดต่างๆ ได้
บางเบราว์เซอร์จะคงค่า
ความกว้างหน้าคงที่เมื่อหมุนเป็นโหมดแนวนอน และซูมเพื่อให้เต็ม
แทนการจัดเรียงใหม่ การเพิ่มค่าที่ initial-scale=1 จะบอกเบราว์เซอร์
เพื่อกำหนดความสัมพันธ์แบบ 1:1 ระหว่างพิกเซล CSS กับพิกเซลที่ไม่ขึ้นอยู่กับอุปกรณ์
ไม่คำนึงถึงการวางแนวของอุปกรณ์ ทำให้หน้าเว็บใช้ประโยชน์จาก
ความกว้างแนวนอน
ไม่มีแท็ก <meta name="viewport"> ที่มี width หรือ initial-scale
การตรวจสอบ Lighthouse จะช่วยให้คุณดำเนินการโดยอัตโนมัติเพื่อให้แน่ใจว่า HTML ของคุณ
เอกสารใช้เมตาแท็กวิวพอร์ตอย่างถูกต้อง
กำหนดขนาดเนื้อหาให้พอดีกับวิวพอร์ต
ทั้งในเดสก์ท็อปและอุปกรณ์เคลื่อนที่ ผู้ใช้เคยชินกับการเลื่อนเว็บไซต์ แนวตั้งแต่ไม่แนวนอน บังคับให้ผู้ใช้เลื่อนหน้าจอในแนวนอนหรือเพื่อ ซูมออกเพื่อดูทั้งหน้าทำให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี
เมื่อมีการพัฒนาเว็บไซต์ในอุปกรณ์เคลื่อนที่ด้วยเมตาแท็กวิวพอร์ต เป็นเรื่องปกติที่จะ สร้างเนื้อหาของหน้าเว็บที่ไม่พอดีกับ วิวพอร์ต ตัวอย่างเช่น รูปภาพที่แสดงกว้างกว่าวิวพอร์ตอาจทําให้เกิด การเลื่อนแนวนอน เพื่อป้องกันเหตุการณ์ดังกล่าว ให้ปรับเนื้อหาของคุณให้พอดีกับ วิวพอร์ต
ปรับขนาดเนื้อหาไม่ถูกต้องสำหรับวิวพอร์ต การตรวจสอบ Lighthouse จะช่วยให้คุณดำเนินการโดยอัตโนมัติสำหรับกระบวนการตรวจหาข้อมูลล้น เนื้อหา
รูปภาพ
ภาพที่มีขนาดคงที่จะทำให้หน้าเว็บเลื่อนหากมีขนาดใหญ่กว่า
วิวพอร์ต เราขอแนะนำให้รูปภาพทั้งหมดมีขนาด max-width ของ 100% ซึ่งลดขนาดลง
เพื่อให้พอดีกับพื้นที่ว่างโดยป้องกันไม่ให้รูปภาพยืดออกไป
ขนาดเริ่มต้น
ในกรณีส่วนใหญ่ คุณจะดำเนินการนี้ได้ด้วยการเพิ่มค่าต่อไปนี้ลงในสไตล์ชีทของคุณ
img {
max-width: 100%;
display: block;
}
เพิ่มขนาดของรูปภาพลงในองค์ประกอบ img
แม้คุณจะตั้งค่า max-width: 100% ไปแล้ว เรายังคงแนะนำให้คุณเพิ่ม width และ
height ให้กับแท็ก <img> เพื่อให้เบราว์เซอร์สามารถจองพื้นที่สำหรับ
ก่อนที่จะโหลด วิธีนี้จะช่วยป้องกันการเปลี่ยนเลย์เอาต์
เลย์เอาต์
เนื่องจากขนาดและความกว้างของหน้าจอในพิกเซล CSS แตกต่างกันอย่างมากระหว่างอุปกรณ์ต่างๆ (เช่น ระหว่างโทรศัพท์และแท็บเล็ต และหรือระหว่างโทรศัพท์แต่ละรุ่น) เนื้อหาไม่ควรอาศัยความกว้างเฉพาะของวิวพอร์ตเพื่อแสดงผลได้ดี
ก่อนหน้านี้ การตั้งค่านี้จำเป็นต้องมีการตั้งค่าองค์ประกอบเลย์เอาต์เป็นเปอร์เซ็นต์ กำลังใช้พิกเซล ในการวัด ผู้ใช้จะต้องเลื่อนในแนวนอนบนหน้าจอขนาดเล็กดังนี้
การใช้เปอร์เซ็นต์จะทำให้คอลัมน์แคบลงบนหน้าจอขนาดเล็ก เพราะ แต่ละคอลัมน์จะใช้เปอร์เซ็นต์เดียวกันของความกว้างของหน้าจอเสมอ ดังนี้
เทคนิคการจัดวาง CSS ที่ทันสมัย เช่น Flexbox, Grid Layout และ Multicol ทำ สร้างตารางกริดที่ยืดหยุ่นนี้ได้ง่ายขึ้นมาก
เฟล็กซ์บ็อกซ์
ใช้ Flexbox เมื่อมีชุดสินค้าขนาดต่างๆ และคุณต้องการให้ วางพอดีในแถวหรือหลายแถวได้สบายๆ โดยรายการที่มีขนาดเล็กกว่าจะใช้พื้นที่น้อยกว่า แต่หน่วยโฆษณาขนาดใหญ่กว่าจะใช้พื้นที่มากกว่า
.items {
display: flex;
justify-content: space-between;
}
คุณสามารถใช้ Flexbox เพื่อแสดงสินค้าเป็นแถวเดียว หรือห่อคลุมไว้หลายแถว แถวเมื่อพื้นที่ว่างลดลง
อ่านเพิ่มเติมเกี่ยวกับ Flexbox
เลย์เอาต์ตารางกริด CSS
เลย์เอาต์ตารางกริด CSS สร้างตารางกริดที่ยืดหยุ่น คุณสามารถปรับปรุงข้อมูลแบบลอยตัวก่อนหน้า
ตัวอย่างโดยใช้เลย์เอาต์แบบตารางกริดและหน่วย fr ซึ่งแสดงถึง
พื้นที่ว่างในคอนเทนเนอร์
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
คุณยังใช้เลย์เอาต์ตารางกริดเพื่อสร้างเลย์เอาต์แบบตารางกริดปกติโดยรองรับหลายรายการได้ด้วย
ตามความเหมาะสม จำนวนแทร็กที่ใช้ได้จะลดลงตามขนาดหน้าจอ
ลดลง เดโมต่อไปนี้แสดงตารางกริดที่มีการ์ดจํานวนเท่าที่พอดี
ในแต่ละแถวที่มีขนาดขั้นต่ำ 200px
อ่านเพิ่มเติมเกี่ยวกับเลย์เอาต์ตารางกริด CSS
เลย์เอาต์แบบหลายคอลัมน์
สำหรับเลย์เอาต์บางประเภท คุณสามารถใช้เลย์เอาต์แบบหลายคอลัมน์ (มัลติคอลัมน์) ได้
ซึ่งจะสร้างจำนวนคอลัมน์ที่ปรับเปลี่ยนตามอุปกรณ์ด้วยพร็อพเพอร์ตี้ column-width
ในการสาธิตต่อไปนี้ หน้านี้จะเพิ่มคอลัมน์เมื่อมี
สำหรับคอลัมน์ 200px อีกคอลัมน์หนึ่ง
อ่านเพิ่มเติมเกี่ยวกับ Multicol
ใช้คำค้นหาสื่อ CSS สำหรับการตอบสนอง
บางครั้งคุณอาจต้องเปลี่ยนแปลงเลย์เอาต์เพิ่มเติมเป็นวงกว้างเพื่อ รองรับหน้าจอบางขนาดเกินกว่าที่เทคนิคที่อธิบายไว้ก่อนหน้านี้อนุญาต นี่คือจุดที่การค้นหาสื่อมีประโยชน์
คำค้นหาสื่อเป็นตัวกรองง่ายๆ ที่คุณสามารถใช้กับรูปแบบ CSS เพื่อเปลี่ยน สไตล์ดังกล่าวตามประเภท ของอุปกรณ์ที่แสดงผลเนื้อหา นอกจากนี้ยังสามารถ เปลี่ยนการจัดรูปแบบตามฟีเจอร์ของอุปกรณ์ เช่น ความกว้าง ความสูง การวางแนว และใช้อุปกรณ์เป็นหน้าจอสัมผัสหรือไม่
หากต้องการกำหนดรูปแบบที่แตกต่างกันสำหรับการพิมพ์ คุณสามารถกำหนดเป้าหมายประเภทเอาต์พุตและ รวมสไตล์ชีตสำหรับรูปแบบการพิมพ์ ดังนี้
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
นอกจากนี้ คุณยังสามารถใช้คิวรี่สื่อเพื่อใส่รูปแบบการพิมพ์ในสไตล์ชีตหลักได้ด้วย ดังนี้
@media print {
/* print styles go here */
}
สำหรับการออกแบบเว็บที่ตอบสนองตามอุปกรณ์ ข้อความค้นหาที่พบบ่อยที่สุดก็คือฟีเจอร์ของอุปกรณ์ ดังนั้น คุณสามารถปรับแต่งเลย์เอาต์สำหรับหน้าจอสัมผัสหรือหน้าจอขนาดเล็กได้
คำค้นหาสื่อโดยพิจารณาจากขนาดวิวพอร์ต
คำค้นหาสื่อช่วยให้คุณสร้างประสบการณ์ที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งนำไปใช้ที่เฉพาะเจาะจง จัดรูปแบบให้เข้ากับขนาดหน้าจอที่เฉพาะเจาะจง คำค้นหาขนาดหน้าจอสามารถทดสอบ ดังต่อไปนี้:
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
คุณลักษณะเหล่านี้ทั้งหมดมีการสนับสนุนเบราว์เซอร์ที่ยอดเยี่ยม สำหรับรายละเอียดเพิ่มเติม รวมถึงข้อมูลการสนับสนุนเบราว์เซอร์ โปรดดู ความกว้าง height, การวางแนว และ สัดส่วนภาพ ใน MDN
การค้นหาสื่อตามความสามารถของอุปกรณ์
ความหลากหลายของอุปกรณ์ที่มีจำหน่าย นักพัฒนาซอฟต์แวร์จึงคาดเดาไม่ได้ อุปกรณ์ขนาดใหญ่ก็คือคอมพิวเตอร์เดสก์ท็อปหรือแล็ปท็อปทั่วไป หรือ อุปกรณ์ขนาดเล็ก ใช้หน้าจอสัมผัส ฟีเจอร์เพิ่มเติมใหม่ๆ ในคิวรี่สื่อ ทำให้คุณสามารถทดสอบคุณลักษณะต่างๆ เช่น ประเภทของตัวชี้ที่ใช้ในการ โต้ตอบกับอุปกรณ์และผู้ใช้สามารถชี้เมาส์ไปที่หรือไม่ จากองค์ประกอบเหล่านี้
hoverpointerany-hoverany-pointer
ลองดูการสาธิตนี้บนอุปกรณ์ต่างๆ เช่น คอมพิวเตอร์เดสก์ท็อปทั่วไปและโทรศัพท์หรือแท็บเล็ต
ฟีเจอร์ใหม่เหล่านี้มีการสนับสนุนที่ดีในเบราว์เซอร์รุ่นใหม่ทั้งหมด ดูข้อมูลเพิ่มเติมใน หน้า MDN สำหรับ Hover เมื่อเลื่อนเมาส์ผ่าน pointer และ เคอร์เซอร์ใดก็ได้
ใช้ any-hover และ any-pointer
ฟีเจอร์ any-hover และ any-pointer ทดสอบว่าผู้ใช้ถือตัวชี้ได้หรือไม่
วางไว้เหนือองค์ประกอบ (มักเรียกว่าการวางเมาส์) หรือใช้ตัวชี้เลยแม้ว่าจะ
ไม่ใช่วิธีหลักที่พวกเขาโต้ตอบกับอุปกรณ์ของตน โปรดระมัดระวังเมื่อใช้
เพื่อหลีกเลี่ยงการบังคับให้ผู้ใช้หน้าจอสัมผัสเปลี่ยนไปใช้เมาส์
อย่างไรก็ตาม any-hover และ any-pointer อาจมีประโยชน์หากจำเป็นต้อง
เพื่อดูว่าผู้ใช้มีอุปกรณ์ประเภทใด ตัวอย่างเช่น แล็ปท็อปที่มี
หน้าจอสัมผัสและแทร็กแพดควรตรงกับตัวชี้แบบหยาบและละเอียด นอกเหนือจาก
ให้สามารถวางเมาส์ได้
วิธีเลือกเบรกพอยท์
อย่ากำหนดเบรกพอยท์ตามคลาสของอุปกรณ์ หรือผลิตภัณฑ์ ชื่อแบรนด์ หรือ ระบบปฏิบัติการ เพราะทำให้ดูแลโค้ดได้ยาก แต่ให้ เนื้อหาจะเป็นตัวกำหนดว่าเลย์เอาต์จะเปลี่ยนแปลงไปอย่างไรเพื่อให้พอดีกับคอนเทนเนอร์
เลือกเบรกพอยท์หลักๆ โดยเริ่มจากจุดเล็กๆ แล้วค่อยๆ เริ่มทำงาน
ออกแบบเนื้อหาให้พอดีกับหน้าจอขนาดเล็กก่อน จากนั้นจึงขยายหน้าจอ จนกระทั่งจำเป็นต้องมีเบรกพอยท์ ซึ่งจะช่วยให้คุณลดจำนวน เบรกพอยท์บนหน้าเว็บและเพิ่มประสิทธิภาพตามเนื้อหา
ตัวอย่างต่อไปนี้จะแสดงตัวอย่างวิดเจ็ตพยากรณ์อากาศที่ ที่ส่วนต้นของหน้านี้ ขั้นตอนแรกคือ ทำให้การคาดการณ์ดูดีใน หน้าจอขนาดเล็ก
จากนั้น ให้ปรับขนาดเบราว์เซอร์จนกว่าจะมีช่องว่างระหว่างองค์ประกอบมากเกินไป
เพื่อให้วิดเจ็ตดูดี การตัดสินนี้ขึ้นอยู่กับแต่ละบุคคล แต่อาจมีมากกว่า 600px รายการ
ก็กว้างเกินไปอย่างแน่นอน
หากต้องการแทรกเบรกพอยท์ที่ 600px ให้สร้างคิวรี่สื่อ 2 รายการที่ตอนท้ายของ
CSS สำหรับคอมโพเนนต์: คีย์หนึ่งสำหรับใช้เมื่อเบราว์เซอร์มีขนาด 600px หรือแคบกว่า และ
ค่าหนึ่งเมื่อกว้างกว่า 600px
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
สุดท้าย เปลี่ยนโครงสร้างภายในโค้ด CSS ในคิวรี่สื่อสำหรับ max-width เป็น 600px
ให้เพิ่ม CSS ซึ่งมีไว้สำหรับหน้าจอขนาดเล็กเท่านั้น ในคิวรี่สื่อสำหรับ
min-width จาก 601px เพิ่ม CSS สำหรับหน้าจอขนาดใหญ่ขึ้น
เลือกเบรกพอยท์ย่อยๆ เมื่อจำเป็น
นอกจากการเลือกเบรกพอยท์หลักเมื่อเลย์เอาต์เปลี่ยนแปลงอย่างมากแล้ว การปรับตามการเปลี่ยนแปลงเล็กๆ น้อยๆ ก็ช่วยได้เช่นกัน เช่น ระหว่างอีเมลหลัก การปรับระยะขอบหรือระยะห่างจากขอบขององค์ประกอบนั้นอาจมีประโยชน์ หรือเพิ่มขนาดแบบอักษรเพื่อให้ดูเป็นธรรมชาติมากขึ้นในเลย์เอาต์
ตัวอย่างนี้มีรูปแบบเดียวกับรูปแบบก่อนหน้านี้ เริ่มต้นด้วย
การเพิ่มประสิทธิภาพเลย์เอาต์หน้าจอขนาดเล็ก ขั้นแรก เพิ่มขนาดอักษรเมื่อวิวพอร์ต
ความกว้างมากกว่า 360px หลังจากนั้น เมื่อมีพื้นที่เพียงพอ คุณจะ
แยกอุณหภูมิสูงสุดและต่ำสุดให้อยู่ในเส้นเดียวกัน แล้วทำให้
ไอคอนสภาพอากาศมีขนาดใหญ่ขึ้น
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
สำหรับหน้าจอขนาดใหญ่ เราขอแนะนำให้จำกัดความกว้างสูงสุดของแผงการคาดการณ์ จึงไม่ใช้ความกว้างของหน้าจอทั้งหมด
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
เพิ่มประสิทธิภาพข้อความเพื่อการอ่าน
ทฤษฎีความอ่านง่ายแบบดั้งเดิมแนะนำว่าคอลัมน์ที่เหมาะสมควรประกอบด้วย 70 ถึง 80 อักขระต่อบรรทัด (ประมาณ 8-10 คำเป็นภาษาอังกฤษ) โปรดพิจารณาเพิ่ม ทุกครั้งที่ความกว้างของบล็อคข้อความเกิน 10 คำโดยประมาณ
ในตัวอย่างนี้ แบบอักษร Roboto ที่ 1em จะสร้างคำ 10 คำต่อบรรทัด
หน้าจอเล็กกว่า แต่หน้าจอใหญ่ต้องใช้เบรกพอยท์ ในกรณีนี้ หาก
ความกว้างเบราว์เซอร์มากกว่า 575px ความกว้างของเนื้อหาที่เหมาะสมคือ 550px
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
หลีกเลี่ยงการซ่อนเนื้อหา (:#avoid-hiding-content)
โปรดระมัดระวังในการเลือกเนื้อหาที่จะซ่อนหรือแสดงโดยขึ้นอยู่กับขนาดหน้าจอ อย่าซ่อนเนื้อหาเพียงเพราะเนื้อหาพอดีกับหน้าจอไม่ได้ ขนาดหน้าจอ ไม่ได้คาดการณ์สิ่งที่ผู้ใช้อาจต้องการเห็น เช่น การนำเกสรดอกไม้ออก จำนวนจากพยากรณ์อากาศอาจเป็นปัญหาร้ายแรงสำหรับภูมิแพ้ช่วงฤดูใบไม้ผลิ ผู้ทุกข์ทรมานที่ต้องการข้อมูลดังกล่าวเพื่อตัดสินใจว่าจะออกไปข้างนอกหรือไม่
ดูเบรกพอยท์ของคำค้นหาสื่อในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
หลังจากตั้งค่าเบรกพอยท์ของคำค้นหาสื่อแล้ว ให้ตรวจสอบว่าเบรกพอยท์ของการค้นหาสื่อส่งผลต่อการเข้าชมของเว็บไซต์อย่างไร ปรากฏขึ้นมา คุณอาจปรับขนาดหน้าต่างเบราว์เซอร์ เพื่อทริกเกอร์เบรกพอยท์ แต่ Chrome DevTools มีฟีเจอร์ในตัวที่จะแสดงลักษณะของหน้าเว็บ เบรกพอยท์ต่างๆ
วิธีดูหน้าเว็บภายใต้เบรกพอยท์ต่างๆ
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- เปิดโหมดอุปกรณ์ การดำเนินการนี้จะเปิดในโหมดที่ปรับเปลี่ยนตามอุปกรณ์ โดยค่าเริ่มต้น
- หากต้องการดูการค้นหาสื่อ ให้เปิดเมนูโหมดอุปกรณ์และเลือก แสดงคิวรี่สื่อ ซึ่งจะแสดงเบรกพอยท์เป็นแถบสีด้านบนหน้าเว็บ
- คลิกที่แถบใดแถบหนึ่งเพื่อดูหน้าเว็บของคุณขณะที่คิวรี่สื่อนั้นทำงานอยู่ คลิกขวาที่แถบเพื่อข้ามไปยังคำจำกัดความของคำค้นหาสื่อนั้น