post img - CSS TRICK TRONG THIẾT KẾ GIAO DIỆN RESPONSIVE WEB DESIGN CO DÃN ẢNH


Trong thiết kế giao diện responsive , người ta thường chú trọng vào % hơn là px
Để hiểu tại sao thì tôi sẽ lấy ví dụ nếu bạn Thiết kế web trên desktop với chuẩn width 1400px thì khi bạn CSS một thành phần nào đó với padding là 20px thì dĩ nhiên 20px là 1 con số nhỏ đối với 1400px, nhưng khi bạn xem lại trên iphone chuẩn width 320px thì con số 20px lúc này khá lớn với tiểu chuẩn màn hình tự co dãn theo kích thước các bạn tìm theo đoạn mã sau sửa lại kích thước cho phù hợp trang web của bạn.
.related-post img {
width: -90%;
object-fit: cover;
height: 100%;
}
Xem thêm