Giá như rem và em thật đơn giản!
CSS3
44
tuds
22
White

tuds viết ngày 30/04/2016

Đơn vị trong website khá là nhiều và ai cũng biết như:
chú px, cô %, bé rem, bé em, cậu vh, mợ vw bà con nó còn nhiều thôi kể nhiêu đây thôi.

Thứ mà ta hay dùng nhiều nhất là chú px, tiếp theo đó là cô % một cơ số dùng bé em, rem

Thật ra rem em px điều có các mối qua hệ như gia đình với nhau trong đó chú px đóng vai trò là cột mốc 16px = 1em or 1rem. Cột mốc này bạn có thể thay đổi.

Thay đổi khi dùng Rem, Em: thường được sử dụng cho font-size nhưng nếu thích thì bạn có thể dùng cho tất cả, chỉ chịu khó tính toán 1 - 2 tiếng đồng hồ thôi.

Tôi đùa đấy, với em bạn chỉ cần biết được kích cỡ font-size hiện tại của mình và tha hồ sử dụng.

Lưu ý:

  • Vì bé em ngoan nên kích thước của em bằng với kích thước font hiện tại đang được sử dụng trên website.
  • em rất ngoan nên nó chỉ thừa hưởng kích thước của cấp cha nó.
  • Đặt biệt nếu bé em bị lòng cấp thì bạn có thể nhận được những giá trị rất thú vị như các trường họp này
<html>
  <style>
    html {font-size: 10px;}
    .be-em {font-size: 2em; /*20px;*/}
    ul li {font-size: 2rem; /*20px;*/}
  </style>
  <body>

    <div class="be-em">
      Font size 2em = 20px
      <div class="be-em">
        Font size 2em = 40px
      </div>
    </div>

    <ul>
      <li>
        Font size 2em = 20px
        <ul>
          <li>
            Font size 2em = 40px
          </li>
        </ul>
      </li>
    </ul>

  </body>
</html>

Link demo:

em khá là ngoan nên rem ra đời với tư cách ngoan hơn và dễ sử dụng hơn với việc chỉ nghe lời 1 cấp html(root), có nghĩa là bạn chỉ cần qui định font-size cho thẻ html và toàn bộ rem bên trong sẽ phụ thuộc vào nó.

Việc tính toán sẽ không mất 1-2h nữa mà sẽ ít hơn khi sử dụng.

<html>
  <style>
    html {font-size: 10px;}
    .be-em {font-size: 2rem; /*20px;*/}
    ul li {font-size: 2rem; /*20px;*/}
  </style>
  <body>

    <div class="be-rem">
      Font size 2rem = 20px
      <div class="be-rem">
        Font size 2rem = 20px
      </div>
    </div>

    <ul>
      <li>
        Font size 2rem = 20px
        <ul>
          <li>
            Font size 2rem = 40px
          </li>
        </ul>
      </li>
    </ul>

  </body>
</html>

Đặt biệt với nhu cầu các thím iphone, ipad, smartphones ngày càng nhiều, bạn chỉ cần thay đổi font-size cho từng kích thước thôi cũng là cả 1 vấn đề.

Nhưng với Rem thì bạn chỉ cần tùy chỉnh 1 nơi ở html(root) thì việc quản lý kích thước font-size cho từng device của bạn sẽ trở nên dễ dàng hơn.

html {font-size: 16px;} /*thay đổi font-szie 1 chổ này*/
h1 {font-size: 3rem; /*48px*/}
h2 {font-size: 2rem; /*32px*/}
h3 {font-size: 1rem; /*16px*/}

/*device <<< 992 Tablets*/
@media (max-width: 991px) {
  html {font-size: 14px;} /*thay đổi font-szie 1 chổ này*/
  h1 {font-size: 3rem; /*42px*/}
  h2 {font-size: 2rem; /*28px*/}
  h3 {font-size: 1rem; /*14px*/}
}
/*device <<< 768 Phones*/
@media (max-width: 767px) {
  html {font-size: 12px;} /*thay đổi font-szie 1 chổ này*/
  h1 {font-size: 3rem; /*36px*/}
  h2 {font-size: 2rem; /*24px*/}
  h3 {font-size: 1rem; /*12px*/}
}

Rem cũng có thể được sử dụng cho width height và nhiều thuộc tính khác.

Túm lại


Điểm mấu chốt là ẽm rất trung thành với cấp html(root) nên rất dễ cho bạn tùy chỉnh.
Không tốn nhiều css cho các device khác nhau.

Nó rất hay nhưng không phải thay thế hết cho tất cả website, đối với các đối tượng tuyệt đối như border, width, height, margin, padding v.v… thì ta nên dùng px để chắc chắn là nó không sai 1 ly.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

tuds

34 bài viết.
98 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
47 8
0.1 Intro Trong series này các bạn sẽ được tiếp cận từ đầu đến đích việc của một webiste tĩnh được làm như thế lào. Hứa hẹn nhiều điều thầm kính t...
tuds viết 2 năm trước
47 8
White
44 5
Dạo gần đây nhà mình hay mất mạng, mà ai cũng biết rồi dân IT, Design, Gaming, XXX, mà không có internet thì hỡi ơi cứ như là sống ở thời kì đồ đá....
tuds viết hơn 1 năm trước
44 5
White
22 2
Tiêu đề viết cho vui vậy chứ 2 chúng nó ly dị lâu rồi, đứa thì đi theo anh chiều cao vh height, đứa thì cưới chị chiều ngang vw width. 1 vw = 1% c...
tuds viết hơn 2 năm trước
22 2
Bài viết liên quan
White
27 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết gần 3 năm trước
27 8
White
17 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết hơn 2 năm trước
17 10
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
34 bài viết.
98 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!