rem แตกต่างจาก em ใน CSS อย่างไร?

ในแหล่งที่มาของเว็บไซต์บางครั้งฉันเคยเห็นนักพัฒนาใช้remหน่วยนี้ จะคล้ายกับem? ฉันลองดูว่ามันทำอะไรได้จริง แต่มันเทียบกับอะไร?

การสาธิต

HTML

<div>Hello <p>World</p></div>

CSS

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

EMs สัมพันธ์กับขนาดตัวอักษรของผู้ปกครอง

REMs สัมพันธ์กับขนาดตัวอักษรพื้นฐาน

สิ่งนี้สำคัญเมื่อคอนเทนเนอร์ระดับกลางเปลี่ยนขนาดฟอนต์ องค์ประกอบลูกที่มี EM จะได้รับผลกระทบผู้ที่ใช้ REM จะไม่ได้รับผลกระทบ

หน่วยrem (root em) ย่อมาจากขนาดตัวอักษรขององค์ประกอบราก ในเอกสาร HTML องค์ประกอบรากคือhtmlองค์ประกอบ การรองรับเบราว์เซอร์ยังมีข้อ จำกัด

แม้ว่าemจะสัมพันธ์กับขนาดฟอนต์ของพาเรนต์โดยตรงหรือที่ใกล้ที่สุด แต่remจะสัมพันธ์กับขนาดฟอนต์ html (root) เท่านั้น

emให้ความสามารถในการควบคุมพื้นที่ของการออกแบบ เช่นเดียวกับการปรับขนาดประเภทในพื้นที่เฉพาะนั้นค่อนข้างมาก remช่วยให้สามารถปรับขนาดประเภททั่วทั้งหน้าได้อย่างง่ายดาย

นี่คือตัวอย่าง divsขนาดที่มีremการเปลี่ยนแปลงในขณะที่เราเปลี่ยนfont-sizeของhtmlองค์ประกอบ ขณะที่ขนาดที่มีemการเปลี่ยนแปลงเท่านั้นในขณะที่เราเปลี่ยนของfont-sizediv

$(function() {
  var htmlSize = $('input#html');
  htmlSize.change(function() {
    $('html').css('font-size', htmlSize.val() + 'px');
  });

  var divSize = $('input#div');
  divSize.change(function() {
    $('div').css('font-size', divSize.val() + 'px');
  });
});

