แคลมป์ () คืออะไรใน CSS (และวิธีการใช้งาน)

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

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

ในโพสต์นี้เราจะอธิบายว่า Clamp () ทำงานอย่างไรทำไมมันถึงมีประสิทธิภาพมากกว่าการสืบค้นสื่อและวิธีการที่ Divi 5 ให้คุณใช้งานโดยไม่ต้องเขียนรหัสบรรทัดเดียว!

แคลมป์คืออะไร ()

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

มาทำความเข้าใจกับตัวอย่างของขนาดตัวอักษรของเหลวที่เพิ่มขึ้น/ลดลงตามขนาดหน้าจอ

font-size: clamp(40px, 7vw, 100px);

ที่นี่ขนาดตัวอักษรจะไม่ต่ำกว่า 40px สเกลตาม 7% ของความกว้างของวิวพอร์ตและหยุดเติบโตเมื่อถึง 100px

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

เราหมายถึงอะไร? มาทำความเข้าใจกับสิ่งนี้โดยเปรียบเทียบแคลมป์ () กับการสืบค้นสื่อ

การเปรียบเทียบแคลมป์ () และการสืบค้นสื่อ

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

วิธีนี้ใช้งานได้ แต่ไม่ใช่ของเหลว ระหว่าง 1,000px และ 501px ขนาดตัวอักษรจะล็อคที่ 100px ช่วงเวลาที่หน้าจอถึง 500px ตัวอักษรจะลดลงอย่างกะทันหันเป็น 30px ซึ่งหมายความว่าไม่มีการเปลี่ยนแปลงที่ราบรื่นมีเพียงการเปลี่ยนแปลงที่คมชัด

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

ในทางตรงกันข้ามแคลมป์ () ช่วยให้คุณประหยัดจากการเปลี่ยนผ่านอย่างฉับพลันและรหัสที่ยาว ในความเป็นจริงมันสามารถเขียนเป็นบรรทัดเดียว: ขนาดตัวอักษร: แคลมป์ (30px, 7VW, 100px)

สิ่งนี้บอกให้เบราว์เซอร์ปรับขนาดแบบอักษรระหว่าง 30px และ 100px ตาม 7 เปอร์เซ็นต์ของความกว้างของวิวพอร์ต ขนาดตัวอักษรปรับอย่างคล่องแคล่วในทุกขนาดหน้าจอโดยไม่ต้องกระโดดอย่างฉับพลันหรือจำเป็นต้องมีจุดพักหลายจุด คุณยังคงกำหนดขีด จำกัด แต่การปรับขนาดระหว่างนั้นเป็นไปโดยอัตโนมัติและสอดคล้องกันมากขึ้น

ในการแสดงสดนี่คือวิธีการเปรียบเทียบระหว่างตัวอักษรที่ปรับขนาดของการสืบค้นสื่อและตัวหนีบ () ดู: ดู:

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

clamp () ทำงานอย่างไรเบื้องหลัง

Clamp () ใช้ค่าสามค่าที่ทำงานร่วมกันเพื่อขยายคุณสมบัติ CSS ใด ๆ :

 clamp(minimum, preferred, maximum) 

แต่ละส่วนของฟังก์ชั่นมีบทบาทเฉพาะ:

• ค่าต่ำสุด: ค่าต่ำสุดที่เป็นไปได้ องค์ประกอบจะไม่ปรับขนาดต่ำกว่าจุดนี้ไม่ว่าหน้าจอจะเล็กแค่ไหน
• ค่าที่ต้องการ: ค่านี้ปรับขนาดตามขนาดหน้าจอ มันมักจะตั้งค่าโดยใช้หน่วยสัมพัทธ์เช่น VW หรือการแสดงออกของ CALC () เพื่อให้ความลื่นไหลฟรี
• ค่าสูงสุด: ขนาดที่ได้รับอนุญาตสูงสุด แม้บนหน้าจอที่มีขนาดใหญ่มากองค์ประกอบจะไม่เกินค่านี้

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

