Đối với một giao diện để fix cứng độ rộng WIDTH (đơn vị px) khi của số màn hình window (của sổ trình duyệt) co lại, thì nội dung của trang website sẽ không được hiển thị hết.
Nếu dùng đơn vị tương đối là % khi co lại, nội dung hiển thị đầy đủ nhưng chi tiết hiển thị lại rất nhỏ và mắt người thì khó có thể nhìn thấy những chi tiết nhỏ như vậy.
==> Thủ thuật RESPONSIVE để giải quyết vấn đề cho từng loại màn hình.
Lưu ý, để có 1 website responsive hiệu quả thì:
* Về CSS responsive
- Ngoài đơn vị của breakpoint (điểm ngắt-khung bố cục website)là px, thì các đơn vị đo chiều dài trong website nên là phần trăm. Hay nói đúng hơn là sử dụng đơn vị tương đối (em hoặc %).
1em = 100% = 12pt = 10 px ////// 1.2em = 120% = 12px.
==> đổi từ px sang em. PX * 0,1 = em
- Nên sử dụng max-width (@media all and(max-width) ) thay vì width để tránh cố định chiều rộng.
- Sử dụng display: none cho các thành phần cần ẩn đi ở từng thiết bị mà bạn muốn ẩn. Và display: block ở các thiết bị cần hiển thị ra.
- Sử dụng tùy chọn !important nếu cần đè viết đè CSS.
* Nên viết css responsive cho điện thoại trước
Không có nhận xét nào:
Đăng nhận xét