วิธีสร้างเว็บไซต์ที่ตอบสนองต่อความต้องการและความสามารถของอุปกรณ์ที่ผู้ใช้ดู
การใช้อุปกรณ์เคลื่อนที่เพื่อท่องเว็บเติบโตขึ้นเรื่อยๆ ในอัตราที่สูงมาก และอุปกรณ์เหล่านี้มักถูกจำกัดโดยขนาดการแสดงผลและต้องใช้วิธีการจัดการเนื้อหาบนหน้าจอที่แตกต่างออกไป
การออกแบบเว็บที่ตอบสนองตามอุปกรณ์ ซึ่งเดิมที Ethan Marcotte in A List Apart ได้กำหนดเอาไว้ จะตอบสนองต่อความต้องการของผู้ใช้และอุปกรณ์ที่พวกเขาใช้ เลย์เอาต์จะเปลี่ยนไปตามขนาดและความสามารถของอุปกรณ์ ตัวอย่างเช่น ในโทรศัพท์ ผู้ใช้จะเห็นเนื้อหาที่แสดงในมุมมองคอลัมน์เดียว แท็บเล็ตอาจแสดงเนื้อหาเดียวกันใน 2 คอลัมน์
โทรศัพท์, "แฟบเล็ต", แท็บเล็ต, เดสก์ท็อป, คอนโซลเกม, ทีวี และแม้แต่อุปกรณ์ที่สวมใส่ได้ก็มีอยู่หลากหลายขนาด ขนาดหน้าจอมีการเปลี่ยนแปลงอยู่เสมอ เว็บไซต์ของคุณจึงควรปรับตามขนาดหน้าจอต่างๆ ตั้งแต่วันนี้หรือในอนาคต นอกจากนี้ อุปกรณ์ก็มีฟีเจอร์ต่างๆ ที่เราโต้ตอบด้วย เช่น ผู้เข้าชมบางส่วนจะใช้หน้าจอสัมผัส การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ในสไตล์โมเดิร์นจะพิจารณาทุกปัจจัยดังกล่าวเพื่อเพิ่มประสิทธิภาพประสบการณ์การใช้งานสำหรับทุกคน
ตั้งค่าวิวพอร์ต
หน้าเว็บที่เพิ่มประสิทธิภาพสำหรับอุปกรณ์ที่หลากหลายต้องมีแท็กวิวพอร์ตเมตาในส่วนหัวของเอกสาร แท็กวิวพอร์ตเมตาให้คำแนะนำเบราว์เซอร์เกี่ยวกับวิธีควบคุมมิติข้อมูลและการปรับขนาดของหน้าเว็บ
เบราว์เซอร์ในอุปกรณ์เคลื่อนที่จะแสดงผลหน้าเว็บโดยใช้ความกว้างของหน้าจอเดสก์ท็อป (โดยปกติประมาณ 980px แล้วแต่อุปกรณ์จะแตกต่างกันไป) จากนั้นพยายามทำให้เนื้อหาดูดีขึ้นโดยเพิ่มขนาดแบบอักษรและปรับขนาดเนื้อหาให้พอดีกับหน้าจอ เพื่อมอบประสบการณ์ที่ดีที่สุด
ซึ่งหมายความว่าขนาดแบบอักษรอาจแสดงไม่สอดคล้องกันแก่ผู้ใช้ ซึ่งอาจต้องแตะสองครั้งหรือบีบนิ้วเพื่อซูมเพื่อดูและโต้ตอบกับเนื้อหา
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
การใช้ค่าวิวพอร์ตเมตา width=device-width จะสั่งให้หน้าเว็บจับคู่ความกว้างของหน้าจอเป็นพิกเซลที่ไม่ขึ้นอยู่กับอุปกรณ์ พิกเซลอิสระของอุปกรณ์ (หรือความหนาแน่น) ซึ่งเป็นการนำเสนอหนึ่งพิกเซลซึ่งอาจประกอบด้วยพิกเซลจริงจำนวนมากบนหน้าจอที่มีความหนาแน่นสูง วิธีนี้ช่วยให้หน้าเว็บปรับเปลี่ยนเนื้อหาให้ตรงกับหน้าจอขนาดต่างๆ ได้ ไม่ว่าจะแสดงผลในโทรศัพท์มือถือขนาดเล็กหรือในจอเดสก์ท็อปขนาดใหญ่
บางเบราว์เซอร์
ทำให้ความกว้างของหน้าเว็บคงที่เมื่อหมุนเป็นโหมดแนวนอน
และต้องซูมแทนที่จะซูมเพื่อให้เต็มหน้าจอ การเพิ่มค่า
initial-scale=1 จะสั่งให้เบราว์เซอร์สร้างความสัมพันธ์แบบ 1:1 ระหว่างพิกเซล CSS และพิกเซลที่ขึ้นอยู่กับอุปกรณ์โดยไม่คำนึงถึงการวางแนวของอุปกรณ์และ
ช่วยให้หน้าเว็บใช้ประโยชน์จากความกว้างแนวนอนแบบเต็มได้
ไม่มีแท็ก <meta name="viewport"> ที่มี width หรือ initial-scale
การตรวจสอบ Lighthouse ช่วยให้กระบวนการทำงานโดยอัตโนมัติเพื่อให้มั่นใจว่าเอกสาร HTML ใช้เมตาแท็กวิวพอร์ตอย่างถูกต้อง
ตรวจสอบว่ามีวิวพอร์ตที่เข้าถึงได้
นอกจากการตั้งค่า initial-scale แล้ว คุณยังตั้งค่าแอตทริบิวต์ต่อไปนี้ในวิวพอร์ตได้ด้วย
minimum-scalemaximum-scaleuser-scalable
เมื่อตั้งค่าไว้อาจทำให้ผู้ใช้ไม่สามารถซูมวิวพอร์ตได้ ซึ่งอาจก่อให้เกิดปัญหาด้านการเข้าถึง เราจึงไม่แนะนําให้ใช้แอตทริบิวต์เหล่านี้
กำหนดขนาดเนื้อหาให้อยู่ในวิวพอร์ต
ทั้งบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ ผู้ใช้มักคุ้นเคยกับการเลื่อนเว็บไซต์ในแนวตั้งแต่ไม่ใช่แนวนอน การบังคับให้ผู้ใช้เลื่อนในแนวนอนหรือซูมออกเพื่อดูหน้าเว็บทั้งหน้าทำให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี
เมื่อพัฒนาเว็บไซต์ในอุปกรณ์เคลื่อนที่ด้วยเมตาแท็กวิวพอร์ต ก็เป็นเรื่องง่ายที่จะสร้างเนื้อหาในหน้าที่ไม่พอดีกับวิวพอร์ตที่ระบุโดยไม่ตั้งใจ เช่น รูปภาพที่แสดงที่ความกว้างกว้างกว่าวิวพอร์ตอาจทำให้วิวพอร์ตเลื่อนในแนวนอน คุณควรปรับเนื้อหานี้ให้พอดีกับความกว้างของวิวพอร์ตเพื่อให้ผู้ใช้ไม่ต้องเลื่อนในแนวนอน
ไม่ได้กำหนดขนาดเนื้อหาอย่างถูกต้องสำหรับวิวพอร์ต การตรวจสอบของ Lighthouse ช่วยให้กระบวนการตรวจหาเนื้อหาที่ล้นเป็นระบบอัตโนมัติได้
รูปภาพ
รูปภาพมีขนาดคงที่และหากมีขนาดใหญ่กว่าวิวพอร์ตจะทำให้แถบเลื่อน
วิธีทั่วไปในการจัดการกับปัญหานี้คือให้รูปภาพทั้งหมดมีค่าเป็น max-width เท่ากับ 100%
ซึ่งจะทำให้รูปภาพย่อให้พอดีกับพื้นที่ที่มี หากขนาดวิวพอร์ตเล็กกว่ารูปภาพ
แต่เนื่องจาก max-width แทนที่จะเป็น width คือ 100% รูปภาพจะไม่ขยายใหญ่ขึ้นกว่าขนาดตามธรรมชาติ
โดยทั่วไปแล้ว คุณสามารถเพิ่มสิ่งต่อไปนี้ลงในสไตล์ชีตได้อย่างปลอดภัย เพื่อไม่ให้เกิดปัญหาเกี่ยวกับรูปภาพที่ทำให้เกิดแถบเลื่อน
img {
max-width: 100%;
display: block;
}
เพิ่มขนาดของรูปภาพลงในองค์ประกอบรูปภาพ
เมื่อใช้ max-width: 100% คุณจะลบล้างขนาดตามธรรมชาติของรูปภาพ แต่คุณควรใช้แอตทริบิวต์ width และ height ในแท็ก <img> ได้
ทั้งนี้เนื่องจากเบราว์เซอร์ที่ทันสมัยจะใช้ข้อมูลนี้เพื่อสงวนพื้นที่สำหรับรูปภาพก่อนที่จะโหลด ซึ่งจะช่วยหลีกเลี่ยงการเปลี่ยนแปลงของเลย์เอาต์เมื่อเนื้อหาโหลด
เลย์เอาต์
เนื่องจากขนาดและความกว้างของหน้าจอในพิกเซล CSS แตกต่างกันอย่างมากระหว่างอุปกรณ์ (เช่น ระหว่างโทรศัพท์และแท็บเล็ต หรือแม้กระทั่งระหว่างโทรศัพท์คนละเครื่อง) เนื้อหาจึงไม่ควรอาศัยความกว้างของวิวพอร์ตที่เจาะจงเพื่อให้แสดงผลได้ดี
ในอดีต องค์ประกอบการตั้งค่าที่จำเป็นนี้จะใช้เพื่อสร้างเลย์เอาต์เป็นเปอร์เซ็นต์ ในตัวอย่างด้านล่าง คุณจะเห็นเลย์เอาต์ 2 คอลัมน์ซึ่งมีองค์ประกอบแบบลอย ซึ่งปรับขนาดโดยใช้พิกเซล เมื่อวิวพอร์ตมีขนาดเล็กกว่าความกว้างรวมของคอลัมน์ เราต้องเลื่อนในแนวนอนเพื่อดูเนื้อหา
การใช้เปอร์เซ็นต์สำหรับความกว้างจะทำให้คอลัมน์ยังคงมีเปอร์เซ็นต์เท่ากับคอนเทนเนอร์เสมอ ซึ่งหมายความว่าคอลัมน์จะแคบลงแทนที่จะสร้างแถบเลื่อน
เทคนิคการจัดวาง CSS สมัยใหม่ เช่น Flexbox, Grid Layout และ Multicol ทำให้การสร้างตารางกริดที่ยืดหยุ่นเหล่านี้ทำได้ง่ายขึ้นมาก
เฟล็กซ์บ็อกซ์
วิธีเลย์เอาต์นี้เหมาะอย่างยิ่งเมื่อคุณมีชุดสินค้าขนาดต่างๆ และต้องการให้จัดแถวหรือแถวได้สบายๆ โดยสินค้าขนาดเล็กจะกินพื้นที่น้อยกว่า ส่วนสินค้าขนาดใหญ่จะมีพื้นที่มากกว่า
.items {
display: flex;
justify-content: space-between;
}
ในการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ คุณจะใช้ Flexbox เพื่อแสดงรายการเป็นแถวเดียวหรือรวมไว้ในหลายแถวเมื่อพื้นที่ว่างลดลง
อ่านเพิ่มเติมเกี่ยวกับ Flexbox
เลย์เอาต์ตารางกริด CSS
เลย์เอาต์ตารางกริด CSS ช่วยให้สร้างตารางกริดที่ยืดหยุ่นได้ง่ายๆ
หากเราพิจารณาตัวอย่างแบบลอยตัวก่อนหน้านี้ แทนที่จะสร้างคอลัมน์ที่มีเปอร์เซ็นต์ เราอาจใช้เลย์เอาต์แบบตารางกริดและหน่วย fr ซึ่งแสดงถึงพื้นที่ว่างส่วนหนึ่งในคอนเทนเนอร์
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
นอกจากนี้ยังสามารถใช้ตารางกริดเพื่อสร้างเลย์เอาต์แบบตารางปกติซึ่งมีรายการจำนวนเท่าใดก็ได้
จำนวนแทร็กที่ใช้ได้จะลดลงเมื่อหน้าจอลดขนาดลง
ในการสาธิตด้านล่าง เรามีการ์ดจำนวนมากที่สุดเท่าที่จะพอดีกับแต่ละแถว โดยมีขนาดขั้นต่ำ 200px
อ่านเพิ่มเติมเกี่ยวกับเลย์เอาต์ตารางกริดของ CSS
เลย์เอาต์หลายคอลัมน์
สำหรับเลย์เอาต์บางประเภท คุณสามารถใช้เลย์เอาต์หลายคอลัมน์ (Multicol) ได้ ซึ่งจะสร้างจำนวนคอลัมน์ที่ปรับเปลี่ยนตามอุปกรณ์ได้ด้วยพร็อพเพอร์ตี้ 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
ฟีเจอร์เหล่านี้ทั้งหมดรองรับเบราว์เซอร์ได้อย่างดีเยี่ยม สำหรับรายละเอียดเพิ่มเติมรวมถึงข้อมูลการรองรับเบราว์เซอร์ โปรดดู ความกว้าง ความสูง การวางแนว และ อัตราส่วนใน MDN
การค้นหาสื่อตามความสามารถของอุปกรณ์
เนื่องจากมีอุปกรณ์ให้เลือกหลากหลาย เราจึงคาดเดาไม่ได้ว่าอุปกรณ์ขนาดใหญ่ทุกเครื่องเป็นคอมพิวเตอร์เดสก์ท็อปหรือแล็ปท็อปทั่วไป หรือว่าผู้คนใช้เพียงหน้าจอสัมผัสในอุปกรณ์ขนาดเล็ก เมื่อมีสิ่งใหม่ๆ เพิ่มเข้ามาในข้อกำหนดคำค้นหาสื่อ เราสามารถทดสอบฟีเจอร์ต่างๆ ได้ เช่น ประเภทของตัวชี้ที่ใช้โต้ตอบกับอุปกรณ์ และผู้ใช้สามารถวางเมาส์เหนือองค์ประกอบได้หรือไม่
hoverpointerany-hoverany-pointer
ลองดูการสาธิตนี้บนอุปกรณ์อื่นๆ เช่น คอมพิวเตอร์เดสก์ท็อปทั่วไปและโทรศัพท์หรือแท็บเล็ต
ฟีเจอร์ใหม่เหล่านี้มีการสนับสนุนที่ดีในเบราว์เซอร์รุ่นใหม่ทั้งหมด ดูข้อมูลเพิ่มเติมเกี่ยวกับหน้า MDN สำหรับhover วางเมาส์ ตัวชี้ ตัวชี้แบบใดก็ได้
กำลังใช้ 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 กัน
ประการที่ 2 เมื่อมีพื้นที่เพียงพอ เราสามารถแยกอุณหภูมิสูงและต่ำเพื่อให้อุณหภูมิอยู่ในบรรทัดเดียวกันแทนที่จะแสดง 2 อุณหภูมิซ้อนกัน
และทำให้ไอคอนสภาพอากาศมีขนาดใหญ่ขึ้นเล็กน้อย
@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;
}
}
หลีกเลี่ยงการซ่อนเนื้อหาเพียงอย่างเดียว
ระมัดระวังในการเลือกเนื้อหาที่จะซ่อนหรือแสดงโดยขึ้นอยู่กับขนาดหน้าจอ อย่าเพียงแค่ซ่อนเนื้อหาเพียงเพราะคุณไม่สามารถแสดงเนื้อหาได้พอดีกับหน้าจอ ขนาดหน้าจอไม่ใช่ตัวบ่งชี้ที่ชัดเจนถึงสิ่งที่ผู้ใช้อาจต้องการ เช่น การกำจัดละอองเกสรดอกไม้ออกจากพยากรณ์อากาศอาจเป็นปัญหาร้ายแรงสำหรับผู้ป่วยภูมิแพ้ช่วงฤดูใบไม้ผลิที่ต้องการข้อมูลเพื่อพิจารณาว่าตนสามารถออกไปข้างนอกได้หรือไม่
ดูเบรกพอยท์ของคำค้นหาสื่อในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
เมื่อตั้งค่าเบรกพอยท์คำค้นหาสื่อแล้ว คุณจะต้องดูว่าเว็บไซต์มีลักษณะอย่างไร คุณอาจปรับขนาดหน้าต่างเบราว์เซอร์เพื่อทริกเกอร์เบรกพอยท์ แต่ Chrome DevTools มีฟีเจอร์ในตัวที่ให้คุณดูลักษณะของหน้าเว็บในเบรกพอยท์ต่างๆ ได้ง่ายๆ
วิธีดูหน้าเว็บในเบรกพอยท์ต่างๆ
เปิดเครื่องมือสำหรับนักพัฒนาเว็บ แล้วเปิดโหมดอุปกรณ์ การดำเนินการนี้จะเปิดในโหมดปรับเปลี่ยนตามอุปกรณ์โดยค่าเริ่มต้น
หากต้องการดูคำค้นหาสื่อ ให้เปิดเมนูโหมดอุปกรณ์และเลือก แสดงคำค้นหาสื่อ เพื่อแสดงเบรกพอยท์เป็นแถบสีเหนือหน้าเว็บ
คลิกที่แถบใดแถบหนึ่งเพื่อดูหน้าเว็บของคุณขณะที่คำค้นหาสื่อนั้นทำงานอยู่ คลิกขวาที่แถบเพื่อไปยังคําจํากัดความของคิวรี่สื่อ