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

ฟังก์ชั่น CSS บางอย่างมีประสิทธิภาพ แต่ไม่ค่อยได้ใช้ไม่ใช่เพราะมันยาก แต่เพราะมีทางเลือกที่ง่ายกว่า calc () เป็นหนึ่งในนั้น มันมีประโยชน์มาก แต่มักจะถูกบดบังด้วยแคลมป์ ()

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

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

Divi 5 พร้อมที่จะใช้กับเว็บไซต์ใหม่ แต่รอสักครู่ก่อนที่จะย้ายถิ่นฐานที่มีอยู่

calc () ใน CSS คืออะไร?

Calc () เป็นฟังก์ชัน CSS ดั้งเดิมที่ให้คุณดำเนินการคณิตศาสตร์อย่างง่ายเช่นการเพิ่มการลบการคูณและการหาร (โดยมีข้อ จำกัด บางอย่างขึ้นอยู่กับบริบท) โดยตรงภายในกฎสไตล์ของคุณ มันยอดเยี่ยมสำหรับการปรับแต่งขนาดและระยะห่างโดยเฉพาะอย่างยิ่งเมื่อผสมค่าคงที่และยืดหยุ่นเพื่อให้ได้เลย์เอาต์ที่ราบรื่นขึ้นโดยไม่ต้องใช้การเข้ารหัสทุกอย่าง

มาทำความเข้าใจกับตัวอย่างนี้กันเถอะ สมมติว่าคุณต้องการองค์ประกอบที่จะใช้เวลา 80% ของหน้าจอ แต่ยังคงออกจากที่ว่างสำหรับช่องว่างภายใน คุณสามารถเขียน:

width: calc(80% - 40px);

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

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

• Padding: Calc (5VW + 20PX); เก็บของเหลวบนช่องว่าง แม้แต่บนหน้าจอขนาดเล็กก็ไม่เคยลดลงต่ำกว่า 20 พิกเซล
• ความสูง: Calc (100VH - 80px); ทำให้เนื้อหามองเห็นได้เมื่อคุณมีส่วนหัวคงที่ มันปรับโดยอัตโนมัติตามความสูงของหน้าจอ
• ความกว้าง: Calc (60% - 1REM); ให้การควบคุมความกว้างของส่วนที่ยืดหยุ่นในขณะที่ยังคงระยะห่างที่สอดคล้องกัน คุณสามารถปรับระยะขอบโดยรอบโดยใช้ค่าเช่นขอบซ้าย: calc (40% + 0.5Rem); ในการมองเห็นศูนย์หรือจัดองค์ประกอบภายในคอนเทนเนอร์

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

ทำความเข้าใจว่า calc () ทำงานอย่างไร

ไวยากรณ์พื้นฐานของ calc () มีลักษณะเช่นนี้:

 calc(value operator value) 

ที่นี่คุณสามารถใช้ความยาวหรือหน่วยที่ถูกต้องใด ๆ และผู้ประกอบการสามารถเป็น +, -, *, หรือ /

ตัวอย่างเช่นหากคุณต้องการลดความกว้างขององค์ประกอบ 40 พิกเซลคุณจะเขียนความกว้าง: CALC (100% - 40px); สังเกตเห็นการใช้ %? นั่นคือสิ่งที่ทำให้ความกว้างมีความยืดหยุ่น

หากเราใช้ CALC (100px - 40px) ผลลัพธ์จะเป็น 60 พิกเซลนั่นคือคงที่ แต่ด้วยการใช้เปอร์เซ็นต์เราปล่อยให้เบราว์เซอร์คำนวณขนาดตามหน้าจอหรือองค์ประกอบหลัก มันจะปรับโดยอัตโนมัติเมื่อเค้าโครงเปลี่ยนแปลง

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

ใช้หลายหน่วย

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

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

นอกจากนี้คุณยังสามารถรวมค่าหลายค่าและหน่วยในบรรทัดเดียวซึ่งทำให้การปรับขนาดเค้าโครงตอบสนองความแม่นยำมากขึ้น ตัวอย่างด้านล่างนี้ใช้ %, PX และ REM เพื่อผสมสเกลเลย์เอาต์ระยะห่างคงที่และการพิมพ์:

 width: calc(50% - 40px + 1rem); 

• เครื่องชั่ง 50% กับภาชนะบรรจุ
• 40px ลบพื้นที่คงที่เช่นแถบด้านข้าง
• 1REM เพิ่มระยะห่างตามขนาดตัวอักษร

ฟังก์ชั่นการทำรัง Calc ()

นอกจากนี้คุณยังสามารถทำรังหนึ่ง calc () ภายในอีกอันเพื่อสร้างตรรกะการจัดวางที่ซับซ้อนมากขึ้น เป็นวิธีที่ยอดเยี่ยมในการสะท้อนวิธีที่คุณคิดเกี่ยวกับการออกแบบ (เลเยอร์โดยเลเยอร์) ด้วยความสัมพันธ์ที่ชัดเจนระหว่างค่านิยม ตัวอย่างเช่นความกว้าง: calc (200px - calc (100px + 2Rem));

