Chuyển px sang rem trong CSS

Dẫn nhập

Trong bài học trước chúng ta đã kết thúc việc TÌM HIỂU CÁCH HOẠT ĐỘNG CỦA CSS. Quá trình CSS convert rem, em, % về px, cách mà browser xử lí việc khai báo properties chồng chéo nhau cho cùng 1 element, …

Trong bài học này chúng ta sẽ cùng nhau tìm hiểu cách Chuyển px sang rem (convert px to rem).

---

Nội dung

Để tiếp thu tốt bài học này các bạn cần:

• Có kiến thức cơ bản về CSS.
• Đã xem qua bài TỔNG QUAN CÁCH HOẠT ĐỘNG CỦA CSS VÀ 3 THỨ ĐỂ TẠO 1 WEBSITE TỐT.
• Đã xem qua bài XỬ LÍ TRÙNG LẶP KHI KHAI BÁO CÁC FEATURES HAY CÁC PROPERTIES CỦA CSS
• Đã xem qua bài TÌM HIỂU QUÁ TRÌNH XỬ LÝ CUỐI CÙNG CỦA CSS

Trong bài này chúng ta sẽ cùng nhau:

• Convert px sang rem
• Sử dụng thuộc tính inherit trong Css
• Chú ý

---

Convert px sang rem

Ở trong bài  TÌM HIỂU QUÁ TRÌNH XỬ LÝ CUỐI CÙNG CỦA CSS chúng ta đã biết rằng việc sử dụng rem sẽ giúp chỉnh responsive 1 cách dễ dàng hơn. Và trong bài này chúng ta sẽ áp dụng điều đó vào project Web Landing Page của chúng ta:

SELTAUGHT LANDING PAGE

Đầu tiên, cùng nhắc lại kiến thức về công thức convert rem sang px:

Giá trị px của element = Giá trị rem của element * root fontsize của browser

 Trong đó:

• giá trị default root fontsize là 16px

Trước hết để chỉnh dễ dàng chúng ta set root fontsize là 10px trong project Web Landing Page của chúng ta.

html{
    font-size: 10px;
}

Từ đây chúng ta sẽ convert toàn bộ giá trị px của các element sang rem.

• Ví dụ: 

35px = 3.5rem

40px = 4rem

Sau khi chỉnh xong chúng ta sẽ thấy webpage không có gì thay đổi.

Tiếp tục ví dụ về lợi ích khi sử dụng rem. Ta thu nhỏ website lại

Ta thấy heading text bị tràn ra ngoài, bây giờ ta chỉ cần chỉnh duy nhất root fontsize từ 10px xuống 7px, thì sẽ được kết quả như sau:

Từ đó ta thấy thay vì phải chỉnh media queries cho từng properties thì ta chỉ cần chỉnh media queries cho root fontsize mà thôi.

Vậy ta có thể thấy lợi ích của việc sử dụng rem thay vì px. Và tất nhiên trong khóa học này chúng ta sẽ lựa chọn cách tối ưu hơn, sử dụng rem trong xuyên suốt Project thay vì px như lúc trước.

---

Sử dụng thuộc tính inherit trong CSS

Ở đây ta biết fontsize là 1 property có thể thừa kế (inherit) được.

Ta có thể chỉnh từ 10px sang 62.5% (16px*62.5% = 10px).

html{
    font-size: 62.5%;
}

Tuy nhiên có những property lại không mặc định có thể inherit được (ví dụ như property: box-sizing)

Ở đây để ép thuộc tính có thể thừa kế ta sử dụng giá trị inherit của CSS.

body{
    box-sizing: border-box;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

Trong đó, * sẽ sử dụng được thừa kế giá trị (border-box) từ cha là element body.

---

Chú ý

Thêm chỉnh sửa cải tiến nữa khi set thuộc tính cho *, thì ta thấy rằng chúng ta có sử dụng nhiều pseudo class là ::before, ::after. Nên chúng ta sẽ khai báo mặc định thêm cho các pseudo-class này như sau.

*,
*::before,
*::after{
margin: 0;
padding: 0;
box-sizing: inherit;
}

Tương tự việc set cho * thì set mặc định cho *::after và *::before để chúng ta không gặp những lỗi không mong muốn khi set width, padding, margin, … cho các pseudo element này.

Chúng ta cũng chú là việc sử dụng rem, cũng như thuộc tính inherit và các thuộc tính khác trong khóa học này sẽ không áp dụng được cho các browser đời cũ. Tuy nhiên mục đích của khóa học là cung cấp nhưng công cụ modern của CSS nên chúng ta sẽ không hướng đến mục tiêu hiển thị website trên tất cả các browser :D.

---

Code CSS

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html{
    font-size: 62.5%;
}

body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.7;
    color: #777777;
    padding: 3rem;
    box-sizing: border-box;
}

header{
    background-image: 
    linear-gradient(to right bottom, rgba(142, 158, 252, .8),rgba(28, 62, 255, .8)),
    url('../img/background1.jpg');
    background-size: cover;
    background-
    
    height: 95vh;
}

header{
    -webkit-clip-path: ellipse(60% 60% at 50% 33%);
    clip-path: ellipse(60% 60% at 50% 33%);
}

.text-box{
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.logo{
    height: 7rem;
} 

.logo-box{
    
    top: 3rem;
    left: 3rem;
} 

.heading-primary{
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 6rem;
}

.heading-primary__main{
    display: block;
    font-size: 6.2rem;
    font-weight: 400;
    letter-spacing: 1.5rem;
}

.heading-primary__sub{
    display: block;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1.8rem;
}

.btn,
.btn:link,
.btn:visited{
    text-transform: uppercase;
    text-decoration: none;
    padding: 1.5rem 4rem;
    display: inline-block;
    border-radius: 10rem;
    font-size: 1.6rem;
    
    transition: all .2s;
}

.btn::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 10rem;
    transition: all .4s;
}

.btn:hover{
    transform: translateY(-.3rem);
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .2);
}

.btn:active{
    outline: none;
    transform: translateY(-.1rem);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}
.btn-white{
    color: #777777;
    background-color: #fff;
}

.btn-white::after{
    background-color: #fff;
}

.btn:hover::after{
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}

.heading-primary__main{
    animation: moveInLeft 1s ease-out;
}

.heading-primary__sub{
    animation: moveInRight 1s ease-out
}

.btn-animated{
    animation: moveInBottom .5s ease-out .75s;
    animation-fill-mode: backwards;
}

@keyframes moveInLeft {
    0% {
        opacity: 0;
        transform: translateX(-10rem);
    }

    80% {
        transform: translateX(1rem)
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveInRight {
    0% {
        opacity: 0;
        transform: translateX(10rem);
    }

    80% {
        transform: translateX(-1rem)
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveInBottom {
    0% {
        opacity: 0;
        transform: translateY(3rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

---

Kết luận

Trong bài học này chúng ta đã cùng nhau Convert px sang rem.

Ở bài học sau chúng ta sẽ cùng nhau TÌM HIỂU VỀ BEM ( CÁCH ĐẶT TÊN CLASS).

Cảm ơn các bạn đã theo dõi bài viêt. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: "Luyện tập – Thử thách – Không ngại khó".

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.