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

Ngày: 07-04-2020 bởi: Tùng Bùi Xem: 1264 lượt

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 công ty 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 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.

Sự ra đời của thiết kế website responsive

Thời chưa có “công nghệ responsive”, các công ty thiết kế website giá rẻ phải thiết kế nhiều website khác nhau cho từng loại thiết bị khác nhau để khách hàng mục tiêu có thể xem được. Tuy nhiên cái thời đó đã qua rất lâu rồi. Vào năm 2001, website đầu tiên được thiết kế để tương thích về độ rộng (width) của trình duyệt là Audi.com. Trước khi cụm từ “Responsive Web Design” được giới thiệu bởi Ethan Marcotte thì đã có rất nhiều thuật ngữ khác nhau để mô tả tính năng này như: “fluid”, “liquid”, “flexible”, “elastic”.

Đ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

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ẻ

.

HTML Code:

 

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:

 

 

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:

 

Header

Content

Sidebar

Footer

 

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; } }

Làm sao để kiểm tra Responsive?

Khi làm việc, bạn có thể kiểm tra website Responsive bằng cách co giãn kích thước của các trình duyệt thủ công nhưng nó không được “thông minh” cho lắm. Mà Tùng Phát sẽ khuyến khích các bạn sử dụng các công cụ hỗ trợ để kiểm tra, một trong những công cụ để có thể kiểm tra Responsive website mà tùng phát thích nhất đó là Resizer, công cụ này rất dễ sử dụng và gọn nhẹ. Hãy xem cách sử dụng bằng ảnh dưới nhé:

responsive là gì

Kết luận

Trên đây là những thông tin về responsive là gì cũng như cách áp dụng chúng trong các trường hợp cụ thể mà chúng tôi muốn giới thiệu đến các bạn. Hy vọng qua bài viết này các bạn có thể cải thiện responsive cho trang web của mình sao cho hợp lý và khoa học nhất. Hy vọng với những kiến thức này sẽ thật hữu ích đối với các bạn. Nếu có bất kì câu hỏi thắc mắc nào thì hãy liên hệ với chúng tôi để được tư vấn miễn phí nhé!

 

Bài viết tương tự của Responsive là gì ? Kích thước giao diện website responsive

Javascript là gì? Ngôn ngữ javascript được dùng để làm gì?
Sitemap là gì? Những điều cần biết về Sitemap
Google PageSpeed Insight là gì và sự ảnh hưởng của hiệu suất đến SEO
UX UI là gì? Chúng có gì khác biệt?
CDN là gì và những thông tin bạn nên biết
Chứng chỉ SSL là gì? Vì sao nên cài đặt SSL cho website
Tùng Bùi
Tùng Bùi Tùng Phát CEO. Đam mê SEO website, thiết kế website, đá bóng, offline cùng mọi người.
Facebook Youtube
Gọi điện thoại
0902.313.677

CSKH 24/7: 028.7776.8789

0902313677Zalo

Email hỗ trợ: info@tungphat.com

info@tungphat.com Email

Top