ที่นี่เบราว์เซอร์แรกคำนวณ 100px + 2Rem ซึ่งอาจเป็นตัวแทนของการขยายระยะขอบหรือขนาดขององค์ประกอบอื่น จากนั้นจะลบทั้งหมดนั้นจาก 200px เพื่อให้ได้ความกว้างสุดท้าย ความกว้างยังคงมีความสัมพันธ์เนื่องจาก REM

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

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

ทำไมต้องใช้ calc () เมื่อคุณมีแคลมป์ ()?

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

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

• การลบค่าคงที่จากเลย์เอาต์ที่ยืดหยุ่น: การใช้ความสูง: CALC (100VH - 80PX) ทำให้แน่ใจว่าส่วนที่เติมหน้าจอลบความสูงของส่วนหัวคงที่ดังนั้นองค์ประกอบจึงไม่ทับซ้อนกัน แคลมป์ () ไม่สามารถทำสิ่งนี้ได้เพราะไม่รองรับการลบ
• องค์ประกอบออฟเซ็ตที่มีความแม่นยำ: ค่าเช่นขอบซ้าย: Calc (50%-200px); เลื่อนองค์ประกอบที่สัมพันธ์กับคอนเทนเนอร์ในขณะที่รักษาความสมดุลทางสายตา แคลมป์ () ไม่สามารถทำการวางตำแหน่งเชิงสัมพันธ์แบบนี้ได้
• การจัดแนวส่วนเคียงข้างกัน: ช่วยให้คุณสร้างเลย์เอาต์สองคอลัมน์ที่ตอบสนองได้ซึ่งหนึ่งคอลัมน์ที่มีความกว้าง: CALC (60%-2REM); ใช้เวลา 60% ของพื้นที่ลบช่องว่างที่สอดคล้องกัน Clamp () เหมาะอย่างยิ่งสำหรับการปรับขนาดค่าเดียวในขณะที่ calc () เก่งเมื่อต้องการความสัมพันธ์ระหว่างค่าหลายค่า

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

การรวม calc () + แคลมป์ ()

ในขณะที่ calc () และ clamp () มีประสิทธิภาพด้วยตัวเองทำไมต้องใช้เมื่อคุณสามารถรวมทั้งสองได้? คุณสามารถทำรัง Calc () ภายในแคลมป์ () เพื่อสร้างการออกแบบของเหลวด้วยตรรกะในตัวเช่นการรวมการปรับขนาดที่ยืดหยุ่นเข้ากับการควบคุมที่แม่นยำ

ตัวอย่างเช่น การขยาย: แคลมป์ (1REM, CALC (2VW + 10PX), 3REM); สร้างระยะห่างที่ปรับขนาดระหว่าง 1REM และ 3REM แต่ค่า“ ที่ต้องการ” ขึ้นอยู่กับสูตร CALC () ที่ผสมความกว้างของวิวพอร์ตและค่าคงที่

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

การใช้ตัวแปร CSS กับ CALC ()

คุณยังสามารถขยายความยืดหยุ่นของ Calc () ด้วยตัวแปร CSS รวมตัวแปรกับหน่วยอื่น ๆ ทำคณิตศาสตร์กับพวกเขาและสร้างตรรกะเลย์เอาต์รอบ ๆ ค่าที่นำมาใช้ซ้ำได้ ตัวอย่างเช่นถ้าคุณกำหนด: รูท {–Gap: 40px;} จากนั้นใช้การขยาย: calc (var (–Gap) + 1REM); ช่วยให้คุณตั้งค่าการตอบสนองต่อการตอบสนองตามค่ารูทของคุณ

หมายเหตุ: ในขณะที่ใช้ตัวแปร CSS ภายใน calc () ให้ห่อตัวแปรของคุณรอบ var () มาดูกันว่าฉันทำอย่างไรข้างบน

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

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

ฟังก์ชั่นเช่นแคลมป์ (1REM, VAR (-ขนาดฟลูอิด), 3REM) ทำงานได้ก็ต่อเมื่อ-ขนาดฟลูอิดแก้ไขให้กับบางสิ่งเช่น 4VW และถ้าคุณต้องการทำคณิตศาสตร์ด้วยตัวแปรเช่นการเพิ่มหรือลบออกจากมันคุณต้องห่อส่วนนั้นใน Calc () สิ่งเล็ก ๆ น้อย ๆ เหล่านี้ทำให้ Calc () จำเป็นเมื่อสร้างค่าไดนามิกด้วยตัวแปร

calc () ใน divi 5

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

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

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

สิ่งที่คุณทำคือป้อน calc () โดยตรงภายในฟิลด์อินพุตตัวเลขใด ๆ และนั่นก็คือ

ผู้สร้าง Divi ทำหน้าที่ทันที เมื่อคุณป้อนค่า calc () ของคุณคุณจะได้รับข้อเสนอแนะสดขณะออกแบบ ไม่จำเป็นต้องสลับระหว่างผู้สร้างเดฟทูลส์หรือตัวอย่างและไม่คาดเดาว่าจะมีลักษณะอย่างไร

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

