Video học lập trình mỗi ngày

Hôm qua, tìm hiểu css thì thấy có nhiều khái niệm mình nhìn thấy nhiều mà không hiểu tại sao họ lại sử dụng nó ví dụ như rem, em, vh, vw và còn nhiều cái nữa, thật sự là mình gặp rồi mà không biết phải hiểu sao. Nên thử đi tìm và viết lại cho em khi cần thiết.

px là gì?

px chính là giá trị của pixel và là chiều dài tuyệt đối, hay cố định, chẳng hạn như mét hay cm mà chúng ta hay lấy để đo. Nếu như vậy thì rem là gì? Và các khái niệm khác như thế nào?

rem là gì? Tại sao sử dụng rem, em?

Đương nhiên với thời đại 4.0 thì việc cố định một chiều dài là không thể phù hợp nữa. Ví dụ trên ipad thì font-size nó khác, khi sử dụng iphone thì nó cũng khác, vậy làm sao để đạt được điều đó. Như vậy khi sử dụng pixel không còn có thể đáp ứng nhu cầu hiện tại của chúng ta.

Ví dụ: Khi chúng ta thu nhỏ màn hình, chúng ta không chỉ cần giảm chiều rộng và chiều cao của hộp mà còn muốn giảm kích thước phông chữ để trải nghiệm người dùng tốt hơn nữa, đúng không?

1 rem = px và mối quan hệ giữa rem và px

Giờ ta đi vào mục tiêu chính của bài viết này, để xem xét một số tình huống dưới đây và hiểu về mối quan hệ giữa rem và px ra sao? 1 rem = px là bao nhiêu?

Giá trị của rem là bội số của px

Theo mặc định font-size = 16px, thì sau đó 1rem = 16px. Vậy chúng ta có thể sửa đổi mối quan hệ tính toán tương đối giữa rem và px được không? Câu trả lời là được. Chúng tôi có thể và chỉ có thể sửa đổi nó trong thẻ html (vì nút html là node root, là r: root trong rem)

ví dụ:

<div class="div-rem">rem</div>
html{
    font-size:16px;  // 1rem = 16px
}

.div-rem{
    width: 10rem;    // 10rem = 10 x 16 = 160px
    height: 10rem;   // 10rem = 10 x 16 = 160px
    font-size: 1rem; // 1rem = 16px
    background-color: #a58778;
}

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

Trên đó chúng ta nói về rem giờ xem thử em và px khác nhau như thế nào? Cũng tương tự như rem, thì giá trị của em là bội số của px. Theo mặc định font-size = 16px, thì sau đó 1em = 16px. Ủa nếu nói như vậy thì em và rem khác gì nhau? Trên đây cũng là sự khác biệt giữa rem và em:

• Rem chỉ có thể đặt giá trị phụ thuộc của rem trong thẻ html.

• Và em là giá trị có thể được đặt trong phần tử của chính nó và phần tử mẹ.

  Xem ví dụ sau:

<!--em1-->
<div class="div-em">em</div>

<!--em2-->
<div class="div-em-father">
    <div class="div-em-child">em child</div>
</div>

.div-em{
    font-size: 32px;  // 1em = 32px

    width: 10em;      // 10em = 10 x 32 = 320px
    height: 10em;     // 10em = 10 x 32 = 320px
    background-color: aquamarine;
}

.div-em-father{
    font-size: 64px;  // 1em = 64px
}

.div-em-child{
    width: 10em;     // 10em = 10 x 64 = 640px
    height: 10em;    // 10em = 10 x 64 = 640px
    background-color: cadetblue;
}

vh vw là gì?

Có thể bạn cũng như tôi không biết gì về Vh và vw. Hai thằng này được chia thành 100 phần bằng nhau theo chiều rộng và chiều cao của browser, 100vh có nghĩa là toàn bộ chiều cao và 50vh có nghĩa là một nửa chiều cao. Tuy nhiên nó có tính theo % nữa. Vậy sự khác biệt giữa vh và vw và tỷ lệ phần trăm là gì? 🤔

Tỷ lệ phần trăm dựa trên cài đặt của phần tử mẹ. Nếu phần tử mẹ là 100px, thì 100% của phần tử con là 100px. Và vh và vw luôn đề cập đến chiều rộng và chiều cao của browser. Mã

<!--vh vw-->
<div class="div-vh-vw">

    <!-- Tỷ lệ %-->
    <div class="div-vh-vw-child"></div>

</div>

.div-vh-vw{
    width: 10vw;  // Chiều rộng broswer 1/10
    height: 10vh;  // Chiều cao 1/10
    background-color: pink;
}

.div-vh-vw-child{
    width: 50%;
    height: 50%;
    background-color: aliceblue;
}

Tóm lại

Tạm vậy đí, biết để mà tìm hiểu kỹ hơn. Không bài báo nào có thể giúp bạn hiểu hết 100%, giống như việc không có con thuyền nào bắt hết cá ở đại dương được.

Happy coding!!!