ออกแบบเว็บไซต์ตอบสนองด้วยการปรับขนาดที่ใช้ EM

Sep 11, 2025

วิธีการ

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

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

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

ขนาดตัวอักษร

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

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

เพื่อหลีกเลี่ยงปัญหานี้โดยทั่วไปจะใช้หน่วยสัมพัทธ์ที่แตกต่างกันสำหรับขนาดตัวอักษร: REMS REM (หรือ 'root em') ขึ้นอยู่กับขนาดตัวอักษรที่สืบทอดมา แต่ในขนาดตัวอักษรขององค์ประกอบรากของหน้า & lt; html & gt; . ซึ่งหมายความว่าค่าของมันจะเหมือนกันทั่วทั้งหน้า มันคาดเดาได้มากกว่าและมักจะดีกว่า EMS ปกติ

สร้างโมดูลด้วย EMS

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

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — ใช้ REMS บนองค์ประกอบนอกสุดเพื่อสร้างขนาดฟอนต์ที่รู้จักจากนั้นใช้ EMS เพื่อสร้างขึ้นอยู่กับค่านั้น

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

เราจะสร้างแผงควบคุมด้วยหัวเรื่องและร่างกาย มาร์กอัปมีลักษณะดังนี้:

 & lt; div class = "แผง" & gt;
  & lt; div class = "หัวเรื่องของแผง" & gt;
    & lt; H3 & GT; ดูพลังของ EMS & LT; / H3 & GT;
  & lt; / div & gt;
  & lt; div class = "body-body" & gt;
    พิจารณาวิธีที่คุณสามารถใช้ประโยชน์ได้
    หน่วยสำหรับการปรับขนาดโมดูลของคุณแบบไดนามิก
  & lt; / div & gt;
& lt; / div & gt;

ลองสไตล์คอนเทนเนอร์ด้านนอกกัน เราจะตั้งขนาดตัวอักษรที่ 1Rem เพื่อสร้างมูลค่า EM ในพื้นที่ของเรา จากนั้นเราจะกำหนด ชายแดนรัศมี การใช้ EMS ฉันมักจะชอบใช้ PX สำหรับชายแดนเพื่อให้ได้เส้นที่ดี

 .Panel {
  ขนาดตัวอักษร: 1Rem;
  ชายแดน: 1px Solid # 678;
  ชายแดนรัศมี: 0.3em;
  ล้น: ซ่อน;
}

ถัดไปสไตล์องค์ประกอบภายใน เราจะใช้ EMS สำหรับการขยาย จากนั้นเราจะเพิ่มขนาดตัวอักษรของหัวเรื่องเป็น 1.25 เท่าของมูลค่า EM ในพื้นที่ของเราผลิตขนาดคอมพิวเตอร์ 20px

 .Panel-heading {
  padding: 0.6em 1.2em;
  พื้นหลังสี: #CDE;
  Border-Bottom: 1px Solid # 678;
}
.Panel-Heading & GT; h3 {
  ขนาดตัวอักษร: 1.25EM;
  มาร์จิ้น: 0;
  จดหมายระยะห่าง: 0.03em;
}
. panel-body {
  padding: 0.6em 1.2em;
}

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

ปรับขนาดแบบไดนามิกการออกแบบ

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

 .Panel - ขนาดใหญ่ {ขนาดตัวอักษร: 1.2Rem; }

เราเพียงแค่เพิ่มคลาสนี้ลงในแผงเพื่อให้ใหญ่ขึ้น: & lt; div class = "แผงแผง - ใหญ่" & gt; . สิ่งนี้จะเปลี่ยนนิยามท้องถิ่นของ EM และทำให้รัศมีชายแดนและการเปลี่ยนแปลงการขยายเข้าด้วยกันพร้อมกับขนาดตัวอักษรขององค์ประกอบของเด็ก ด้วยการประกาศครั้งเดียวเราได้ปรับขนาดโมดูลทุกส่วน

A panel module, with paddings and border radius defined using ems — โมดูลแผงที่มีการพันและรัศมีเส้นขอบที่กำหนดโดยใช้ EMS

ในทำนองเดียวกันเราสามารถสร้างรุ่นเล็ก ๆ :

 .panel - ขนาดเล็ก {แบบอักษรขนาด: 0.8rem; }

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

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — เป็นไปได้ที่จะใช้ขนาดของทุกสิ่งภายในโมดูลในค่าเดียวจากนั้นเปลี่ยนค่านั้นเพื่อปรับขนาดทั้งหมด

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

ทำให้ตอบสนองได้

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

มานำหน่วยสัมพัทธ์อื่นกัน: vh . ค่าที่คำนวณของหน่วยนี้มาจากขนาดหน้าจอของผู้ใช้ มันเท่ากับ 1 เปอร์เซ็นต์ของความกว้างของวิวพอร์ต หากเราใช้หน่วย VH เพื่อกำหนดขนาดตัวอักษรรูทมันจะปรับขนาดตอบสนองอย่างต่อเนื่องโดยอัตโนมัติ Sans Media Queries ตั้งค่าขนาดตัวอักษรบนรูทเป็น 2vw :

 HTML {
  ขนาดตัวอักษร: 2VW;
}

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

 HTML {
  ขนาดตัวอักษร: calc (0.6em + 1vw);
}

ตอนนี้ขนาดตัวอักษรนั้นมาจากค่าที่เสถียรและส่วนหนึ่งจากการตอบสนอง สิ่งนี้ก่อให้เกิดผลที่ดีกว่ามาก ที่ 0.6em ทำงานเป็นขนาดตัวอักษรขั้นต่ำ ตอนนี้ root em จะมาตราส่วนอย่างคล่องแคล่วจาก 13px บนสมาร์ทโฟนเป็น 21px บนหน้าจอเดสก์ท็อปโดยเฉลี่ย

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

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

บทความนี้มีจุดเด่นในตอนแรก นิตยสารสุทธิ ปัญหา 288; ซื้อที่นี่

บทความที่เกี่ยวข้อง:

10 เทคนิคการพิมพ์นักออกแบบทุกคนควรรู้
คู่มือออกแบบในการพิมพ์และแบบอักษร
ต้นแบบการพิมพ์เว็บที่เข้าถึงได้

ออกแบบเว็บไซต์ตอบสนองด้วยการปรับขนาดที่ใช้ EM

ขนาดตัวอักษร

สร้างโมดูลด้วย EMS

ปรับขนาดแบบไดนามิกการออกแบบ

ทำให้ตอบสนองได้

วิธีการ - บทความยอดนิยม

วิธีการยืดผ้าใบและตั้งค่าสำหรับสีน้ำมัน

วิธีทดสอบปฏิกิริยาไซต์และแอป

สร้างเค้าโครงที่ตอบสนองด้วย CSS Grid

วิธีใช้ Adobe Capture CC

วิธีการทำพื้นผิวที่อร่อยด้วยดินสอ

วิธีใช้เครื่องมือดิจิตอลเพื่อสร้างรูปลักษณ์ที่วาดด้วยมือ

วิธีการสร้างผ้า CG ที่สมจริง

วิธีการสร้างผม 3 มิติและขน

หมวดหมู่