โดยวิธีการที่คุณรู้จัก Divi 5 ยังสนับสนุนฟังก์ชั่น CSS ทั้งหมดในหน่วยขั้นสูงหรือไม่? คุณอาจต้องการเรียนรู้เกี่ยวกับพวกเขาเช่นกัน

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

Divi 5 ทำให้การใช้ calc () ได้อย่างง่ายดายอย่างไร

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

นี่คือวิธีที่ช่วยให้คุณใช้ Calc () อย่างกล้าหาญในขณะที่ทำงานอย่างเงียบ ๆ ในเงามืด:

1. ใช้ calc () กับฟิลด์ตัวเลขใด ๆ

เพียงเพราะคุณไม่ได้เข้ารหัสไม่ได้หมายความว่าคุณจะถูก จำกัด ใน Divi 5, calc () ทำงานได้ทุกที่จะยอมรับค่าตัวเลข (คิดว่า: ความกว้าง, ความสูง, ช่องว่าง, ระยะขอบ, ช่องว่าง, ขนาดตัวอักษร, ทุกที่) หากฟิลด์ยอมรับตัวเลขจะสนับสนุน calc ()

และการใช้ calc () ค่อนข้างตรงไปตรงมา สิ่งที่คุณต้องทำคือเลือก calc () จากหน่วยขั้นสูงอื่น ๆ และป้อนสูตรของคุณ

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

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

2. รับตัวอย่างสดแบบทันที

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

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

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

3. สร้างเวิร์กโฟลว์ขั้นสูงด้วย CALC ()

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

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

1. ขยาย calc () ด้วยตัวแปร CSS

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

:root {
--section-padding: calc(4rem + 2vw);
}

ในการทำเช่นนั้นฉันจะไปที่ การตั้งค่าหน้า> ขั้นสูง> CSS ที่กำหนดเอง และเพิ่มค่ารูทของฉันที่นี่:

ตอนนี้แทนที่จะเข้าสู่สูตรเต็มรูปแบบทุกที่คุณสามารถใช้ VAR (-ส่วนการขยาย) ในช่องว่างภายในใด ๆ ภายใน Divi ผลลัพธ์จะอัปเดตสดและถ้าฉันเปลี่ยนค่ารูทในภายหลังเค้าโครงทั้งหมดจะสะท้อนการเปลี่ยนแปลงนั้นทันที

สังเกตว่าหน่วยขั้นสูงที่อัปเดตแสดงให้เห็นว่า Calc var ซึ่งหมายความว่าตัวแปร CSS ถูกแทรกโดยใช้ฟังก์ชัน var () ภายในสูตร calc ()

การใช้ตัวแปร CSS ใน Divi นั้นง่ายอย่างน่าประหลาดใจ คุณสามารถกำหนดได้ในหน้าเว็บโดยไม่ต้องสัมผัสสไตล์ชีทของคุณ สิ่งนี้จะช่วยรักษากรอบการออกแบบที่สอดคล้องกันทดสอบค่าใหม่และสร้างกฎเค้าโครงที่ตอบสนองได้

2. ใช้ calc () ในกรอบการออกแบบของคุณ

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

ที่นี่ 30px เป็นความสูงของส่วนหัวคงที่

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

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

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

3. สร้างและบันทึกกลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้า

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

ตัวอย่างเช่นหากคุณเคยใช้ช่องว่าง: Calc (4REM + 2VW) ในหลายส่วนคุณไม่จำเป็นต้องพิมพ์ใหม่ทุกที่ เพียงแค่บันทึกเป็นที่ตั้งไว้ล่วงหน้า:

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

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

ขอให้สังเกตว่าการเปลี่ยนค่าที่บันทึกไว้ในตัวแปรการออกแบบพวกเขายังได้รับการอัปเดตในส่วนการขยายในขณะเดียวกันก็ให้ตัวอย่างสดกับเรา? นั่นเป็นเพราะฉันใช้ตัวแปร ความสูงส่วน ภายใน ส่วนที่ ตั้งไว้ล่วงหน้า

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

Divi ทำให้คณิตศาสตร์รู้สึกง่าย

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

ไม่ว่าคุณจะปรับระยะห่างโดยใช้ตัวแปรหรือสร้างที่ตั้งไว้ล่วงหน้าที่นำกลับมาใช้ใหม่ Divi ทำให้ทุกคนสามารถออกแบบคณิตศาสตร์ได้ ต้องการทดสอบว่า calc () ทำงานได้อย่างราบรื่นภายใน Divi หรือไม่? ดาวน์โหลด Divi Public Alpha วันนี้และสัมผัสกับตัวคุณเอง

Divi 5 พร้อมที่จะใช้กับเว็บไซต์ใหม่ แต่รอสักครู่ก่อนที่จะย้ายถิ่นฐานที่มีอยู่