Trang chủ » Kiến thức » Kiến thức Responsive Web Design

Thiết kế giao diện Responsive Web Design

Ngày nay, do sự phát triển chóng mặt của các smartphone và tablet, nên ta cần phải làm sao cho website hiển thị tốt trên mọi thiết bị có kích thước khác nhau, bên cạnh đó cũng có nhiều người dùng không bao giờ maximize trình duyệt của họ. Để đáp ứng được nhu cầu đó hiện tại theo tôi biết thì người ta có 2 cách làm :

-Một là người lập trình sẽ viết code nhận diện thiết bị người dùng đang sử dụng, rồi sẽ đưa họ đến trang được thiết kế dành riêng cho thiết bị của họ.

-Hai là sử dụng responsive design ,responsive là kiểu giao diện co giãn theo kích thước của cửa sổ trình duyệt, cũng là xu hướng Thiết kế web của năm nay.

Nói nôm na là vậy, các bạn xem vài hình ảnh sẽ dễ hiểu

Thiết kế giao diện Responsive Web Design





Thiết kế giao diện Responsive Web Design


Hôm nay tôi sẽ hướng dẫn các bạn làm thiết kế 1 giao diện responsive trong 3 bước

Bước 1 : Meta Tag

Tag meta viewport là điều tất yếu trong responsive layouts. Nó thiết lập màn hình theo 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 smartphone, chỉ hiển thị vừa màn hình để xem và có thể phóng to bằng thao tác 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. 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

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


Thiết kế giao diện Responsive Web Design

HTML Code:
<div id="pagewrap"><div id="header"><h1>Header</h1></div><div id="content"><h2>Content</h2></div><div id="sidebar"><h3>Sidebar</h3></div><div id="footer"><h4>Footer</h4></div></div>

Bước 3 :CSS-Media Queries

Đầu tiên, tôi CSS cho các div trên
Code:
#pagewrap { padding: 5px; width: 960px; margin: 20px auto; } #header { height: 180px; } #content { width: 600px; float: left; } #sidebar { width: 300px; float: right; } #footer { clear: both; }
Sau đó, tôi 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à #siderbar 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 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; } }
Bạn phải click vào đây
để like, thì comment face của bạn mới được lên đầu
Để comment nhiều người biết đến
Kiến thức tiếp theo
Kiến thức đọc nhiều

Xây dựng website bán hàng tối ưu thiết bị di động là điều rất quan trọng

Hiện nay với sự xuất hiện của rất nhiều các điện thoại thông minh được sản xuất và nó có giá phục vụ nhu cầu của rất nhiều tầng lớp khách hàng. Người dùng truy cập điện thoại thông minh để tìm kiếm những gì họ cần là rất nhiều vì vậy có một trang web đáp ứng điện thoại di động có lẽ là quan trọng nhất, và như vậy đòi hỏi các doanh nghiệp bán hàng trực tuyến là tạo ra một trang website tối ưu di động.

Web Responsive – Giải pháp hiệu quả Marketing Online cho Mobile

Web responsive không đơn thuần là tạo ra sản phẩm đẹp trong mắt người dùng mà còn là công việc tạo ra trải nghiệm mới cho người dùng. Các sản phẩm di dộng thông minh tạo ra một thời kỳ mới cho việc trải nghiệm internet...

Thiết kế web di động chuyên nghiệp với Responsive Web Design. Xu hướng toàn cầu và cơ hội cho bạn.

Thiết kế web thân thiện với thiết bị di động đang là xu hướng chung toàn cầu khi mà trong một thập kỷ qua, lượng thiết bị di động tăng đột biến. Cũng như lưu lượng duyệt web qua di động đã chiếm đến hơn 60 % lưu lượng duyệt web toàn cầu trong cuối năm 2014 vừa qua. Vậy đâu là giải pháp thiết kế web di động chuyên nghiệp và cơ hội nào cho website của bạn trong kỷ nguyên di động ?

Thiết kế giao diện Responsive Web Design

Ngày nay, do sự phát triển chóng mặt của các smartphone và tablet, nên ta cần phải làm sao cho website hiển thị tốt trên mọi thiết bị có kích thước khác nhau, bên cạnh đó cũng có nhiều người dùng không bao giờ maximize trình duyệt của họ. Để đáp ứng được nhu cầu đó hiện tại theo tôi biết thì người ta có 2 cách làm :

Những lợi ích tuyệt vời của Responsive Design trong SEO mobile

Responsive Design đã được đề cập đến rất nhiều trong thời gian gần đây. Thời kỳ Mobile đang là xu hướng của thời đại hiện nay. Khi Mobile được chú trọng, các nền tảng hỗ trợ phát triển phiên bản mobile cực kỳ nhiều.

CSS trick trong thiết kế giao diện Responsive Web Design

Trong thiết kế giao diện responsive , người ta thường chú trọng vào % hơn là px. Để hiểu tại sao thì tôi sẽ lấy ví dụ nếu bạn thiết kế web trên desktop với chuẩn width 1400px...

Xu hướng duyệt web trên thiết bị di động?

Năm 2014 và tương lai, mọi người đang truy cập Internet bằng nhiều cách khác nhau . Thiết bị di động , chẳng hạn như iPhone và máy tính bảng , đã trở nên đặc biệt phổ biến với công chúng...

Web 2.0 là gì? Và ý nghĩa của web 2.0

Hiện nay khái niệm web 2.0 đang ngày trở nên phổ biến. Mới nghe thì có vẻ như khái niệm web 2.0 là để chỉ một nền tảng, một công nghệ hoặc một bộ mã nguồn nào đó. Nhưng tất cả đều không phải. Hôm nay, hãy cùng vGing tìm hiểu xem web 2.0 là gì nhé.

Lời "Phán Xét" của Google về website doanh nghiệp có thiết kế web tương thích mobile?

Để chuẩn bị sẵn sàng cho thuật toán mới, bạn có thể phải nhờ tới Tool của Google để có thể kiểm tra tính tương thích website với hiển thị di động !

Những thuận lợi và thách thức khi thiết kế web Responsive

Responsive Web Design (hay còn gọi "Thiết Kế Web Đáp Ứng") là kiểu mẫu phong cách thiết kế với giao diện, bố cục website thể hiện đẹp, mang tính mỹ thuật với độ hiển thị nội dụng co giãn phù hợp trên tất cả các màn hình thiết bị như desktop, laptop, tablet, smartphone, với mọi độ phân giải màn hình, duy trì sự hiển thị nội dung nhất quán thẩm mỹ trên mọi chế độ phân giải.

CSS3 cho phép thiết kế Responsive Design tốt và hơn thế nữa.

CSS Cấp 3 được xây dựng trên CSS Cấp 2 mô-đun bằng mô-đun, bằng cách sử dụng CSS2.1 đặc điểm kỹ thuật như cốt lõi của nó. Mỗi mô-đun bổ sung thêm chức năng và / hoặc thay thế một phần của CSS2...

So Sánh Thiết Kế Responsive Web Design, Web Mobile, Mobile App. Thiết kế nào ưu điểm nhất?

Khuynh hướng thiết kế một website đáp ứng với các thiết bị di động là điều tất yếu đối với nhu cầu sử dụng của người dùng hiện nay. Responsive Web Design , Web Mobile và Ứng dụng Mobile là 3 thiết kế ứng dụng giúp website hiển thị trên các thiết bị di động. Thiết kế nào nào tốt nhât...

Hãy like face để theo dõi bài viết mới
vGing · Giới thiệu · Dịch vụ · Khách hàng · Blog · Kiến thức · Liên hệ