ความแตกต่างระหว่างหน่วย CSS แบบสัมบูรณ์และสัมพัทธ์

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

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

หน่วย CSS อธิบาย: ทำไมพวกเขาถึงมีความสำคัญสำหรับเว็บไซต์ของคุณ?

หน่วย CSS ควบคุมว่าทุกอย่างใหญ่ขึ้นบนเว็บไซต์ของคุณ เลือกผิดและการออกแบบของคุณแบ่งอุปกรณ์ต่าง ๆ

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

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

การทำลายหน่วยสัมบูรณ์: เมื่อขนาดคงที่ทำงานได้ดีที่สุด

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

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

ทำไมพิกเซลจึงใช้งานได้ดีสำหรับรายละเอียดเล็ก ๆ น้อย ๆ

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

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

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

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

ทำให้พิกเซลตอบสนองด้วยการสืบค้นสื่อ

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

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

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

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

การทำความเข้าใจหน่วยสัมพัทธ์: แนวทางที่ยืดหยุ่นในการออกแบบเว็บ

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

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

หน่วย EM สร้างกันอย่างไร

หน่วย EM สัมพันธ์กับขนาดตัวอักษรขององค์ประกอบหลักของพวกเขาทันที หากขนาดตัวอักษรพื้นฐานของคุณคือ 16px และคุณตั้งค่าคอนเทนเนอร์เป็นขนาดตัวอักษร: 1.25EM นั่นจะกลายเป็น 20px องค์ประกอบเด็กที่อยู่ภายในนั้นตั้งค่าเป็น 1.5EM จะเป็น 30px (1.5 × 20px) ไม่ใช่ 24px เพราะมันขึ้นอยู่กับพาเรนต์ไม่ใช่รูท

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

หน่วย rem ทำให้สิ่งต่างๆง่ายขึ้น

REM ดูที่องค์ประกอบรูท HTML เสมอ ตั้งค่าบางอย่างเป็น 2REM และมีขนาดเท่ากันทุกที่ในหน้าของคุณ

เบราว์เซอร์ส่วนใหญ่เริ่มต้นเป็น 16px สำหรับรูท ดังนั้น 1REM = 16PX, 2REM = 32PX เปลี่ยนขนาดรูทและทุกอย่างที่ใช้กับ REM ด้วยกัน

หน่วยวิวพอร์ตติดตามหน้าจอของคุณ

ปรับขนาดหน่วย Viewport ด้วยหน้าต่างเบราว์เซอร์ของคุณ 50VW = ครึ่งความกว้างของหน้าจอและ 100VH = ความสูงเต็มหน้าจอ นี่เป็นสิ่งที่ยอดเยี่ยมสำหรับส่วนของฮีโร่ที่เติมหน้าจอ

เบราว์เซอร์มือถือมักจะเล่นได้ไม่ดีกับหน่วย Viewport แถบที่อยู่จะซ่อนและแสดงเมื่อคุณเลื่อนและส่วน 100VH ของคุณอาจถูกตัดออกเมื่อแถบที่อยู่ปรากฏขึ้น

VMIN และ VMAX เปรียบเทียบความกว้างและความสูงของหน้าจอจากนั้นเลือกหนึ่ง VMIN ใช้วิธีที่เล็กกว่า บนโทรศัพท์ที่จัดขึ้นตั้งตรงความกว้างมีขนาดเล็กลงดังนั้น 50vmin = 50% ของความกว้าง หมุนไปที่ภูมิทัศน์และความสูงจะเล็กลงดังนั้น 50vmin จึงเปลี่ยนเป็น 50% ของความสูง VMAX ทำตรงกันข้าม: มันจะเลือกมิติที่ใหญ่กว่าเสมอ สิ่งนี้มีประโยชน์สำหรับองค์ประกอบที่ต้องปรับขนาดด้วยการวัดที่ใหญ่กว่า

เปอร์เซ็นต์ปรับให้เข้ากับภาชนะบรรจุ

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

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

ความแตกต่าง

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

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

การเลือกหน่วยที่เหมาะสมสำหรับการออกแบบของคุณ

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

คิดถึงผู้ใช้ของคุณก่อน

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

การนำทางหลักต้องการการปรับขนาดที่สอดคล้องกันในหน้า หน่วย REM ผูกกับขนาดตัวอักษรฐานของคุณ โลโก้ของคุณต้องการขนาดที่แน่นอนสำหรับความสอดคล้องของแบรนด์ พิกเซลทำให้มันกรอบ

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

วิธีที่รวดเร็วในการเลือกหน่วยที่เหมาะสม

นี่คือวิธีการแบ่งตัวเลือกของคุณโดยไม่หลงทางในรายละเอียด:

