.png)
By 
02:30
Hiện nay,
thiet ke web tai da nang beha có thể cảm nhận được rằng một giao diện website có thể
hiển thị Responsive là như thế nào. Nếu chưa hiểu bạn có thể tìm hiểu qua bài
viết dưới:
Responsive
là gì?
Thiết kế web
chuẩn responsive
Ngày nay với
xu hướng người dùng sử dụng những thiết bị di động truy cập Internet mạnh mẽ
thì công việc website của bạn có một giao diện phù hợp tương thích với tất cả
các loại màn hình là một điều cần thiết.
Ví dụ: website của bạn có đặt một chiều rộng là 800px
để phù hợp với màn hình máy tính nhưng nếu như vậy khi lên điện thoại di động
chỉ có tầm 320px-420px thì làm sao website của bạn có thể hiển thì được.
Cũng có một
vài cách chính là gán giá trị chiều rộng tuyệt đối sang kiểu giá trị tương đối
là % thì bạn sẽ có thể hiển được tính thị tương ứng với mọi màn hình. Điều này
tất nhiên là đúng, nhưng hãy tưởng tượng xem nếu website của bạn có 3 cột trên
một hàng thì liệu màn hình điện thoại di động hay mắt thường của con người có
thể nhìn thấy chi tiết khi không cần phóng to lên không?
Do vậy,
responsive được ra đời và được coi như là phương pháp để xử lý vấn đề này nhanh
và hiệu quả nhất.
Làm thế nào
để áp dụng responsive trong website?
Muốn sở hữu
một website responsive chúng ta cần làm những bước sau:
1. Khai báo meta viewport
Đầu tiên đặt
thẻ này vào cặp <head> trong mã HTML của website
01 <meta
name="viewport" content="width=device-width,
initial-scale=1">
Meta
viewport là một thẻ thiết lập cho trình duyệt hiển thị tương ứng với kích thước
màn hình. Đây là thẻ được khuyến khích dùng trong tất cả dự án responsive.
Thẻ meta
viewport còn các giá trị như:
width: thiết
lập chiều rộng của viewport
device –
width: chiều rộng cố định của thiết bị
height: thiết
lập chiều cao của viewport
device –
height: chiều cao cố định của thiết bị
initial-scale:
thiết lập phóng to lúc ban đầu, giá trị một nghĩa là không phóng to, và giá trị
được thiết lập thì người dùng không thể phóng to vì nó đã được cố định
minimum-scale:
mức phóng to tối thiểu của thiết bị với trình duyệt
maximum-scale:
mức phóng to tối đa của thiết bị với trình duyệt
user-scalable:
cho phép người dùng phóng to, giá trị là yes/no
Ví dụ về
meta viewport:
ví dụ
responsive
2. Viết CSS
cho chiều rộng của thiết bị
Để viết được
CSS cho chiều rộng, chúng ta sử dụng thẻ truy vấn @media trong CSS3 (@media
query) như sau:
body {
background: #fff ;
color: 333 ;
}
@media all and (max-width: 320px)
{
body{
background: #e7e7e7 ;
}
}
Như vậy
website của bạn sẽ mặc định có nền mầu trắng, nhưng khi thu nhỏ màn hình từ 0px
đến 320px thì màn hình sẽ có mầu xám với mã #e7e7e7
Ngoài ra bạn
cũng có thể thêm một số dữ kiện sau:
@media only
screen and( min-width: 320px ) and ( max-width: 860px ) {...}
Đoạn mã này
giúp bạn chỉ áp dụng cho các màn hình của smartphone, máy tính bảng, desktop có
kích thước màn hình nhỏ nhất là 320px và lớn nhất là 860px.
Bài viết
trên mình đã giới thiệu sơ qua về responsive, tạo ra một tập tin HTML đơn giản
rồi khai báo thẻ meta viewport và thử viết CSS để nắm rõ hơn về hoạt động của
nó nhé.
