ทำความเข้าใจกับหน่วย CSS (และวิธีการใช้งาน)

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

Divi 5 นำการสนับสนุนพื้นเมืองสำหรับหน่วย CSS เข้าสู่ตัวสร้าง ด้วยคุณสมบัติหน่วยขั้นสูงใหม่คุณสามารถใช้ %, EM, REM, VW และอื่น ๆ โดยไม่ต้องใช้รหัสที่กำหนดเอง

หน่วย CSS คืออะไร?

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

ตัวอย่างเช่นการเขียนความกว้าง: 100 ไม่ได้มีความหมายอะไรกับเบราว์เซอร์ แต่เพิ่มหน่วยเช่น 100px หรือ 100%และตอนนี้มันรู้ว่าคุณต้องการอะไร

ใช้ตัวอย่างนี้ด้วยสี่กล่องแต่ละกล่องใช้ค่า CSS ที่แตกต่างกัน:

• ความกว้างใช้ครั้งแรก: 100. ไม่ถูกต้องทางเทคนิค แต่เบราว์เซอร์จำนวนมากจะทำให้เป็น 100%
• ที่สอง (100px) ใช้ความกว้างคงที่
• มาตราส่วนที่สามและสี่ (100% และ 60%) เทียบกับภาชนะแม่

คุณอาจสงสัยว่าทำไมกล่องแรกที่มีความกว้าง: 100 ยังปรากฏเต็มความกว้างแม้ว่ามันจะไม่ถูกต้องในทางเทคนิค

ความกว้าง: 100 ถูกละเว้นโดยเบราว์เซอร์เพราะไม่มีหน่วย แต่ในกรณีนี้กล่องยังคงเหยียดข้ามภาชนะไม่ใช่เพราะ CSS ได้รับการยอมรับ แต่เป็นเพราะองค์ประกอบระดับบล็อกเช่น DIV ตามธรรมชาติจะขยายความกว้างเต็มของพ่อแม่โดยค่าเริ่มต้น มันเป็นเรื่องบังเอิญของพฤติกรรมเริ่มต้นไม่ใช่เป็นผลมาจาก CSS ที่ไม่ถูกต้องถูกตีความว่าเป็น 100%

หน่วย CSS ยอดนิยม

แม้ว่า PX และ % มักจะปรากฏขึ้น แต่คนอื่น ๆ ก็มีประโยชน์เช่นเดียวกับเมื่อคุณรู้ว่าเมื่อใดควรใช้พวกเขา:

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

แต่ก่อนอื่นมันเป็นประโยชน์ที่จะรู้ว่าหน่วย CSS ทั้งหมดแบ่งออกเป็นสองประเภทหลัก: สัมบูรณ์และญาติ

หน่วยสัมบูรณ์และสัมพัทธ์

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

หน่วยสัมบูรณ์

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

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

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

หน่วยสัมพัทธ์

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

บางหน่วยตอบสนองต่อขนาดขององค์ประกอบหลักขององค์ประกอบอื่น ๆ กับขนาดตัวอักษรรูทของหน้าและบางส่วนก็ตอบสนองต่อหน้าต่างเบราว์เซอร์เอง นี่คือกุญแจสำคัญบางประการ:

• สเกล % กับภาชนะหลัก
• EM ปรับตามขนาดตัวอักษรขององค์ประกอบหลัก
• REM ติดตามขนาดตัวอักษรรูทของหน้า
• VW และ VH ตอบสนองต่อความกว้างและความสูงของ Viewport เบราว์เซอร์

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

ลองดูตัวอย่างอย่างรวดเร็วเพื่อดูว่าทำไมความยืดหยุ่นนี้จึงสำคัญ สมมติว่าคุณกำลังสร้างส่วนภาพและตั้งค่าความกว้างเป็น 1200px

นั่นอาจดูสมบูรณ์แบบบนจอภาพขนาดใหญ่ แต่บนแท็บเล็ตที่มีความกว้างหน้าจอ 768 พิกเซลภาพอาจล้นและดูแปลก ๆ ตอนนี้ลองใช้:

width: 100%;

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

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

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