สิ่งนี้ทำให้พฤติกรรมสามารถคาดเดาได้ คุณรู้ว่าการออกแบบของคุณจะอยู่ในช่วงที่กำหนดไว้เสมอ แต่คุณจะได้รับการปรับขนาดที่ยืดหยุ่นระหว่างขีด จำกัด เหล่านั้น โดยการตั้งค่าขีด จำกัด ขั้นต่ำและสูงสุด CLAMP () ทำให้มั่นใจได้ว่าองค์ประกอบของคุณจะขยายขนาดอย่างคล่องแคล่ว แต่ไม่มากเกินไป พอ.

การเลือกค่าที่ต้องการที่เหมาะสม

คุณอาจสังเกตเห็นว่าค่าที่ต้องการ (กลาง) มีบทบาทที่ใหญ่กว่าในทั้งหมดนี้ มันตัดสินใจว่าองค์ประกอบมาตราส่วนอย่างไร

ก่อนอื่นไม่ควรเป็นค่าคงที่เช่นแคลมป์ (40px, 80px , 120px) เพราะในกรณีนี้ค่าที่ต้องการไม่ได้ปรับขนาดเลย เนื่องจาก 80px อยู่ระหว่างขีด จำกัด แล้วเบราว์เซอร์ล็อคมันในและละเว้นการเปลี่ยนแปลงขนาดหน้าจอ สิ่งนี้ส่งผลให้มีค่าคงที่ซึ่งเอาชนะวัตถุประสงค์ของการใช้แคลมป์ () ตั้งแต่แรก

แต่ ค่าที่ต้องการควรเป็นญาติเสมอ เช่นในแคลมป์ (40px, 7VW , 120px) ที่นี่ 7VW ตอบสนองต่อความกว้างของ Viewport ซึ่งช่วยให้องค์ประกอบสามารถปรับขนาดได้อย่างราบรื่นในขนาดหน้าจอ ฟังก์ชั่นแคลมป์จะทำให้มั่นใจได้ว่าจะไม่ต่ำกว่า 40px หรือสูงกว่า 120px ทำให้ขนาดตอบสนองต่อความกว้างของหน้าจอ 7%

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

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

หน่วยประเภทต่าง ๆ ในแคลมป์ ()

หน่วยภายในแคลมป์ () ส่งผลกระทบต่อการทำงานของอุปกรณ์ นี่คือทั้งหมดที่คุณสามารถใช้ได้:

ในกรณีส่วนใหญ่นักพัฒนาใช้ PX สำหรับค่าต่ำสุดและสูงสุดและหน่วยของเหลวเช่น VW สำหรับค่าที่ต้องการ สิ่งนี้ให้ความสมดุลที่ดีที่สุดระหว่างการควบคุมและการตอบสนอง

อย่างไรก็ตามคุณยังสามารถใช้หน่วยสัมพัทธ์สำหรับค่าต่ำสุดและสูงสุดเช่น แคลมป์ (2REM, 4REM, 8REM) สิ่งนี้ทำให้การออกแบบของคุณเข้าถึงได้ง่ายขึ้นและง่ายขึ้นหากขนาดตัวอักษรรูทเปลี่ยนไป มันมีประโยชน์อย่างยิ่งสำหรับผู้ใช้ที่ปรับการตั้งค่าเบราว์เซอร์เพื่อการอ่าน

แคลมป์ () ใน Divi 5

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

ถ้าเป็นเช่นนั้นหน่วยขั้นสูงของ Divi 5 สามารถช่วยได้

สมัครสมาชิกช่อง YouTube ของเรา

เรื่องสั้นสั้น Divi 5 รองรับแคลมป์ () เป็นหน่วยขั้นสูงทั่วทั้งผู้สร้างและเข้าถึงได้ง่ายมาก ทุกที่ที่คุณสามารถป้อนค่าตัวเลขเช่นขนาดตัวอักษรระยะห่างหรือความกว้างของส่วนคุณจะพบตัวเลือกในการใช้แคลมป์ () โดยตรง

