Một yếu tố khác dẫn đến việc tập trung vào thiết kế đáp ứng ưu tiên thiết bị di động là hầu hết mọi người truy cập Internet thông qua thiết bị di động của họ, chiếm 60%. Trong khi chỉ có 20% người dân sử dụng internet trên máy tính để bàn.
Bài viết này sẽ đề cập đến các hướng dẫn để tạo thiết kế đáp ứng đầu tiên trên thiết bị di động.
Làm cách nào để thiết lập thiết kế đáp ứng đầu tiên trên thiết bị di động?
Bạn có thể tạo thiết kế đáp ứng cho dù đó là thiết kế đáp ứng đầu tiên trên thiết bị di động hay dành cho màn hình lớn hơn bằng cách thực hiện theo các phương pháp được đưa ra dưới đây:
- Tạo một thiết kế đáp ứng đầu tiên trên thiết bị di động.
- Sử dụng/sử dụng truy vấn phương tiện để phát triển/tạo thiết kế đáp ứng cho màn hình lớn hơn.
Phương pháp 1: Tạo thiết kế đáp ứng ưu tiên thiết bị di động
Đầu tiên, hãy bắt đầu bằng việc tạo ra phương pháp thiết kế ưu tiên thiết bị di động. Vì mục đích đó, hãy thực hiện theo các hướng dẫn từng bước được cung cấp bên dưới.
Bước 1: Tạo cấu trúc HTML
Đầu tiên, tạo cấu trúc HTML và thêm “ Khởi động ' bên trong <đầu> phần. Để tìm hiểu cách bổ sung biểu định kiểu trong phần HTML, hãy nhấp vào đây liên kết . Sau khi tạo cấu trúc trang web cơ bản bao gồm,
< ul >
< cái đó >< Một href = '#' > Trang chủ < / Một >< / cái đó >
< cái đó >< Một href = '#' > Về chúng tôi < / Một >< / cái đó >
< cái đó >< Một href = '#' > Dịch vụ của chúng tôi < / Một >< / cái đó >
< cái đó >< Một href = '#' > Liên hệ chúng tôi < / Một >< / cái đó >
< / ul >
< / không>
< / tiêu đề>
< h1 > Chào mừng đến với Gợi ý Linux < / h1 >
< P > Một trang web hướng dẫn. < / P >
< / phần>
< / chính>
< P > Bản quyền gợi ý Linux < / P >
< / chân trang>
< / thân hình >
Bước 2: Áp dụng CSS
Trong phần nội dung, đặt “ họ phông chữ ' ĐẾN ' sans serif ”. Đồng thời đặt phần đệm, lề và màu nền. Sau đó, áp dụng CSS cho đầu trang, chân trang và điều hướng:
thân hình {họ phông chữ : sans serif ;
lề : 0 ;
phần đệm : 0 ;
màu nền : #808080 ;
}
tiêu đề {
màu nền : màu tím ;
màu sắc : trắng ;
phần đệm : 8px ;
}
điều hướng {
kiểu danh sách : không có ;
phần đệm : 0 ;
lề : 0 ;
}
tàu của họ {
lề : 4px 0 ;
}
điều hướng ul li a {
màu sắc : trắng ;
trang trí văn bản : không có ;
}
chủ yếu {
phần đệm : 18px ;
}
chân trang {
màu nền : hồng ;
màu sắc : trắng ;
căn chỉnh văn bản : trung tâm ;
phần đệm : 8px ;
}
Như có thể thấy, kết quả đầu ra bên dưới đã xác nhận rằng thiết kế này đáp ứng ưu tiên thiết bị di động:
Phương pháp 2: Sử dụng truy vấn phương tiện để tạo thiết kế đáp ứng cho màn hình lớn hơn
Thiết kế trên cũng có thể được tạo cho màn hình lớn hơn như máy tính bảng và máy tính để bàn. Vì mục đích đó, người dùng cần đưa media query vào CSS. Chiều rộng của máy tính bảng là “ 786px ” và đối với máy tính để bàn là “ 1024px ”.
Để áp dụng các truy vấn phương tiện, trước tiên, hãy bao gồm “ @phương tiện truyền thông ” trong tệp CSS. Sau đó, chỉ định thuộc tính “min-width” là “ 768px ”. Điều này có nghĩa là bất cứ khi nào đáp ứng kích thước màn hình tối thiểu “768px” trở lên thì CSS sau sẽ được áp dụng:
@phương tiện truyền thông ( chiều rộng tối thiểu : 768px ) {thân hình {
cỡ chữ : 14px ;
}
tiêu đề {
phần đệm : 18px ;
}
điều hướng {
trưng bày : uốn cong ;
}
tàu của họ {
lề : 0 8px ;
}
chủ yếu {
trưng bày : uốn cong ;
nội dung biện minh : khoảng cách giữa ;
căn chỉnh các mục : trung tâm ;
}
chân trang {
phần đệm : 18px ;
}
}
Kết quả đầu ra bên dưới chứng minh rằng thiết kế cũng đáp ứng trên màn hình lớn hơn:
Phần kết luận
Để thiết lập thiết kế đáp ứng ưu tiên thiết bị di động, trước tiên, hãy tạo cấu trúc HTML và thêm chế độ xem. Sau đó liên kết tệp CSS trong thẻ head. Sau đó, áp dụng CSS dựa trên thiết kế đáp ứng ưu tiên thiết bị di động. Hơn nữa, người dùng có thể thêm truy vấn phương tiện CSS để điều chỉnh trên thiết bị di động. Bài viết này đã trình bày một quy trình chi tiết để thiết lập một thiết kế đáp ứng ưu tiên thiết bị di động.