cách thiết kế web responsive là một trong những từ khóa được search nhiều nhất về chủ đề cách thiết kế web responsive. Trong bài viết này, lamweb.vn sẽ viết bài viết Hướng dẫn cách thiết kế web responsive mới nhất 2020
Hướng dẫn cách thiết kế web responsive mới nhất 2020
tut thiết kế website responsive
Thế nào là responsive?
hình 1 : Giao diện web được thiết kế từ responsive
Responsive là một thuật ngữ hay là một tính từ chỉ website đủ sức hiển thị và tương thích với mọi trình duyệt đa dạng hiện nay. Để chúng tôi gợi ý cho các bạn easy hiểu, thông thường một trang web có độ hiển thị chuẩn ở trên một màn hình máy tính ở VN là 960px, nhưng khi hiện thị trên ĐT thì kích thước sẽ refresh thành 320px – 420px so với những điện thoại có màn ảnh nhỏ, còn đối với những chiếc ĐT to không giống thì sẽ hiện thị khác nhau.Theo kiểu design web truyền thống thì người thiết kế website thường get tổ chức px(Pixel) để làm tổ chức tính chiều ngang của một web. trái lại, ứng dụng responsive thì sẽ get % để định hướng chiều rộng của một web, mục tiêu của việc này là tối ưu và thận tiện cho việc giải quyết hơn.
phương thức hoạt động của responsive cũng khá là không khó khăn, chúng ta sẽ viết code CSS cho trình duyệt hiểu và thực thi nó trên các loại trình duyệt có click thước nhất định. ví dụ bạn code và xây dựng một đoạn CSS để ứng dụng cho các trình duyệt có click thước chiều rộng tối đa ở Iphone 4 là 640px. Responsive dùng kỹ thuật design để giải quyết từ client-side chứ không phải thông qua truy vấn đến máy chủ để xử lý(còn được gọi là sever-side). vì vậy Responsive có một yếu điểm là sử dụng trình duyệt của bạn tốn thời gian để mong muốn việc xử ký CSS.
Xem thêm : Hướng dẫn cách thiết kế 1 trang web mới nhất 2020
hướng dẫn áp dụng Responsive lên giao diện website
web có hiển thị Responsive
Để cho trang web của bạn có thể hiển thị được Responsive thì chúng ta có hai bướcBước 1 : Khai báo tên trường meta viewport
name="viewport"content="width=device-width,initial-scale=1.0">Bạn cần đặt thẻ này trong cặp
trong mã HTML của website bạn.
Thẻ meta viewport nghĩa là một thẻ được thiết lập để trình duyệt hiển thị tương ứng với kích thước của màn ảnh. như câu lệnh ở trên thì bạn đủ sức định hình trình duyệt hiển thị cố định và tương like với mọi thiết bị dựa trên chiều rộng của thiết bị đó (device-width) và không cho phép người dùng phóng tó, thu nhỏ, theo chiều ngang của màn hình (thiết lập initial-scale có giá trị cố định là 1.0)
Ngoài thẻ meta viewport này còn có các giá trị không giống dưới đây :
Width : định hướng chiều rộng của viewport
Device-width: Chiều rộng cố định của các thiết bị khác nhau.
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 : định dạng mức phóng lớn của trình duyệt lúc ban đầu, nếu đặt giá trị là 1 có nghĩa là k phóng to, khi trị giá được xây dựng, định hình thì người dùng không thể phóng lớn vì nó vừa mới được cố định.
Minimum-scale : Mức phóng lớn 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.
Muser-scalable : Cho phép người dùng đủ nội lực phóng to, có hai trị giá là yes và no.
Bước 2 : vạch CSS cho chiều rộng của các thiết bị
Để viết CSS tương ứng cho chiều rộng của trình duyệt thì bạn hãy sử dụng cú pháp @media trong CSS3 để đủ nội lực phân các đoạn CSS theo click thước của màn ảnh. kích thước cần phần chia chính là độ rộng của màn ảnh.
Các CSS dùng cho tất cả web và desktop
Xem thêm : Hướng dẫn cách thiết kế giao diện web bằng photoshop mới nhất 2020
body background: #fff; color: #ccc;
/*Các CSS này cho Ipad ngang(1024 x 768)*/@media screen and (max-width: 1024px) #wrapper width: 100%;
/*Các CSS này cho Tablet nhỏ(480 x 640)*/@media screen and (max-width: 480px)
/*Các CSS này cho Iphone(480 x 640)*/@media screen and (max-width: 320px)
/*Các CSS này điện thoại thông minh nhỏ*/@media screen and (max-width: 240px)
Chỉ cần bạn có một số văn hóa về lập trình thì bạn có thể dễ dàng thiết kế web responsive. Ngoài đơn vị px thì đơn vị đo chiều dài trong website tốt nhất bây giờ là %. Hay còn được gọi là tổ chức có tính tương đối. Một lưu ý nữa là các bạn nên dùng max – width thay vì dùng width để tránh cố định chiều rộng của web. Bạn đủ nội lực sử dụng thuộc tính display : none cho các nguyên nhân mà bạn muốn ẩn đi trên từng thiết bị. trái lại, dùng thuộc tính display : block ở các thiết bị cần được hiển thị ra.Trên đây là những hướng dẫn nhỏ để các bạn đủ sức hiểu hơn về thiết kế web responsive. Nếu bạn có những thắc mắc khác thì hãy liên hệ với vidoco nhé. Chúc các bạn sự phát triển.