เพียงคลิกในฟิลด์อินพุตเพื่อเลือกจากหน่วยขั้นสูงที่แตกต่างกันที่มีอยู่ใน Divi 5 (ดูรายการสีเข้มถัดจากขนาดข้อความหัวเรื่อง) เปลี่ยนประเภทหน่วยและกำหนดค่าต่ำสุดที่ต้องการและค่าสูงสุดของคุณ

แล้วก็แค่ไหน! ไม่มีการเข้ารหัสหรือ CSS เลย - สิ่งที่คุณทำคือป้อนค่าแคลมป์ () และส่วนหัวของคุณกลายเป็นของเหลวเช่นนั้น

Divi 5 ทำให้ง่ายต่อการสร้างการออกแบบที่เป็นของเหลวตอบสนองโดยไม่ต้องเขียน CS ที่กำหนดเอง คุณจะได้รับความยืดหยุ่นทั้งหมดของแคลมป์ () ด้วยความเรียบง่ายของตัวแก้ไขภาพ (Divi 5 รองรับหน่วยขั้นสูงอื่น ๆ อีกมากมายรวมถึง Clamp ())

เรียนรู้ทุกอย่างเกี่ยวกับหน่วยขั้นสูงของ Divi 5

วิธีใช้แคลมป์ () ใน Divi 5?

ถึงตอนนี้คุณจะเห็นว่าการใช้แคลมป์ () เป็นเรื่องง่ายเพียงใดใน Divi 5 คุณเพียงแค่เลือกหน่วยที่หนีบ () และเพิ่มค่าที่คุณต้องการ ไม่มีรหัสที่กำหนดเองไม่มีไฟล์ CSS เพียงแค่อินเทอร์เฟซที่สะอาดและมองเห็นได้

แต่สิ่งที่ทำให้แคลมป์ () มีพลังอย่างแท้จริงภายใน Divi ไม่ได้เป็นเพียงแค่ฟังก์ชั่นเท่านั้น มันเป็นสิ่งที่ใช้ได้ผล

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

แคลมป์ () ทำงานร่วมกับตัวแปรการออกแบบ

วิธีที่ดีที่สุดและมีประสิทธิภาพมากที่สุดในการใช้แคลมป์ () อย่างมีประสิทธิภาพใน Divi 5 คือการรวมเข้ากับตัวแปรการออกแบบ

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

ตัวอย่างเช่นคุณกำหนดขนาดแคลมป์ () สำหรับหัวเรื่อง H1-H6 เช่นนี้:

และบันทึกไว้ใน ตัวจัดการตัวแปร ใน Divi Builder:

จากนั้นส่วนหัวทั้งหมดของคุณทั่วทั้งเว็บไซต์จะปรับตามค่าที่คุณกำหนด ()

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

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

แคลมป์ () รวมกับ calc ()

นอกจากนี้คุณยังสามารถใช้ฟังก์ชั่น CALL () ภายในแคลมป์ () เพื่อปรับแต่งวิธีการปรับค่าของคุณ สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อคุณต้องการเพิ่มขนาดพื้นฐานจากนั้นปรับขนาดให้แม่นยำยิ่งขึ้นด้วยหน่วยสัมพัทธ์เช่น VW

ตัวอย่างเช่นขนาดตัวอักษร: แคลมป์ (1REM, CALC (0.75REM + 2VW), 2.5REM) ใช้ CALC () เพื่อเพิ่มฐานที่มั่นคง (0.75REM) จากนั้นปรับขนาดให้มากขึ้นด้วย 2VW

สิ่งนี้ช่วยให้แบบอักษรสามารถปรับขนาดตามความกว้างของวิวพอร์ต แต่ยังให้การเริ่มต้นด้วยขนาดตัวอักษรพื้นฐาน สิ่งนี้มีประโยชน์สำหรับการรักษาความชัดเจนบนหน้าจอขนาดเล็กโดยไม่จำเป็นต้องใช้ตัวหนีบหลายรูปแบบ เคล็ดลับ CALL () Inside Clamp () เหมาะสำหรับทุกที่ที่คุณต้องการควบคุมเป็นพิเศษเกี่ยวกับขนาดของสิ่งต่าง ๆ

