Bài đăng này sẽ đề cập đến các nguyên tắc cần thiết để triển khai truy vấn phương tiện.
Làm cách nào để triển khai truy vấn phương tiện cho thiết bị di động?
Truy vấn phương tiện có thể được áp dụng cho thiết bị di động bằng cách chỉ cần đề cập đến “ @phương tiện truyền thông ” và chỉ định kích thước màn hình trong dấu ngoặc nhọn nhỏ. CSS cho truy vấn phương tiện đó sau đó có thể được thêm vào bên trong dấu ngoặc nhọn. Bất cứ khi nào kích thước màn hình đáp ứng kích thước do người dùng chỉ định, nó sẽ áp dụng truy vấn phương tiện đã nêu.
Hãy cùng xem tổng quan một ví dụ thực tế để tìm hiểu cách triển khai truy vấn phương tiện cho thiết bị di động.
Ví dụ: Tạo bố cục thay đổi từ bố cục hai cột thành bố cục một cột bằng cách áp dụng truy vấn phương tiện
Trong ví dụ bên dưới, bố cục của trang web sẽ thay đổi từ bố cục cột sang bố cục một cột:
Bước 1: Tạo cấu trúc HTML
- Đầu tiên, tạo một tệp HTML và liên kết tệp biểu định kiểu CSS bên ngoài trong <đầu> phần.
- Sau đó, tạo một
phần và thêm tiêu đề của trang web bằng cách sử dụng nhãn. - Tạo một theo tên lớp là “container-class” và hainữa bên trong nó có tên lớp là “ cột ”. < thân hình >
< h1 > Gợi ý Linux < / h1 >
< / tiêu đề>
< div lớp học = 'lớp container' >
< div lớp học = 'cột' >
< h2 > Phần Một < / h2 >
< P > Linux Hint là một trong những nền tảng học tập điện tử tốt nhất. < / P >
< / div >
< div lớp học = 'cột' >
< h2 > Phần hai < / h2 >
< P > Linux Hint là một trong những nền tảng học tập điện tử tốt nhất. < / P >
< / div >
< / div >
< / thân hình >Bước 2: Áp dụng CSS
Về phần thân:- Đầu tiên, chỉ định phần nội dung bằng cách viết “ thân hình ” tag và nhắc đến dấu ngoặc nhọn.
- Bên trong dấu ngoặc nhọn, chỉ định họ phông chữ, màu nền, lề và phần đệm.
trên
phần:
- Chỉ định màu văn bản, căn chỉnh văn bản, màu nền và phần đệm.
trên “lớp container” div:
- Đặt “ trưng bày ” giá trị thuộc tính thành “ uốn cong ” để tạo Flexbox.
- Sử dụng ' nội dung biện minh ” để thêm khoảng trắng giữa nội dung và thêm phần đệm.
Trên lớp cột:
- Đầu tiên, chỉ định giá trị đã nêu cho “ uốn cong ” để thêm khoảng trắng giữa hai phần bố cục.
- Sau đó, thêm màu nền, đường viền, phần đệm và kích thước hộp.
Bước 3: Áp dụng truy vấn phương tiện
- Để áp dụng truy vấn phương tiện cho thiết bị di động, trước tiên, hãy thêm “ @phương tiện truyền thông ' nhãn.
- Sau đó, chỉ định giá trị “ 768px ” là đặc trưng của thiết bị di động đối với “ chiều rộng tối đa ” Thuộc tính bên trong dấu ngoặc nhọn nhỏ.
- Sau đó, chỉ định “ cột ” giá trị cho “ hướng uốn cong ” thuộc tính sẽ áp dụng cho “ lớp container”. Điều này sẽ thay đổi hai cột thành một cột bất cứ khi nào phát hiện thấy kích thước màn hình đã chỉ định.
- Cuối cùng, áp dụng CSS trên “ cột ” lớp và chỉ định “ lề ' Và ' uốn cong ” giá trị:
Họ phông chữ: sans-serif;
lý lịch- màu sắc : bạc;
lề: 0 ;
phần đệm: 0 ;
}
tiêu đề {
lý lịch- màu sắc : #2f4f4f;
phần đệm: 20px;
chữ- căn chỉnh : trung tâm;
màu sắc : trắng;
}
.thùng đựng hàng- lớp học {
hiển thị: linh hoạt;
biện minh- nội dung : khoảng cách giữa;
phần đệm: 20px;
}
.cột {
uốn cong: 0 1 tính toán ( năm mươi % - 10px ) ;
ranh giới : 1px màu lục đậm;
lý lịch- màu sắc : trắng;
kích thước hộp: hộp viền;
phần đệm: 20px;
}
@ phương tiện truyền thông ( tối đa- chiều rộng : 768px ) {
.thùng đựng hàng- lớp học {
hướng flex: cột;
}
.cột {
uốn cong: 0 1 100 %;
lề dưới: 20px;
}
}đầu ra
Đây là kết quả của trang web sau khi áp dụng truy vấn phương tiện. Đầu ra này là bố cục đáp ứng hai cột:
Bất cứ khi nào màn hình đáp ứng các kích thước được chỉ định bằng cách sử dụng truy vấn phương tiện dành cho thiết bị di động, màn hình sẽ chuyển sang bố cục một cột:
Phần kết luận
Để triển khai truy vấn phương tiện cho thiết bị di động, trước tiên, hãy bao gồm “ khung nhìn ' bên trong ' cái đầu ' phần. Sau đó, viết CSS dành riêng cho thiết kế di động. Sau đó, thêm truy vấn phương tiện bằng cách sử dụng thẻ “@media” và chỉ định kích thước màn hình thiết bị di động. Ví dụ: chỉ định 768px cho máy tính bảng và 480px cho điện thoại di động. Bài viết này đã giải thích quy trình triển khai truy vấn phương tiện cho thiết bị di động.