* {
  float: left;
  font-size: 20px;
  margin:2px;
}
label {
  clear:both;
}
div {
  border: thin solid black;
}
div.rem1 {
  width:4rem;
  height: 4rem;
  clear: both;
}
div.rem2 {
  width: 3rem;
  height: 3rem;
}
div.em1 {
  width: 4em;
  height: 4em;
  clear: both;
}
div.em2 {
  width: 3em;
  height: 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Change html font-size
  <input id="html" type='number' value="20" min="18" max="30" />
</label>
<div class="rem rem1">rem</div>
<div class="rem rem2">rem</div>
<label>Change div font-size 
  <input id="div" type='number' value="20" min="18" max="30" />
</label>
<div class="em em1">em</div>
<div class="em em2">em</div>

โดยทั่วไปแล้วemจะสัมพันธ์กับพาเรนต์ที่ใกล้ที่สุดใน CSS ในขณะที่remสัมพันธ์กับพาเรนต์ของเพจซึ่งโดยปกติจะเป็นแท็ก html ...

คุณจะเห็นความแตกต่างอย่างชัดเจนหากคุณเรียกใช้ css ด้านล่างและผลกระทบของพาเรนต์:

html {
  font-size: 16px;
}

.lg-font {
  font-size: 30px;
}

p.rem {
  font-size: 1rem;
}

p.em {
  font-size: 1em;
}

<div class="lg-font">
  <p class="em">Hello World - em</p>
</div>

<div class="lg-font">
  <p class="rem">Hello World - rem</p>
</div>

สรุป:

• rem: CSSหน่วยที่สัมพันธ์กับขนาดตัวอักษรของhtmlองค์ประกอบ
• em: CSSหน่วยที่สัมพันธ์กับขนาดตัวอักษรขององค์ประกอบหลัก

ตัวอย่าง:

.element {
  width: 10rem;
  height: 10rem;
  background-color: green;
  font-size: 5px;
}

.innerElement {
  width: 10em;
  height: 10em;
  background-color: blue;
}

<div class="element">
  <div class="innerElement"></div>
</div>

ในตัวอย่างด้านบนสี่เหลี่ยมสีเขียวคือ 160px x 160 px (เว้นแต่คุณจะไม่มีค่าเริ่มต้นของเบราว์เซอร์16px) เนื่องจากเบราว์เซอร์เริ่มต้นของhtmlองค์ประกอบfont-sizeคือ16pxและ10rem* 16px= 160

สี่เหลี่ยมข้างใน10emใหญ่ เพราะองค์ประกอบหลักของมันคือ5pxตารางคือ 5em * =10px 50px

สิ่งนี้มีประโยชน์อย่างไร:

โดยกำหนดให้ทุกหน่วยงานremมีข้อดีดังนี้

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

rem, em และ px เป็นหน่วยของขนาดตัวอักษรที่แตกต่างกันใน css

em เท่ากับขนาดฟอนต์ที่คำนวณของพาเรนต์ขององค์ประกอบนั้น เช่นองค์ประกอบ div ที่กำหนดด้วย font-size: 16px ลูกของมัน 1em = 16px

REM ค่า REM เป็นญาติกับองค์ประกอบรากของ html เช่น: หากขนาดแบบอักษรขององค์ประกอบรากคือ 16px 1 rem = 16px สำหรับองค์ประกอบทั้งหมด

อ้างอิง: https://medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97

https://stackoverflow.com/a/13941345/9093112 - เป็นคำตอบที่ดีที่สุด แต่ฉันต้องการเพิ่มเท่านั้น

Default browser size is 16px = 1em = 1 rem

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

หากเราต้องการใช้ ems สำหรับขนาดฟอนต์การอ้างอิงนั้นเป็นเพียงผู้ปกครองที่คำนวณขนาดตัวอักษรที่คล้ายกับสิ่งที่เกิดขึ้นกับเปอร์เซ็นต์

ในตัวอย่างต่อไปนี้ขนาดแบบอักษรสาม em บนองค์ประกอบลูกส่วนหัวจะให้ผลลัพธ์เป็น 72 พิกเซลเพียงเพราะนั่นคือขนาดตัวอักษรหลักสามเท่าซึ่งก็คือ (150/100) * 16 = 24px ตอนนี้สำหรับความยาวมันต่างกันนิดหน่อย ช่องว่างภายใน 2em บนส่วนหัวเนื่องจากเป็นการวัดความยาวจึงใช้ขนาดตัวอักษรขององค์ประกอบปัจจุบันเป็นข้อมูลอ้างอิงและเรารู้แล้วว่านั่นคือ 24 พิกเซลดังนั้น 2em จะส่งผลให้มีช่องว่างภายใน 48 พิกเซลใช่หรือไม่ มันเป็นความแตกต่างที่ลึกซึ้ง แต่เป็นสิ่งสำคัญ เมื่อคุณใช้ em ถ้าเป็นแบบอักษรการอ้างอิงคือพาเรนต์และสำหรับความยาวการอ้างอิงคือองค์ประกอบปัจจุบัน

html,body{
font-size:16px;
width:80vw;
}
header{
font-size:150%;
padding 2em;
margin-bottom:10rem;
height:90vh;
widht 1000px;
}
header-child{
font-size:3em;
padding:10%;
}

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

ในemญาติหน่วยขนาดตัวอักษรเป็นวัดที่อยู่บนฐานของขนาดตัวอักษรผู้ปกครองที่ใกล้ที่สุดแต่ถ้าขนาดตัวอักษรไม่ได้กำหนดไว้สำหรับการใด ๆ ขององค์ประกอบของผู้ปกครองแล้วโดยขนาดตัวอักษรเริ่มต้นจะถูกกำหนดให้เป็นไปตามองค์ประกอบราก HTML

REMญาติหน่วยมีการคำนวณโดยเฉพาะองค์ประกอบ HTML รากจึงขนาดตัวอักษรขององค์ประกอบหลักไม่ได้ส่งผลกระทบต่อมัน

หน่วยวัด CSS: em , remทั้งสองเทียบกับขนาดหน้าหลักของผู้ปกครอง ขนาดจะเปลี่ยนไปตามขนาดตัวอักษรของผู้ปกครอง ตัวอย่าง:
rem : 100% ของขนาดตัวอักษร Root Element
em : 100% ของขนาดตัวอักษรหลัก