CSS3: Lưu ý khi thiết kế đáp ứng với CSS

Do việc thực thi code CSS cũng tuân theo thứ tự TOP-DOWN, tức là các lệnh được thực thi theo thứ tự trên trước dưới sau, cho nên khi sử dụng max-width ta cần đặt max-width lớn hơn ở trên, vi dụ:

Giải thích:

Giả sử kích thước của màn hình rộng là 320px thì nếu sắp xếp ở trên thì trình dịch sẽ thực hiện lệnh @media(max-width:767px) {header li{padding:25px 21px}} trước, và thực hiện lệnh @media(max-width:329px) {header li{padding:11px 7px}} sau cùng, kết quả là ta có ul li sẽ sử dụng kết quả mong muốn là padding: 11px 7px. Trường hợp đặt theo thứ tự ngược lại sẽ nhận được kết quả là padding: 25px 21px, tức là mới màn hình nhỏ lại đang sử dụng giá trị padding lớn, điều này có thể dẫn đến vỡ giao diện.

Ngược lại, khi sử dụng min-width thì ta lại đặt min-width nhỏ hơn ở trên, ví dụ:

 Giải thích:

Giả sử kích thức màn hình chiều rộng là 1024px, nếu đặt theo thứ tự trên thì kết quả cuối cùng ta sẽ nhận được margin: 21px 17px, ngược lại thì màn hình cuối cùng sẽ nhận kích thước margin: 11px 7px, điều này có thể làm kích thước trở nên nhỏ, không thích ứng với màn hình đang ở kích thước lớn.