Đà Nẵng Web hướng dẫn thiết kế website responsive

Hiện nay, Đà Nẵng Web 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ì?

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

trong mã HTML của website

01

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:

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 ;

              }

}