วิธีใช้เบรกพอยต์ CSS เพื่อสร้างการออกแบบที่ตอบสนอง

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

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

มาเริ่มกันเลย!

เบรกพอยต์ CSS คืออะไร

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

เบรกพอยต์ CSS เรียกอีกอย่างว่าเบรกพอยต์คิวรีสื่อ เนื่องจากใช้กับคิวรีสื่อ

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

วิธีตั้งค่าเบรกพอยต์ CSS

ส่วนที่ยากคือการตัดสินใจเบรกพอยต์ด้วยตัวเอง ไม่มีเทมเพลตมาตรฐานใดๆ และเฟรมเวิร์กต่างๆ ใช้เบรกพอยต์ต่างกัน

คุณควรใช้แนวทางใดสำหรับเบรกพอยต์ของคุณ

มีความเป็นไปได้สองแนวทางที่จะปฏิบัติตาม:

• เบรกพอยต์ตามอุปกรณ์
• เบรกพอยต์ตามเนื้อหา

จุดพัก CSS ตามอุปกรณ์

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

อย่างไรก็ตาม มันยังคงเป็นตัวเลือกที่ใช้งานได้ เนื่องจากคุณอาจพบว่ามันใช้ได้ผลสำหรับคุณ ต่อไปนี้คือตัวอย่างเบรกพอยต์เฉพาะอุปกรณ์:

 [css]/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- Google Pixel ----------- */ /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }[/css]

ด้วยวิธีการนี้ คุณจะมีรายการค้นหาสื่อจำนวนมาก

จุดพัก CSS ตามเนื้อหา

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

เบรกพอยต์นี้หมายความว่า CSS จะใช้เมื่อความกว้างของอุปกรณ์เป็น 768px ขึ้นไป

 [css]@media only screen (min-width: 768px){ ... }[/css]

คุณยังสามารถตั้งค่าช่วงด้วยเบรกพอยต์ ดังนั้น CSS จะใช้ภายในขีดจำกัดเหล่านั้นเท่านั้น

 [css]@media only screen and (min-width: 768px) and (max-width: 959px){ ... }[/css]

เมื่อใดควรใช้เบรกพอยต์ CSS ขั้นต่ำหรือความกว้างสูงสุด

คุณสามารถตั้งค่าเบรกพอยต์ได้หลายวิธีโดยใช้ min-width , max-width หรือแม้แต่การรวมทั้งสองอย่างเข้าด้วยกัน แต่คำถามคือ คุณควรใช้แต่ละอันเมื่อใด

ในการตอบแบบง่ายๆ หากคุณกำลังออกแบบเลย์เอาต์ด้วยวิธีที่เน้นอุปกรณ์เคลื่อนที่เป็นอันดับแรก ให้ใช้เบรกพอยต์ที่มีความกว้างต่ำสุดและค่อยๆ ไต่ระดับขึ้นไป

ตั้งค่ารูปแบบเริ่มต้นสำหรับอุปกรณ์ขนาดเล็กและปรับให้เหมาะกับอุปกรณ์ขนาดใหญ่ขึ้นตามลำดับ

ในทำนองเดียวกัน หากคุณกำลังออกแบบสำหรับอุปกรณ์ขนาดใหญ่ขึ้นก่อน ให้ตั้งค่า CSS เริ่มต้นตามปกติและปรับสำหรับอุปกรณ์ขนาดเล็กลงด้วยวิธีความกว้างสูงสุด

การใช้เบรกพอยต์ CSS กับ SASS

หากคุณกำลังใช้ตัวประมวลผลล่วงหน้า เช่น SASS หรือ SCSS คุณสามารถเขียนเบรกพอยต์ที่ชาญฉลาดยิ่งขึ้นได้ Mixin ช่วยให้คุณสร้างเบรกพอยท์ที่ประกาศชัดเจนมากขึ้นเพื่อจดจำ เช่นนี้:

 [css]@mixin tablet-up { @media only screen (min-width: 768px) { @content; } }[/css]

ขณะทำงานเป็นกลุ่ม จำ "แท็บเล็ต" ได้ง่ายกว่า 768px หรือ 48em มาก ทุกคนสามารถเข้าใจเบรกพอยต์นี้ได้ สำหรับแท็บเล็ตและขนาดหน้าจอที่สูงกว่า

เบรกพอยต์ CSS ใดที่จะใช้

เราได้เห็นวิธีการใช้เบรกพอยต์แล้วและเมื่อใดจึงจะใช้เบรกพอยต์ แต่คำถามยังคงอยู่: คุณควรใช้เบรกพอยต์เฉพาะแบบใด

มาทำลายสิ่งต่าง ๆ เล็กน้อย คุณต้องกำหนดเป้าหมายขนาดเดสก์ท็อป แท็บเล็ต และมือถือเท่านั้น คุณสามารถตรวจสอบเฟรมเวิร์กยอดนิยมบางรายการเพื่อรับทราบว่าควรปฏิบัติตามแนวทางใด

Bootstrap มีเบรกพอยต์ที่ 576px, 768px, 992px และ 1200px มูลนิธิส่วนใหญ่มีจุดพัก 40em และ 64em ที่ Bulma เบรกพอยต์ถูกกำหนดไว้ที่ 768px, 769px, 1024px, 1216px และ 1408px

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

 [css]@media (min-width: 640px){ ... } @media (min-width: 768px){ ... } @media (min-width: 1024px){ ... } @media (min-width: 1200px){ ... }[/css]

คุณได้รับความคิด!

ห่อ

โดยสรุป เบรกพอยต์ CSS เป็นวิธีที่ยอดเยี่ยมในการปรับโครงสร้างเลย์เอาต์ของคุณเพื่อมอบประสบการณ์การใช้งานที่ดีที่สุดในอุปกรณ์ต่างๆ

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

คุณใช้เบรกพอยต์ CSS ใดสำหรับเลย์เอาต์ของคุณ โปรดแจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง

อะไรต่อไป?

สร้างและทดสอบบล็อก Gutenberg ที่คุณกำหนดเองด้วย Local ฟรี!

เรียนรู้เพิ่มเติมเกี่ยวกับท้องถิ่นที่นี่!

สำหรับคำแนะนำเพิ่มเติมเกี่ยวกับการสร้างไซต์ที่ตอบสนอง โปรดดูบทความเหล่านี้

• วิธีทำให้ไซต์ WordPress ของคุณเหมาะกับอุปกรณ์เคลื่อนที่
• วิธีสร้างเมนูการนำทางที่ตอบสนองใน WordPress
• เคล็ดลับการปฏิบัติที่ดีที่สุด 7 ข้อสำหรับการออกแบบเว็บแบบตอบสนอง