Hướng dẫn thiết kế website responsive

Hiện nay, Vifonic có thể cảm nhận thấy rằng một giao diện website có thể hiển thị Responsive là như thế nào. Bài viết này sẽ giúp bạn hiểu rõ và hướng dẫn thiết kế website responsive.

Các yêu cầu kiến thức: 

Để có thể hiểu được trọn vẹn việc thiết kế website responsive, các bạn cần chuẩn bị các kiến thức cơ bản HTML và CSS.

Responsive là gì?

Thiết kế web chuẩn responsive

Hiện nay với xu hướng người dùng sử dụng các thiết bị di động để truy cập Internet mạnh mẽ thì việc website của bạn có một giao diện phù hợp và 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.

Giả sử, website của bạn có đặt một chiều rộng cố định là 800px để phù hợp với màn hình máy tính nhưn 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 đó là chúng ta gán giá trị chiều rộng tuyệt đối sang kiểu giá trị tương đối là % thì sẽ có thể hiển 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. Khi sử dụng bạn sẽ thấy giao diện sẽ bị ảnh hưởng đi một chút xíu.

Responsive được hoạt động khi chúng ra viết VSS cho trình duyệt hiểu và thực thi nó trên các trình duyệt khác.

Làm thế nào để áp dụng responsive cho một 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 bạn cầ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

ví dụ responsive

2. Viết CSS cho chiều rộng của thiết bị

Ở bước này chúng ta sẽ tiến hành viết CSS tương ứng chiều rộng chiều cao của thiết bị, chúng ta sẽ viết theo chiều rộng và có đơn vị đo là pixel. Còn rất nhiều các đơn vị đo khác nhưng dùng pixel cho cơ bản.

Để 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, bạn có thể tạo 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é. Hoặc nếu bạn không biết code thì nếu có thuê dịch vụ thiết kế web thì bạn cũng sẽ biết thêm để website của mình tối ưu hơn nhé

“Bài viết được biên tập bởi Công ty thiết kế website Vifonic

 

Hướng dẫn thiết kế website responsive
5 (100%) 16 votes

CÓ THỂ BẠN QUAN TÂM

free-marketing
12 công cụ marketing tuyệt vời cho Start up
Vì sao mình nói đây là công cụ marketing tuyệt vời cho Start up? Vì đa số công cụ là miễn ...
Làm sao để chon một tên miền đem lại hiệu quả cho kinh doanh?
Với thời đại công nghệ hiện nay thì việc kinh doanh online bằng cách làm một website đang là xu hướng, ...
Thiết kế website
15 sai lầm thường gặp của khách hàng khi thiết kế website
Trong quá trình làm việc với rất nhiều khách hàng, Vifonic có đúc kết được một số sai lầm, hiểu lầm thường gặp ...
Dự án thiết kế website chuẩn SEO và SEO
Dự án thiết kế website và SEO lĩnh vực công nghiệp
Vifonic đang thực hiện một dự án Thiết kế website chuẩn SEO và SEO các từ khóa liên quan đến lĩnh ...
0985686801 Chat facebook Z Chat zalo