Sau khi viết xong bài trước về sự khác nhau giữa 2 đơn vị em và rem thì nhiều bạn có nói rằng “nếu có demo thì tốt hơn” thế nên hôm nay mình viết bài “nên sử dụng em hay rem vào dự án” này kèm theo demo là 1 trang mình cắt đơn giản sử dụng 2 đơn vị này. Các bạn có thể xem tại đây. Show
# Áp dụng Đầu tiên thì các bạn inspect code(F12) rồi các bạn chọn thẻ html {
font-size: 62.5%;
}Ở bài trước mình có nói mặc định font-size ở hầu hết trình duyệt là 16px tức là 100%. Nghĩa là 1em = 1rem = 100% = 16px. Thế mình muốn có một div nào đó có .task__item {
margin-bottom: 4rem;
padding: 2.5rem;
background-color: white;
-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}0 là 50px đi thì mình phải tính toán 50px / 16px được bao nhỉ ? Lấy máy tính ra tính à được 3.125(em-rem). Như vậy mất thời gian quá nhỉ ?Đó là lý do mình set ở thẻ .task__item {
margin-bottom: 4rem;
padding: 2.5rem;
background-color: white;
-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}2. Hehe. Giờ box có width 50px à dễ thôi cho width = 5rem là xong vì giờ tính toán lẹ hơn, tính được trong đầu ngay lập tức 50/10 = 5.Thế là mình áp dụng chúng vào cái template này như thế. Các bạn có thể thấy cách mình làm ở .task__item {
margin-bottom: 4rem;
padding: 2.5rem;
background-color: white;
-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}4(F12 rồi chọn thẻ div có class này nhé).task__item {
margin-bottom: 4rem;
padding: 2.5rem;
background-color: white;
-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}Mình cho margin-bottom .task__item {
margin-bottom: 4rem;
padding: 2.5rem;
background-color: white;
-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}5 thì sẽ tương ứng 40px vì đơn vị .task__item {
margin-bottom: 4rem;
padding: 2.5rem;
background-color: white;
-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}6 chỉ phụ thuộc vào thẻ<html> nên mình không lo lắng.Tại sao mình không chọn .task__item {
margin-bottom: 4rem;
padding: 2.5rem;
background-color: white;
-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}8 trong trường hợp này là vì nó phụ thuộc vào giá trị của thuộc tính font-size của chính nó hoặc phần tử cha chứa nó nên mình sợ nảy sinh nhiều vấn đề. Các bạn xem ví dụ dưới nè..task__item {
margin-bottom: 4em;/*Mình đổi ở đây*/
padding: 2.5rem;
background-color: white;
-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
font-size: 2rem;/*Thêm thuộc tính font-size vô đây*/
}Giờ mình thay đổi giá trị .task__item {
margin-bottom: 4em;/*Mình đổi ở đây*/
padding: 2.5rem;
background-color: white;
-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
font-size: 2rem;/*Thêm thuộc tính font-size vô đây*/
}0 thành .task__item {
margin-bottom: 4em;/*Mình đổi ở đây*/
padding: 2.5rem;
background-color: white;
-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
font-size: 2rem;/*Thêm thuộc tính font-size vô đây*/
}1 và thêm font-size là .task__item {
margin-bottom: 4em;/*Mình đổi ở đây*/
padding: 2.5rem;
background-color: white;
-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
font-size: 2rem;/*Thêm thuộc tính font-size vô đây*/
}3 thì lúc này margin-bottom .task__item {
margin-bottom: 4em;/*Mình đổi ở đây*/
padding: 2.5rem;
background-color: white;
-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
font-size: 2rem;/*Thêm thuộc tính font-size vô đây*/
}1 sẽ tương đương với 80px chứ ko phải là 40px như của đơn vị .task__item {
margin-bottom: 4rem;
padding: 2.5rem;
background-color: white;
-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}6, như vậy sẽ không được như bạn mong muốn. Các bạn phải tính toán kỹ khi dùng với đơn vị .task__item {
margin-bottom: 4rem;
padding: 2.5rem;
background-color: white;
-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}8 nhé.Bây giờ khi resize xuống màn hình nhỏ hơn như IPad, Mobile mình thấy toàn website kích thước to quá nhìn không hợp. Thay vì chỉnh từng cái thì mình set giá trị html {
font-size: 50%; /* Các bạn có thể set bao nhiêu tùy yêu cầu hay design nhé */
}Các bạn có thể mở template mình đã làm rồi Inspect code, resize trình duyệt và check code để xem cách mình áp dụng đơn vị .task__item {
margin-bottom: 4rem;
padding: 2.5rem;
background-color: white;
-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}6 như thế nào nhé. Nếu không hiểu thì có thể bình luận ở dưới mình sẽ trả lời nha.Ah còn 1 điểm lưu ý nữa đó là trong @media queries mình ít sử dụng html {
font-size: 50%; /* Các bạn có thể set bao nhiêu tùy yêu cầu hay design nhé */
}0 hay là .task__item {
margin-bottom: 4rem;
padding: 2.5rem;
background-color: white;
-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}6 mà mình lại sử dụng .task__item {
margin-bottom: 4rem;
padding: 2.5rem;
background-color: white;
-webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}8. Ở đây mình nói là bên trong cái dấu () của @media queries chớ không phải nội dụng bên trong dấu {} này nha các bạn đừng hiểu sai ý mình.@media only screen and (max-width: 60em /*giá trị này*/){}Có rất nhiều lý do ở đây giữa 3 đơn vị này khi dùng cho @media queries. Nó rất dài để giải thích nên mình có tìm tòi và đọc được 1 bài viết khá hay, chi tiết nói về vấn đề này các bạn có thể xem tại đây nha. # Lời kết
Còn các bạn thì dùng như thế nào ? Cùng chia sẻ ở bên dưới bình luận nhé. Hi vọng với những kiến thức mà mình chia sẻ sẽ giúp ích cho các bạn phần nào trong việc học tập và code. Chúc các bạn ngày tốt lành. 1rem bằng bao nhiêu?Để đơn giản hóa tính toán, mình thường để font-size của root là 10px (=1rem), như vậy, 1.6rem = 16px.
1 zem bằng bao nhiêu px?Như vậy thì một đơn vị em trong CSS sẽ tương đương với bao nhiêu đơn vị pixel? Thì khi đó 1em sẽ tương đương với 16px .
Khi nào dùng rèm và em?Kích thước font chữ ảnh hưởng khá nhiều đến thiết kế của một website. Vì thế ta nên sử dụng rem, em để đảm bảo với bất kỳ kích thước font chữ nào người dùng thiết lập thì bố cục trang web của bạn cũng sẽ điều chỉnh phù hợp với kích thước font đó. Ví dụ trên các trình duyệt phổ biến, kích thước font mặc định là 16px.
1em là gì?em : Là đơn vị tham chiếu tỷ lệ so với phần tử mẹ của nó dựa vào giá trị của thuộc tính font-size . Ví dụ bạn đặt cho font-size cho phần tử mẹ của nó là 19px thì nếu bạn sử dụng em trong khu vực phần tử đó thì 1em = 19px.
|
