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 */ }