• ข้อความและระยะห่างรอบ ๆ : ใช้ em หรือ rem ปุ่มรองลงมาสเกลด้วยขนาดข้อความ ระยะขอบยังคงเป็นสัดส่วนกับหัวเรื่อง
• องค์ประกอบที่เกี่ยวข้องกับหน้าจอ: ใช้หน่วย Viewport ส่วนฮีโร่ที่เติมหน้าจอส่วนใหญ่ แถบด้านข้างที่ใช้เปอร์เซ็นต์หน้าจอเฉพาะ
• องค์ประกอบที่ต้องการการควบคุมที่แน่นอน: ใช้พิกเซล เส้นขอบบาง ๆ ที่อยู่กรอบ ไอคอนขนาดเล็กที่มีการจัดตำแหน่งที่สมบูรณ์แบบ ปล่อยเงาด้วยการชดเชยที่แม่นยำ
• องค์ประกอบที่ใช้คอนเทนเนอร์: ใช้เปอร์เซ็นต์ กริดที่ยืดหยุ่นที่ปรับให้เข้ากับผู้ปกครอง รูปภาพที่ปรับขนาดด้วยภาชนะบรรจุ

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

ข้อผิดพลาดของหน่วย CSS ทั่วไปที่จะหลีกเลี่ยง

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

1. การเลือกพิกเซลสำหรับทุกสิ่ง

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

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

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

2. หน่วย EM ที่ทวีคูณจากการควบคุม

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

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

3. หน่วย Viewport ที่กระโดดไปมาบนมือถือ

ตั้งค่าส่วนฮีโร่ของคุณเป็น 100VH และเติมเต็มหน้าจออย่างสมบูรณ์แบบ ยกเว้นเบราว์เซอร์มือถือซ่อนและแสดงแถบที่อยู่ของพวกเขาเมื่อคุณเลื่อน Safari บน iOS และ Chrome บน Android ทั้งหมดทำสิ่งนี้ เมื่อแถบที่อยู่หายไปส่วน 100VH ของคุณจะสูงเกินไป เมื่อมันปรากฏขึ้นอีกครั้งเนื้อหาของคุณจะถูกตัดออก

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

ทำลายการเข้าถึงด้วยขนาดคงที่

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

แนะนำให้ใช้เป้าหมายการสัมผัสอย่างน้อย 44 × 44 CSS พิกเซลตามแนวทางการเข้าถึงเช่น WCAG และมาตรฐานของ Apple เป้าหมายขนาดเล็กอาจเป็นสิ่งที่ท้าทายสำหรับผู้ใช้ที่มีความบกพร่องทางมอเตอร์เพื่อแตะอย่างถูกต้อง

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

5. ข้อความเล็ก ๆ บนหน้าจอที่มีความหนาแน่นสูง

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

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

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

6. หน่วยผสมโดยไม่มีแผน

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

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

หน่วยขั้นสูงของ Divi 5 ทำให้การจัดการ CSS ง่ายขึ้นอย่างไร

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

Divi คืออะไร?

Divi เป็นผู้สร้างเว็บไซต์ที่เปลี่ยน WordPress เป็นสิ่งที่สมเหตุสมผลสำหรับผู้ที่ต้องการให้เว็บไซต์ของพวกเขาดูดี

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

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

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

สร้างเว็บไซต์โดยใช้ AI

Divi Ai ทำงานได้ในพื้นที่ออกแบบของคุณ ต้องการข้อความ? มันเขียนมัน

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

ในทำนองเดียวกันสำหรับรหัสและส่วนใหม่

ไซต์ Divi Quick แก้ปัญหาช่วงเวลาที่น่ากลัวเมื่อคุณจ้องที่หน้าว่างโดยไม่มีเงื่อนงำที่จะเริ่มต้น เลือกจากไซต์เริ่มต้นที่ทีมของเราออกแบบมาจริงด้วยภาพต้นฉบับและงานศิลปะ

หรืออธิบายธุรกิจของคุณให้เป็น Divi เว็บไซต์ด่วน + Divi AI และปล่อยให้มันสร้างบางสิ่งบางอย่างตั้งแต่เริ่มต้น

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

มีอะไรใหม่ใน Divi 5

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

แต่มีอะไรใหม่? มาดู:

ระบบเค้าโครง FlexBox

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

กลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้า

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

ตัวแปรออกแบบ

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

หน่วยขั้นสูง

ตอนนี้คุณสามารถใช้หน่วย CSS ขั้นสูงทั้งหมดด้วย Divi 5: จาก PX ถึง VW/VH ฟังก์ชั่น CSS ยังทำงานได้อย่างถูกต้องในผู้สร้างในขณะนี้ ต้องการส่วนที่ 80% ของความสูงของหน้าจอลบส่วนหัวของคุณหรือไม่? พิมพ์ Calc (80VH - 100px) และคุณตั้งค่าแล้ว อินเตอร์เฟสจัดการแคลมป์ (), min (), สูงสุด (): เทคนิคการตอบสนองทั้งหมดเหล่านั้น

แถวซ้อนกัน

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

การแก้ไขคลิกเดียว

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

จุดพักที่ปรับแต่งได้

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

พื้นที่ทำงานหลายแผง

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

การจัดการคุณลักษณะ

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

การปรับขนาดผ้าใบ

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

การปรับปรุงประสิทธิภาพ

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

กลุ่มโมดูล

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

ระบบสี HSL

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

กำลังอยู่ระหว่างทาง ...

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

ใช้ตัวแปร CSS ใน Divi 5

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

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

ฟังก์ชั่น CSS ทำงานในลักษณะเดียวกัน ป้อนแคลมป์ (1REM, 4VW, 3REM) สำหรับการพิมพ์ของเหลวหรือขั้นต่ำ (500px, 90%) สำหรับความกว้างที่ตอบสนองได้ ผู้สร้างภาพจัดการการคำนวณเหล่านี้แบบเรียลไทม์ในขณะที่คุณออกแบบ

ตัวแปรรวมเข้ากับระบบนี้อย่างราบรื่น กำหนดตัวแปร CSS เช่น-Header-Height: 80px จากนั้นอ้างอิงโดยใช้ VAR (-Header-Height) ในทุกสาขา Divi รับรู้ไวยากรณ์และใช้ค่าที่เก็บไว้ของคุณโดยอัตโนมัติ

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

ตัวแปรการออกแบบ: วิธีที่ดีกว่าในการใช้หน่วยขั้นสูง

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

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

Divi 5 เสนอหลายประเภทตัวแปรเพื่อจัดการกับความต้องการเนื้อหาที่แตกต่างกัน:

• ตัวแปรสี เก็บรหัสฐานสิบหก, การไล่ระดับสี, สีแบรนด์, สีข้อความ, พื้นหลังและเส้นขอบ
• ตัวแปรตัวอักษร จัดการการพิมพ์ทั่วโลกนอกเหนือจากข้อ จำกัด การปรับแต่งธีมและทำงานสำหรับพื้นที่ข้อความใด ๆ
• ตัวแปรตัวเลข ยอมรับหน่วย CSS ใด ๆ บวกกับฟังก์ชั่น CSS เช่นแคลมป์ (), calc (), min () และสูงสุด () สำหรับการเว้นระยะขนาดและภาพเคลื่อนไหว
• ตัวแปรรูปภาพจัด เก็บภาพที่ใช้ซ้ำได้เช่นโลโก้พื้นหลังและรูปแบบ
• ตัวแปรข้อความ เก็บสตริงข้อความที่นำมาใช้ซ้ำได้เช่นข้อมูลการติดต่อแท็กไลน์และรายละเอียดทางธุรกิจ
• ตัวแปร URL เก็บลิงค์ที่นำมาใช้ซ้ำได้สำหรับโซเชียลมีเดีย บริษัท ในเครือโปรโมชั่นและลิงค์โทร/mailto

การตั้งค่าหน่วย CSS พร้อมตัวแปรการออกแบบตัวเลข

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

ค้นหาตัวแปรตัวแปรในอินเทอร์เฟซ Divi ของคุณ สร้างตัวแปรหมายเลขใหม่และให้ค่าที่เหมาะกับการออกแบบของคุณ ใช้ชื่อที่ชัดเจนเช่น“ ปุ่มปุ่ม” หรือ“ Section-Gap” แทนฉลากที่คลุมเครือ

การสร้างไลบรารีตัวแปรของคุณ

คุณอาจเพิ่มตัวแปรทั่วไปเช่น:

• “ ปุ่มสูง” ที่ 3REM-สเกลปุ่มที่มีขนาดข้อความ
• “ การเสริมส่วน” ที่ 8VH-ระยะห่างปรับให้เข้ากับความสูงของหน้าจอ
• “ แนวชายแดน” ที่ 0.5rem-มุมโค้งมนยังคงเป็นสัดส่วน
• “ ฮีโร่-สูง” ที่ 75vh-ส่วนฮีโร่เติมหน้าจอส่วนใหญ่
• “ ดีกว่า” ที่ 1px-เส้นที่คมชัดอยู่คมชัด
• “ ข้อความของเหลว” ที่แคลมป์ (1REM, 2.5VW, 2REM)-เครื่องชั่งข้อความได้อย่างราบรื่น
• “ ความกว้างเนื้อหา” ที่ขั้นต่ำ (90%, 1200px)-ภาชนะบรรจุอ่านได้
• “ Dynamic-Gap” ที่ CALC (2REM + 2VW)-ระยะห่างเพิ่มขึ้นตามขนาดหน้าจอ

ใช้สิ่งเหล่านี้ในโมดูลส่วนหรือการตั้งค่าแถว

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

อาคารที่เชื่อมต่อล่วงหน้า

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

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

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

สร้างเว็บไซต์ที่ดีกว่าด้วยหน่วย CSS และ Divi 5

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

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

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