กรณีการใช้งานจริงของแคลมป์ ()

ทีนี้ลองดูกรณีการใช้งานทั่วไปของแคลมป์ () และมันจะง่ายเพียงใดเมื่อคุณใช้งานกับ Divi 5:

1. ขนาดหัวเรื่องที่สอดคล้องกันในทุกอุปกรณ์

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

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

ข้อความยังคงชัดเจนสมดุลและสอดคล้องกันในทุกจุดพักที่เราตอบสนอง

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

2. Set clamp () ความกว้างสำหรับส่วนย่อหน้าบนหน้าจอขนาดใหญ่

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

ในการแก้ไขปัญหานี้ให้ตั้งค่าความกว้างที่ตอบสนองเช่นแคลมป์ (300px, 65VW, 800px) เพื่อปรับขนาดย่อหน้าของคุณให้เป็นความกว้างคงที่ (800px) ดังนั้นวรรคจึงปรากฏขึ้นได้แม้บนหน้าจอที่กว้างขึ้น

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

3. Set Clamp () ความกว้างสำหรับภาพเดี่ยวหรือโดดเด่น

ในทำนองเดียวกันภาพเดี่ยว (เช่นภาพเด่น) สามารถปรากฏ ตัวใหญ่เกินไป บนหน้าจอกว้างพิเศษ มันดูสมบูรณ์แบบบนแท็บเล็ต แต่อาจยืดตัวลงบนจอภาพ 4K อย่างเชื่องช้าซึ่งอาจรู้สึกเอาชนะได้เมื่อเทียบกับเนื้อหาที่เหลือ

ในการแก้ไขปัญหานี้ให้ใช้ความกว้างของภาพที่ยึดเช่นแคลมป์ (300px, 60VW, 1000px) ช่วยให้มั่นใจได้ว่าภาพจะเติบโตอย่างคล่องแคล่วด้วยขนาดหน้าจอ แต่หยุดก่อนที่จะครองเค้าโครง

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

4. เพิ่มช่องว่างภายในของเหลวและอัตรากำไรขั้นต้นด้วยแคลมป์ ()

นักออกแบบมักจะได้ระยะห่างที่เหมาะสมสำหรับเดสก์ท็อป แต่มันก็ไม่ได้ผลบนหน้าจอขนาดเล็กหรือใหญ่มากเสมอไป การตั้งช่องว่างและระยะขอบไม่ได้ปรับตามขนาดหน้าจอเสมอไป นั่นคือที่ที่แคลมป์ () มีประโยชน์

ตัวอย่างเช่นตัวหนีบ (0.5REM, 2VW, 2REM) ระยะขอบและแคลมป์ (1REM, 3VW, 4REM) ช่องว่างในแกลเลอรี่ภาพสร้างช่องว่างที่เริ่มต้นเล็กและปรับขนาดด้วยหน้าจอ

ให้ห้องเค้าโครงของคุณหายใจบนหน้าจอขนาดใหญ่และทำให้สิ่งต่างๆแน่นบนมือถือ:

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

5. สร้างส่วนฮีโร่ที่ตอบสนองได้อย่างราบรื่น

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

การใช้ค่าเหล่านั้นเป็นเรื่องง่าย

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

การออกแบบเลย์เอาต์พิกเซลที่สมบูรณ์แบบโดยใช้ Clamp () โดยไม่ต้องเขียนรหัสบรรทัดเดียว

CLAMP () ช่วยให้คุณออกแบบเลย์เอาต์ของเหลวตอบสนองโดยไม่ต้องพึ่งพาการสืบค้นสื่อที่ไม่มีที่สิ้นสุด และด้วย Divi 5 คุณไม่จำเป็นต้องเขียนรหัสบรรทัดเดียวเพื่อใช้ ไม่ว่าคุณจะชอบการเข้ารหัสหรือเพลิดเพลินกับการออกแบบด้วยภาพหน่วยขั้นสูงของ Divi ทำให้การใช้แคลมป์ () กับแบบอักษรและระยะห่างง่ายขึ้น

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