Trong nguồn trang web, đôi khi tôi thấy các nhà phát triển sử dụng remđơn vị này. Nó có tương tự với em? Tôi đã thử nó để xem nó thực sự làm gì, nhưng nó tương đối với cái gì?
HTML
<div>Hello <p>World</p></div>
CSS
div {
font-size: 1.4rem;
}
div p {
font-size: 1.4rem;
}
Câu trả lời:
EMs liên quan đến kích thước phông chữ của cha mẹ chúng
REMs liên quan đến kích thước phông chữ cơ sở
Điều này rất quan trọng khi các vùng chứa trung gian thay đổi kích thước phông chữ. Các phần tử con có EM sẽ bị ảnh hưởng, những phần tử sử dụng REM thì không.
Trong khi em có liên quan đến kích thước phông chữ của cha mẹ trực tiếp hoặc gần nhất của nó, rem chỉ tương đối với kích thước phông chữ html (gốc).
em cung cấp khả năng kiểm soát một khu vực của thiết kế. Như trong, chia tỷ lệ loại trong khu vực cụ thể đó một cách tương đối. rem cung cấp khả năng mở rộng loại trên toàn bộ trang một cách dễ dàng.
Đây là một ví dụ. divskích thước với remsự thay đổi khi chúng ta thay đổi font-sizecủa htmlphần tử. Trong khi những người có kích thước với emthay đổi duy nhất là chúng ta thay đổi font-sizecủa div.
$(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>Về cơ bản em là liên quan đến cha mẹ gần nhất trong CSS, trong khi rem là liên quan đến trang gốc của trang, thường là thẻ html ...
Bạn sẽ thấy sự khác biệt rõ ràng nếu bạn chạy css bên dưới và cách phụ huynh đang ảnh hưởng đến nó:
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: một CSSđơn vị có liên quan đến kích thước phông chữ củahtml phần tử.em: một CSSđơn vị có liên quan đến kích thước phông chữ của phần tử mẹ .Thí dụ:
.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>Trong ví dụ trên, hình vuông màu xanh lục có kích thước 160px x 160 px (trừ khi bạn không có mặc định của trình duyệt 16px). Điều này là do trình duyệt mặc định của htmlphần tử font-sizelà 16pxvà 10rem* 16px= 160.
Hình vuông bên trong 10emlớn. Vì phần tử mẹ của nó là 5pxhình vuông là 5em * 10px = 50px.
Bằng cách thiết lập tất cả các đơn vị để remcó những ưu điểm sau:
remsẽ thay đổi tỷ lệ tương ứng.16pxcủa ứng dụng của chúng tôi sẽ chia tỷ lệ với kích thước phông chữ đã chọn của người dùng.rem, em và px là các đơn vị kích thước phông chữ khác nhau trong css.
em Một em bằng kích thước phông chữ được tính toán của phần tử gốc của phần tử đó. ex: div phần tử được xác định với font-size: 16px, con của nó 1em = 16px.
Các giá trị rem rem có liên quan đến phần tử html gốc. ví dụ: Nếu kích thước phông chữ của phần tử gốc là 16px, 1 rem = 16px cho tất cả các phần tử.
Tham khảo: https://medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97
https://stackoverflow.com/a/13941345/9093112 - đó là câu trả lời hay nhất nhưng tôi chỉ muốn thêm
Default browser size is 16px = 1em = 1 rem
em và rem là các đơn vị tương đối dựa trên phông chữ và sẽ khác nhau khi sử dụng ems cho phông chữ hoặc cho độ dài, vì vậy cả ems và rems đều dựa trên phông chữ nhưng sự khác biệt giữa chúng là ems sử dụng phần tử gốc hoặc phần tử hiện tại làm tham chiếu trong khi rems sử dụng kích thước phông chữ gốc làm tham chiếu.
Nếu chúng ta muốn sử dụng ems cho kích thước phông chữ thì tham chiếu chỉ đơn giản là kích thước phông chữ được tính toán của cha mẹ tương tự như những gì xảy ra với tỷ lệ phần trăm.
Trong ví dụ dưới đây, kích thước phông chữ ba em trên phần tử con tiêu đề dẫn đến 72 pixel đơn giản vì đó là ba lần kích thước phông chữ mẹ là (150/100) * 16 = 24px. Bây giờ về độ dài, nó chỉ khác một chút. Phần đệm 2em trên tiêu đề, vì đó là phép đo chiều dài, sử dụng kích thước phông chữ của phần tử hiện tại làm tham chiếu và chúng ta đã biết đó là 24 pixel, vì vậy 2em sẽ dẫn đến phần đệm 48 pixel, hiểu không? Đó là một sự khác biệt nhỏ, nhưng là một điều quan trọng. Khi bạn sử dụng em nếu nó cho phông chữ thì tham chiếu là gốc và cho chiều dài, tham chiếu là phần tử hiện tại.
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%;
}
Về phần còn lại, nó thực sự hoạt động theo cùng một cách cho cả kích thước và độ dài phông chữ vì nó luôn chỉ sử dụng kích thước phông chữ gốc làm tham chiếu. Điều này có nghĩa là 10 đoạn đệm rem mà chúng ta có ở đây sẽ dẫn đến 160 pixel vì kích thước phông chữ gốc là 16.
Trong đơn vị tương đối em , kích thước phông chữ được đo trên cơ sở của kích thước phông chữ mẹ gần nhất nhưng nếu kích thước phông chữ không được xác định cho bất kỳ phần tử mẹ nào thì theo kích thước phông chữ mặc định sẽ được xác định theo phần tử html gốc
Các rem đơn vị tương đối được tính chỉ bởi yếu tố html gốc , do đó, kích thước font chữ của phần tử cha mẹ không ảnh hưởng đến nó
Đơn vị đo lường CSS: em , rem đều có liên quan đến kích thước phía trước của cha mẹ chúng. Kích thước sẽ thay đổi tùy thuộc vào kích thước phông chữ Cha mẹ của nó. Ví dụ:
rem : 100% kích thước phông chữ Phần tử gốc.
em : 100% cỡ chữ gốc.