Sự khác biệt giữa Rem và EM trong CSS, vh và vw trong Responsive

Posted on by mtoplistChuyên mục:Top List

Trong bài viết này chúng ta sẽ cùng tìm hiểu sự khác nhau giữa 2 đơn vị là “rem” và “em” trong CSS. Đồng thời, tìm hiểu về vh và vw cũng là hai đơn vị cực kỳ hữu ích trong thiết kế Responsive cùng với cách giải quyết vấn đề khoảng trắng ở mép trên, mép trái của website.

Video hướng dẫn của Tác giả trên Youtube

Ví dụ

Chúng ta cùng làm quen với các đơn vị này thông qua một ví dụ của một website đơn giản như sau:

(Các bạn có thể coppy code phía dưới và làm theo nhé!)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./mystyle.css">
</head>
<body>
<div class="container">
<p>
CKmobile
</p>
</div
</body>
</html>

mystyle.css

.container{
text-align: center;
}

Sự khác biệt giữa rem và em

  • rem là mối quan hệ tương đối giữa phần tử sử dụng đơn vị này với định dạng gốc của html (root element)

  • em là mối quan hệ tương đối giữa phần tử sử dụng đơn vị này với định dạng của phần tử cha

Bây giờ chúng ta cùng đến với ví dụ, ta có thể thấy fonsize của html là 16px:

Rem

Bây giờ chúng ta tạo một phần tử với fontsize là 5rem

.container{
text-align: center;
}
p{
font-size:5rem;
}

Bạn có thể thấy fontsize của phần tử đó trong định dạng là 80px (tức 16 * 5):

Em

Còn nếu như ta chuyển từ 5rem sang 5em, như thế này:

.container{
text-align: center;
}
p{
font-size:5em;
}

Kích thước vẫn như cũ … 

Là vì fontsize của phần tử cha của <p> (thẻ <div> thuộc class container) và nó bằng với fontsize của phần tử root html. Để hiểu được sự khác biệt này, chúng ta cùng đổi fontsize của lớp container thành 2px.

.container{
text-align: center;
font-size:2px;
}
p{
font-size:5em;
}

Bây giờ <p> đã có định dạng fontsize là 10px (tức 2px*5)

Đơn vị vh là vw

  • vh: tương đương 1% chiều cao của viewport (kích thước cửa sổ trình duyệt).

  • vw: tương đương 1% chiều rộng của viewport (kích thước cửa sổ trình duyệt).

.container{
text-align: center;
background: blue;
height: 50vh;
}

Chúng ta định dạng chiều cao của container là 50vh, ta sẽ được chiều cao container là 50% của sổ trình duyệt:


Chúng ta đổi thành 100vh sẽ được:


Bạn có thấy rằng, dù là 100% nhưng vẫn còn những viền trắng ở phía mép trái và mép trên không? Để khắc phục khoảng trống này, đơn giản chúng ta cần cài dặt lại thuộc tính margin trong css file thôi:

*{
margin: 0;
}

Bây giờ container sẽ chiếm toàn màn hình rồi!

Bây giờ ta thêm vào đó một thẻ <div> khác, bạn vẫn sẽ thấy container xanh này chiếm trọn màn hình cho đến khi bạn kéo xuống.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>Document</title>
<link rel="stylesheet" href="./mystyle.css">
</head>
<body>
<div class="container">
<p>
CKmobile
</p>
</div>
<div class="container2">Welcome to ckmobile</div>
</body>
</html>

wh cũng là tương tự, chúng ta cùng làm một ví dụ nhỏ:

.container{
text-align: center;
background: blue;
height: 50vh;
width: 100vw;
}

Tác giả Ckmobile

Dịch bởi Devera Academy

mtoplist