front-end

Tricks : Sử dụng calc() để responsive

Một mẹo nhỏ sử dụng CSS để reponsive mà không sử dụng media queries :

/* đối với cỡ màn hình 500px */
.block {
  min-width: 50%;   /* 50% = 250px => min-width winer */
  max-width: 100%;  /* 500px */
  width: calc(480px - 100%) * 480); /* -9600px */
}

Đối với cỡ màn hình >=480px ta có thể thấy width của .block luôn <= 0 nên .block luôn nhận giá trị min-width = 50% ; và ngược lại đối với cỡ màn < 480px thì giá trị width > 480px nên .block luôn nhận giá trị max-width = 100% .

/* đối với cỡ màn hình 400px*/
.block {
    min-width: 50%; /* 200px */
    max-width: 100%; /*100% = 400px => max-width winer*/
    width: calc((480px - 100%) * 480); /* 38400px */
}

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *