* Một số web tham khảo thêm về phần reponsive web ( hiển thị web cho mọi thiết bị, kích thước màn hình của các loại, ví dụ mẫu đính kèm ): - https://developers.google.com/web/fundamentals/design-and-ux/responsive - https://mediag.com/blog/popular-screen-resolutions-designing-for-all/ - https://www.w3schools.com/browsers/browsers_display.asp * Sử dụng đoạn code @media screen and (...) trong css để viết reponsive cho từng loại. ex: @media screen and(min-width: 500px) { background: pink; } Example: /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /********** iPad 3 **********/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } */ Một vài ví dụ mẫu, với các thẻ /*Style*/ sẽ thay thế bằng css mà khi co giãn màn hình thì nội dung trong trang sẽ tùy biến ra sao. *** phần này cần nhớ để biết cách làm để áp dụng vào web khi web co giãn tương thích với các loại màn hình từng máy, cũng như biết cách dùng để vấn đáp câu hỏi của ban hội đồng khi bảo vệ đồ án.