เมื่อใดควรใช้หน่วย CSS ใด

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

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

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

นี่คือตัวอย่างบางส่วนเพื่อเป็นแนวทางในการเลือกของคุณ:

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

สำหรับการควบคุมขั้นสูงมากขึ้นคุณยังสามารถรวมหน่วยโดยใช้ฟังก์ชั่น CSS calc () มีประโยชน์เมื่อผสมค่าเช่น 1REM + 5VW สำหรับระยะห่างที่ตอบสนองด้วยฐานขั้นต่ำ และ Clamp () เหมาะอย่างยิ่งสำหรับการตั้งค่าของเหลวที่เติบโตหรือหดตัวระหว่างขีด จำกัด ทำให้เป็นทางเลือกที่สะอาดกว่าสำหรับการสืบค้นสื่อ

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

หน่วยขั้นสูงของ Divi เพื่อสร้างอย่างต่อเนื่องโดยไม่ต้องเข้ารหัส

เราได้เห็นแล้วว่าหน่วย CSS ให้คุณควบคุมพฤติกรรมการจัดวางได้อย่างไร Divi 5 ใช้การควบคุมนั้นและทำให้ใช้งานกับหน่วยขั้นสูงได้อย่างง่ายดาย

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

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

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

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

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

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

หน่วย CSS ซิงค์อย่างสมบูรณ์กับเวิร์กโฟลว์ขั้นสูงของ Divi

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

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

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

1. สร้างตรรกะเลย์เอาต์ด้วยตัวแปรการออกแบบ

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

คุณสามารถสร้างค่าที่นำกลับมาใช้ใหม่ได้เช่น-การ์ดการ์ดหรือ-ส่วนหนึ่ง-ช่องว่างโดยใช้หน่วย CSS จริงเช่น 2REM, 5VW หรือแม้แต่สูตรเช่น CALC (2REM + 1VW) เมื่อตั้งค่าแล้วค่าเหล่านี้สามารถนำไปใช้กับโมดูลแถวและส่วนต่างๆเพื่อให้ทุกอย่างสอดคล้องกัน

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

2. ใช้แคลมป์ () และ calc () สายตา

ฟังก์ชั่น CSS เช่นแคลมป์ () และ calc () ช่วยให้คุณสร้างเค้าโครงที่ตอบสนองได้ พวกเขาให้คุณกำหนดค่าที่ยืดหยุ่นที่ปรับข้ามขนาดหน้าจอโดยไม่ต้องเขียนแบบสอบถามสื่อ ดังนั้นแทนที่จะตั้งค่าขนาดคงที่สำหรับแต่ละอุปกรณ์คุณสามารถเขียนตรรกะเช่นแคลมป์ (1REM, 2VW, 2.5REM) เพื่อให้สเกลเบราว์เซอร์ได้อย่างราบรื่นระหว่างขีด จำกัด ที่ตั้งไว้ หรือใช้ CALC (100VH - 80PX) เพื่อปรับส่วนฮีโร่ตามความสูงของวิวพอร์ตของคุณ

โดยปกติพวกเขาต้องการการเขียน CSS ด้วยตนเอง ใน Divi คุณสามารถป้อนสิ่งเหล่านี้ได้โดยตรงภายในฟิลด์หมายเลขใด ๆ

และเนื่องจากหน่วย CSS ได้รับการสนับสนุนภายในทั้งสองฟังก์ชั่นคุณสามารถผสมค่าเช่น REM, VW และ PX เพื่อให้ได้พฤติกรรมที่คุณต้องการ คุณเห็นผลลัพธ์มีชีวิตอยู่ในขณะที่คุณพิมพ์ซึ่งทำให้ง่ายต่อการทดสอบและตอบสนองได้อย่างถูกต้องโดยไม่ต้องออกจากผู้สร้าง

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

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

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

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

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

Divi เปลี่ยนหน่วย CSS เป็นมหาอำนาจภาพ

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

พร้อมที่จะลองหรือยัง? ดาวน์โหลด Divi 5 และเริ่มใช้หน่วย CSS จริงในการออกแบบของคุณ