front-end by bxz

em và rem áp dụng sao cho hợp lý và những ví dụ thực tế

em và rem áp dụng sao cho hợp lý và những ví dụ thực tế

em và rem áp dụng hợp lý? em và rem là 2 đơn vị đo kích thước tương đối được sử dụng rộng rãi trong frond-end. Nhưng việc áp dụng nó là một điều không đơn giản.

Thế nào là em và rem

em là gì?

em là đơn vị tham chiếu tỷ lệ so với phần tử cha của nó dựa vào giá trị của thuộc tính font-size.

sử dụng em khi bạn muốn thay đổi kích thước thành phần con của một blockthông qua việc định nghĩa tỉ lệ font-size của thành phần cha.

nghĩa là sẽ biến đổi dựa vào giá trị font-size của phần tử cha của nó.

Ví dụ:

<div style="font-size:15px;">
    <p style="font-size: 1em;">
        font-size = "15px"
    </p>
    <p style="font-size: 2em;">
        font-size = "30px"
    </p>
</div>

rem là gì?

rem là đơn vị tham chiếu tỷ lệ so với phần tử gốc của một website dựa vào thuộc tính font-size.

sử dụng rem khi bạn muốn thay đổi kích thước tất cả các thành phần thông quan một thay đổi font-size chính của toàn trang.

nghĩa là nếu bạn thay đổi font-size cố định của thẻ html thì tất các các thành phần sẽ thay đổi tỷ lệ với thẻ html.

ví dụ:

<!DOCTYPE html>
<html lang="en" style="font-size: 16px;">

<body>
    <p style="font-size: 1rem;">
        font-size= "16px"
    </p>
    <p style="font-size: 2rem;">
        font-size= "32px"
    </p>
</body>

</html>

Một số trường hợp em và rem áp dụng linh hoạt?

Trường hợp áp dụng với thẻ heading:

Ví dụ chúng ta có 1 thẻ h2 sử dụng rem:

<h2 class="header">
    heading
</h2>
<h2 class="header header--large">
    heading
</h2>
<style>
    .header {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }

    .header--large {
        font-size: 2rem;
        padding: 1rem 1.5rem;
    }
</style>

em và rem áp dụng .header vs rem

em và rem áp dụng .header--large vs rem

Ở đây như chúng ta thấy thì các thẻ .header--large có font-size lớn gấp đôi thẻ .header nên có padding cũng lớn gấp đôi.

Trông thật là khoa học :). Nhưng phải làm như thế nào nếu chúng ta muốn thay đổi font-size của các thẻ header mà không ảnh hưởng đến padding.

<h2 class="header">
    heading
</h2>
<h2 class="header header--large">
    heading
</h2>
<style>
    .header {
        font-size: 1rem;
        padding: 0.5em 0.75em;
    }

    .header--large {
        font-size: 2rem;
    }
</style>

Khi bạn tăng font-size lên 2rem thì padding của thẻ tự động tăng tỉ lệ theo font-size. Như vậy bạn đã thấy đáp án là chúng ta sẽ sử dụng em, khi padding bằng thẻ .header bằng em thì padding này luôn tỷ lệ với font-size thẻ .header.

Nếu chỉ sử dụng em cho các thẻ heading.

<h2 class="header">
    heading
</h2>
<h2 class="header header--large">
    heading
</h2>
<style>
    .header {
        font-size: 1em;
        padding: 0.5em 0.75em;
    }

    .header--large {
        font-size: 2em;
    }
</style>

Một trang web bao giờ cũng sẽ có rất nhiều thẻ headding, nếu sử dụng em trong trường hợp chữ được căn trái hoặc phải thì rõ ràng padding-left, padding-right của thẻ .header--large  trong trường hợp trên sẽ bị gấp đôi bên .header? Thế chả lẽ được các thẻ .header chỗ thò ra chỗ thụt vào.

class .header vs em

class .header--large vs em

em và rem áp dụng chúng để giải quyết

Giải pháp ở đây là chúng ta sử dụng rem với padding-left , padding-right . Nếu ta sử dụng rem ở đây nó sẽ tỷ lệ với font-size của thẻ html nên kích thước padding-left, padding-right không bị thay đổi khi ta thay đổi font-size của thẻ .header

<h2 class="header">
    heading
</h2>
<h2 class="header header--large">
    heading
</h2>
<style>
    .header {
        padding: 0.5em 0.75rem;
        font-size: 1em;
    }

    .header--large {
        font-size: 2em;
    }
</style>

Kết quả :

class .header vs rem và em

class .header--large vs rem và em

Như vậy chúng ta đã có một thẻ heading với phần:

  • padding-top và padding-bottom thay đổi tỷ lệ với font-size của chính nó.
  • và phần padding-left , padding-right không bị ảnh hưởng.

Việc em và rem áp dụng responsive trở nên nên khoa học hơn.

Đúng như vậy mọi thứ sẽ luôn tỉ lệ với nhau. bạn chỉ cần điều chỉnh font-size của thẻ html bằng css responsive.

<!DOCTYPE html>
<html lang="en">

<body>
    <h2 class="header">
        heading
    </h2>
    <h2 class="header header--large">
        heading
    </h2>
    <style>
        .header {
            padding: 0.5em 0.75rem;
            font-size: 1em;
        }

        .header--large {
            font-size: 2em;
        }

        html {
            font-size: 30px;
        }

        @media only screen and (max-width: 1500px) {
            html {
                font-size: 10px;
            }
        }
    </style>
</body>

</html>

Kết Luận em và rem áp dụng trong thực tế:

em và rem đều được sử dụng đơn giản và linh động trong quá trình response.

nhưng việc sử dụng em và rem bừa bải sẽ gây khó khăn trong quá trình response của bạn.

việc em và rem áp dụng thực tế là quá trình cần phải có những ràng buộc nhất định.

 

Tham khảo: