Responsive CSS tips

Hello các bạn. Trong bài viết này, mình sẽ chia sẻ cho bạn một số tips mà cá nhân mình đang sử dụng khi thiết kế các trang web responsive.

Responsive là gì?

Có thể hiểu đơn giản, Web Responsive là cách thiết kế website làm sao cho các phần tử trong web hiển thị phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình.

Ví dụ: Bạn mở trang chủ của website homiedev.com, rồi thu nhỏ trình duyệt hoặc nhấn F12 sau đó CTRL + Shift + M, bạn sẽ thấy website của mình không bị vỡ giao diện, mà nó sẽ thay đổi layout sao cho tương thích với độ phân giải màn hình.

Hoặc là khi bạn sử dụng các thiết bị cảm ứng để lướt web thì với chế độ xoay thiết bị thì trang web mà bạn thấy sẽ chuyển đổi sang chế độ hiển thị khác phù hợp với độ phân giải hiện tại.

Sau đây mình xin đưa ra một số tips (sẽ update thêm) mà hiện tại mình đang sử dụng. Cùng theo dõi nhé!

Responsive css tips

Sử dụng percentages

Có thể các bạn đang sử dụng pixel để set width/height cho nội dung hay hình ảnh cho trang web của mình. Nhưng nếu sử dụng pixel, nó vẫn sẽ giữ nguyên width/height khi các bạn thay đổi về kích thước màn hình và nó làm cho trang web trông không đẹp mắt và gây ấn tượng xấu. Thay vì sử dụng px, các bạn có thể sử dụng các đơn vị như percentages để điều chỉnh width/height. Vì nó tự điều chỉnh theo kích thước màn hình.

Sử dụng em và rem

em và rem là hai đơn vị phụ thuộc vào đơn vị của phần tử khác. Khi sử dụng em và rem sẽ giúp ích rất nhiều trong việc điều chỉnh kích thước font-size và padding theo kích thước của màn hình. Cá nhân mình thì mình hay sử dụng rem cho font-size.

Box-sizing

Box-sizing là một thuộc tính cần thiết để phát triển responsive website. Nếu bạn sử dụng Box-sizing cho một phần tử với width có đơn vị phần trăm, nó sẽ tính bao gồm cả padding, vì vậy ta sẽ không cần phải điều chỉnh width để phù hợp với padding nữa.

.example{
  border: 1px solid #000;
  box-sizing: border-box;
  padding: 40px;
  width: 60%;
}

Responsive Video

Đây là một trick CSS khá hay mình muốn giới thiệu đến các bạn. Với trick này nó sẽ làm cho video full-width. Để làm được, chúng ta sẽ đặt video vào container <div> và set 50-60% padding-bottom.

Sau đó, set width: 100%; và height: 100%; với position: absolute; cho phần tử như iframe, img hoặc video. Kết quả là các phần tử này sẽ tự động co giãn phù hợp với độ phân giải khác nhau.

.container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.container video,
.container iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

Min-width & Max-width

Thuộc tính max-width sẽ cho phép chúng ta đặt chiều rộng tối đa cho một phần tử. Hiểu đơn giản là thuộc tính này sẽ ngăn phần tử không lớn hơn chiều rộng tối đa bạn đã set.

Ví dụ dưới đây cho thấy container được chỉ định hiển thị ở 500px nếu có thể mà không vượt quá 80% chiều rộng giới hạn:

.container {
  max-width: 80%;
  width: 500px;
}

Trong trường hợp là hình ảnh, nếu thuộc tính max-width đặt thành 100%, hình ảnh sẽ giảm kích thước nếu cần thiết, nhưng không bao giờ tăng kích thước lớn hơn kích thước ban đầu:

img {
  max-width: 100%;
  height: auto;
}

Ngược lại với max-width, min-width xác định chiều rộng tối thiểu của một phần tử.

Ví dụ: bạn có thể sử dụng thuộc tính min-width cho một văn bản để ngăn phần tử này quá nhỏ khi thu nhỏ.

Kết luận

Như vậy là mình đã giới thiệu cho các bạn một số tips về Responsive website. Hy vọng chia sẻ này có thể giúp ích cho các bạn.

Chúng ta sẽ gặp lại nhau trong các bài viết sắp tới nhé. Peace out! 😁