Báo cáo tuần 3: 10/3/2024

I. Tìm hiểu về Responsive:

1. Mục đích
Responsive giúp cho các đồi tượng có thể tự điều chỉnh để vừa với các kích thước
màn hình khác nhau
2. Cách làm
- Dùng CSS
- Media query:
Cấu trúc:
@media (not|only) mediatype and (mediafeature and|or|not mediafeature){
CSS-code;
}
Mediatype

Mediafeature:
min/max-width/height:chiều dài/ rộng của browser
aspect-ratio, device-aspect-ratio: Đây là những feature cho phép ta áp dụng các rules
dựa trên tỉ lệ của browser hay tỉ lệ của thiết bị. (ví dụ: 16/9, 16/10)
(min/max)-resolution: Đây là những feature đánh giá dựa trên độ phân giải của màn
hình device
 Có thể cho thuộc tính media vào nhiều thẻ link nhiều file file css để đánh dấu file
css nào thì dùng cho kích thước màn hình nào
VD:
<link rel=”stylesheet” media=”(min-width: 1024px)” href=”./style_1.css”>
File css style_1: css browser kích thước >=1024px (laptop/ pc)
<link rel=”stylesheet” media=”(max-width: 740px)” href=”./style_2.css”>
File css style_1: css browser kích thước <=740px (mobile)
  Nhưng không nên dùng cách này do phải tải nhiều file css
3. Breakpoint
- là những điểm/ vị trí mà bố cục website sẽ thay đổi – thích ứng để tạo nên giao
diện responsive
mobile tablet PC
Width <740px >=740px, <1024px >=1024px
@media only @media only @media only
screen and (max- screen and (min- screen and (min-
width: width: 740px)and width:
739px) {...} (max-width: 1024px) {...}
1023px) {...}

II. Ôn lại kiến thức môn cơ sở dữ liệu