Responsive là gì ? Kích thước giao diện website responsive

Thời đại công nghệ 4.0 này hầu như các doanh nghiệp mới đều muốn có một phiên bản di động cho trang web của mình. Đó là nhu cầu thực tế vì hiện nay hầu như khách hàng của họ sử dụng smartphone để truy cập Web và họ phải có một thiết kế cho BlackBerry, cái khác dành cho iphone, ipad, netbook và tất cả phải tương thích với độ phân giải màn hình của các thiết bị đó. Responsive là phong cách thiết kế website phù hợp với hầu hết các thiết bị, mọi độ phân giải màn hình. Cùng thiết kế website Tùng Phát tìm hiểu responsive là gì và tại sao nó là xu hướng thiết kế website hiện tại.

Responsive là gì?

Responsive được hiểu là phong cách thiết kế website sao cho phù hợp với tất cả các thiết bị, mọi độ phân giải màn hình. Một website chỉ đẹp trên máy tính nhưng khi xem trên điện thoại thì có bố cục lộn xộn, bài viết, hình ảnh không được cân đối thì không thể gọi đó là Website Responsive được.

Responsive
Responsive

Responsive là một thuật ngữ hay một tính từ chỉ một website có thể hiển thị và tương thích với mọi trình duyệt. Ví dụ như thông thường một website có độ hiển thị chuẩn trên màn hình máy tính ở Việt Nam là 960px, nhưng với màn hình điện thoại thì chắc chắn nó sẽ hiển thị theo chiều rộng là 320px – 420px, đây là so với những điện thoại có màn hình nhỏ còn với màn hình lớn thì hiển thị sẽ khác.

Với thiết kế website theo kiểu truyền thống thì người design thường lấy pixel (px) để làm đơn vị tính chiều ngang của một trang web, còn Responsive Designer thì thường lấy % để định dạng chiều rộng của website, với mục đích tối ưu và thuận tiện trong việc xử lý.

Cách thức hoạt động của Responsive là ta sẽviết code CSS để trình duyệt hiểu và thực thi nó trên các kích thước trình duyệt nhất định. Chẳng hạn các bạn có thể code và thiết lập ra một đoạn CSS nào đó chỉ áp dụng đối với các trình duyệt có kích thước chiều rộng tối đa ở iphone 4 là 640px.

Responsive sử dụng kỹ thuật thiết kế được xử lý từ phía khách hàng chứ không thông qua truy vấn đến máy chủ để xử lý. Vì vậy nó có nhược điểm là làm trình duyệt của bạn phải tốn thời gian để chờ đợi xử lý CSS.

Điểm mạnh của Responsive

Điểm mạnh của website responsive
Điểm mạnh của website responsive

+ Responsive Web Design là một điều tất yếu phải có trong thời đại ngày nay. Tuy nói nó chạy trên nhiều chế độ phân giải màn hình nhưng chỉ cần 1 CSDL, 1 layout website thì tất cả chỉ do CSS làm việc.

+ Responsive Web Design sẽ làm cho website chạy tốt trên các thiết bị di động, tăng độ tương thích cho website của bạn, và tạo độ tin cậy và sự chuyên nghiệp đối với khách hàng.

+ Vì cốt lõi của nó cũng chỉ là HTML và CSS nên bạn có thể dùng Responsive Web Design ở bất kỳ dự án web nào, bằng ngôn ngữ thiết kế nào bạn muốn hay mất cứ một mã nguồn mở nào cũng được.

Kích thước màn hình Responsive

Các kích thước màn hình responsive cơ bản dùng để phục vụ thiết kế bao gồm

  • + max-width: 320px (điện thoại di động, hiển thị chiều dọc)
  • + max-width: 480px (cho điện thoại di động, hiển thị chiều ngang)
  • + max-width: 600px (máy tính bảng, hiển thị chiều dọc)
  • + max-width:800px (máy tính bảng, hiển thị chiều ngang)
  • + max-width: 768px (máy tính bảng loại to, hiển thị chiều dọc)
  • + max-width: 1024px (máy tính bảng loại to, hiển thị theo chiều ngang)
  • + max-width: 1025px (từ size này trở lên thì dành cho máy tính bàn thông thường).

Tìm hiểu hướng dẫn một số plugin trong wordpress : tại đây

Thiết kế giao diện responsive

thiết kế giao diện responsive
thiết kế giao diện responsive

Bước 1:  Thẻ Meta

Thẻ Meta viewport là điểm tất yếu trong responsive layouts. Thiết lập màn hình tỷ lệ 1*1, điều này sẽ loại bỏ các chức năng mặc định từ các trình duyệt của smartphone, chỉ hiển thị vừa màn hình khi xem và có thể phóng to bằng tay, thêm vào trong thẻ <head>.

HTML Code:

<meta name=“viewport” content =“width= device-width, initial-scale=1.0”>

Trình duyệt IE8 trở xuống không hỗ trợ media query. Nên bạn có thể sử dụng media-queries.js hoặc respond.js để hỗ trợ.

HTML Code:

<!–[if lt IE 9]> <script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–>

Bước 2: HTML

Ví dụ: Một bố cục trang cơ bản với một #header, #content, #side bar, và #footer. Tiêu đề có height 180px cố định, nội dung #content width là 600px và #side bar width là 300px.

HTML Code:

<div id=“pagewrap”><div id=“header”><h1>Header</h1><div id=“content”><h2>Content</h2></div><div id=“sidebar”><h3>Sidebar</h3></div><div id=“fooder”><h4>Footer</h4></div></div>

Bước 3: CSS-Media Queries

Đầu tiên, CSS cho các div trên

Code:

#pagewwrap{ padding: 5px, width: 960px; margin: 20px auto; } #header { height: 180px; } #content { width: 600px; float: left; } #sidebar {width: 300px; float: right; } #fooder { clear: both; }

Sau đó sẽ sử dụng CSS3 media query, với viewport từ 980px trở xuống, màn hình sẽ hiển thị 2 cột với width của #content là 65% và #sidebar là 30%.

Code:

/* 980px hoặc nhỏ hơn */ @media screen and (max-width: 980px) { #pagewrap { width: 94%; } #content { width: 65%; } #sidebar { width: 30%; } }

Và với viewport 700px trở xuống, ta set giá trị width của #content và #sidebar là auto, bỏ float đi để hiển thị 1 cột full width

Code:

/* 700px hoặc nhỏ hơn */ @media screen and (max-width: 700px) {#content { width: auto; float: none; } #sidebar { width: auto; float: none; } }

Cuối cùng với viewport 400px trở xuống (mobile), ta set lại height #header #header auto, thay đổi font chữ h1 xuống 24px và cho ẩn luôn sidebar

Code:

/* 480px hoặc nhỏ hơn */ @media screen and (max-width: 480px) { #header { height: auto; } h1 {font-size: 24px; } #sidebar { display: none; } }

5/5 (1 Review)

Trả lời

CSKH 24/7: 0902.313.677
Email hỗ trợ: info.tungphat@gmail.com
Chat ngay với chúng tôi