การออกแบบเพื่อมือถือเป็นอันดับแรกหมายถึงการสร้างเว็บไซต์สำหรับมือถือก่อน จากนั้นจึงใช้คิวรีสื่อ CSS เพื่อควบคุมลักษณะที่เว็บไซต์ของคุณควรแสดงบนหน้าจอขนาดที่ใหญ่ขึ้น ตั้งแต่แท็บเล็ตไปจนถึงเดสก์ท็อป กล่าวคือ คุณใช้คิวรี่สื่อเพื่อทำให้เว็บไซต์ของคุณตอบสนอง (ปรับให้เข้ากับหน้าจอขนาดต่างๆ)
เมื่อเราใช้คิวรี่สื่อ เราจะเรียกพวกเขาว่าเบรกพอยต์ ดังนั้น หากคุณตัดสินใจว่าเลย์เอาต์ของเว็บไซต์ของคุณควรเปลี่ยนจากการเป็นแบบสำหรับมือถือเป็นเลย์เอาต์แท็บเล็ตที่ความกว้างหน้าจอ 800px ให้สร้างคิวรี่สื่อดังนี้
@media screen and (min-width: 800px) {
/* Add Tablet styles here */
}และตอนนี้ 800px คือเบรกพอยต์แรกของคุณ
สมมติว่าเราตัดสินใจว่าเบรกพอยต์เดสก์ท็อปควรเป็น 1200px ดังนี้:
@media screen and (min-width: 1200px) {
/* Add Desktop styles here */
}นั่นคือเบรกพอยต์ที่ 2 ของคุณ ตอนนี้คุณมีเบรกพอยต์ทั้งหมดสองจุด
ต่อไปนี้คือตัวอย่างคร่าวๆ ของเลย์เอาต์โดยใช้โมเดลเบรกพอยต์ที่แสดงด้านบน:
https://codepen.io/StrengthandFreedom/pen/abzywPd
อย่างที่คุณเห็น ตอนนี้เรามีช่วงขนาดหน้าจอที่แตกต่างกันสามช่วงในการทำงานระหว่าง มือถือ:0-800px แท็บเล็ต:800-1200px เดสก์ท็อป:1200 ขึ้นไป ซึ่งทำให้เราต้องสร้างเบรกพอยต์ทั้งหมดสองจุดด้วย CSS Media แบบสอบถาม
ตัวอย่างข้างต้นเป็นเพียงตัวอย่างง่ายๆ แต่ควรเข้าใจประเด็นทั้งหมด คุณปรับเปลี่ยนทุกอย่างได้ระหว่างเบรกพอยต์ ตั้งแต่ขนาดแบบอักษรไปจนถึงความกว้างของเลย์เอาต์
จะเกิดอะไรขึ้นถ้าคุณต้องการมากกว่า 2 เบรกพอยต์
บางสถานการณ์เรียกร้องให้มีแนวทางที่ละเอียดยิ่งขึ้น โดยที่คุณทำได้เหนือกว่าโดยใช้จุดพักสองสามจุด ฉันเคยเห็นบางเว็บไซต์ใช้มากถึง 10 โดยใช้เบรกพอยต์ทุกๆ 100 ถึง 200px หรือมากกว่านั้น
นั่นอาจเป็นการหักโหมสำหรับกรณีการใช้งานส่วนใหญ่
จำนวนเบรกพอยต์ในอุดมคติสำหรับเว็บไซต์คือเท่าใด
ไม่มี คุณควรให้บริบทเป็นแนวทางในการตัดสินใจของคุณ ยิ่งเว็บไซต์ของคุณมีความซับซ้อนมากเท่าใด ก็ยิ่งต้องมีเบรกพอยต์มากขึ้นเพื่อทำให้เว็บไซต์ของคุณสามารถแสดงบนอุปกรณ์/ขนาดหน้าจอที่สำคัญทั้งหมดที่กลุ่มเป้าหมายของคุณใช้
ตามหลักการทั่วไป เว็บไซต์ทั่วไปต้องการเบรกพอยต์ 2 ถึง 4 จุดเพื่อครอบคลุมฐานส่วนใหญ่ จากประสบการณ์ของฉัน ฉันมักจะไปกับ 4
คุณเห็นตัวอย่างการใช้เบรกพอยท์ 2 อันแล้ว ทีนี้มาดูอีกตัวอย่างที่เราใช้ 4 กัน
เลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์พร้อมเบรกพอยต์ 4 จุด
ใช้เค้าโครงบทความเดียวกันจากด้านบน มาเพิ่มจุดสั่งหยุดพิเศษสองสามจุดเพื่อให้เราควบคุมได้มากขึ้น ฉันคิดว่าการกระโดดจาก 0 เป็น 800px บนมือถือนั้นใหญ่ไปหน่อย คุณจะสังเกตเห็นว่าโดยเฉพาะอย่างยิ่งในโหมดแนวนอนบนอุปกรณ์พกพา วิธีนี้อาจไม่ได้ผลเสมอไป
เหตุผลก็คือแม้ว่าขนาดตัวอักษรที่เราใช้ทำงานได้ดีในอุปกรณ์พกพาขนาดใหญ่ แต่ h1 (พาดหัว) ก็ค่อนข้างแรงไปหน่อย ในเวลาเดียวกัน ความกว้างของเนื้อหาจะกว้างเกินไปเล็กน้อยเมื่อเราอยู่เหนือจุดความกว้าง 500px ซึ่งทำให้การวัดของเรา (ความยาวบรรทัด) ยาวเกินไป และไม่เป็นมิตรกับผู้อ่าน โดยมีอักขระต่อบรรทัดมากเกินไป ตามหลักการแล้ว เพื่อการอ่านที่ดีที่สุด เราต้องการให้ความยาวบรรทัดของเราอยู่ที่ประมาณ 40 ถึง 80 อักขระต่อบรรทัด
เพื่อแก้ปัญหานี้ ให้เพิ่มเบรกพอยต์แรกที่ 480px แล้วแทนที่จะใช้ 1200px เป็นเบรกพอยต์บนเดสก์ท็อปและอัพ เรามาเพิ่มอีกอันที่ 1900px (สำหรับหน้าจอขนาดใหญ่จริงๆ)
ตรวจสอบการสาธิตเบรกพอยต์ 4 รายการที่นี่:
https://codepen.io/StrengthandFreedom/pen/mdyMMeL
หากคุณปรับขนาดหน้าต่างเบราว์เซอร์ คุณจะเห็นว่าเมื่อเทียบกับตัวอย่างเบรกพอยต์ 2 รายการ การพิมพ์ของเราจะปรับขนาดขึ้นและลง (ปรับ) ได้อย่างสวยงามยิ่งขึ้นด้วยเลย์เอาต์ 4 เบรกพอยต์ นั่นเป็นเพราะว่าเบรกพอยต์เพิ่มเติมระหว่างอุปกรณ์เคลื่อนที่และแท็บเล็ตทำให้เราควบคุมความกว้างของเนื้อหา ระยะห่าง (ช่องว่างภายใน/ระยะขอบ) และขนาดตัวอักษรได้แม่นยำยิ่งขึ้น
เบรกพอยต์ 1900px จะมีประโยชน์หากคุณออกแบบสำหรับหน้าจอขนาดใหญ่จริงๆ เช่น จอภาพภายนอก ซึ่งผู้คนใช้กันมากขึ้นเรื่อยๆ ในปัจจุบัน ดังนั้นจึงไม่ควรมองข้าม
คุณสามารถใช้เบรกพอยต์เพียงจุดเดียวบนเว็บไซต์ได้ไหม ?
ฉันชอบที่จะทำให้สิ่งต่าง ๆ เรียบง่าย ยิ่งชิ้นส่วนที่เคลื่อนไหวในระบบน้อยเท่าไร ก็ยิ่งบำรุงรักษาง่ายเท่านั้น อย่างไรก็ตาม การสร้างเลย์เอาต์นั้นเรียบง่ายมีขีดจำกัด
นักออกแบบและนักพัฒนาบางคนใช้เบรกพอยต์เพียงจุดเดียวสำหรับทั้งเว็บไซต์ เบรกพอยต์หนึ่งจุดหมายความว่าพวกเขาใช้:
- รูปแบบมือถือ
- รูปแบบเดสก์ท็อป
โดยทั่วไปแล้ว จุดสั่งหยุดหนึ่งจุดจะถูกกำหนดไว้ในช่วงความกว้างของหน้าจอ 600-960px
ตอนนี้ นั่นคือ มองโลกในแง่ดีเล็กน้อยสำหรับยุคปัจจุบัน ซึ่งเราต้องออกแบบสำหรับขนาดหน้าจอและประเภทอุปกรณ์ต่างๆ มากมาย
หากคุณสนใจที่จะมอบประสบการณ์การใช้งานที่ดีให้กับผู้ใช้ในวงกว้าง (ด้วยอุปกรณ์/ขนาดหน้าจอที่แตกต่างกัน) คุณมักจะต้องมีเบรกพอยต์มากกว่าหนึ่งจุด
พูดซ้ำสิ่งที่ฉันพูดไปก่อนหน้านี้:ให้บริบทเป็นตัวกำหนดการออกแบบของคุณ
