Thực hiện thiết kế đáp ứng bằng jQuery Mobile và CSS3

Tạo các bố trí trang web thích ứng với độ phân giải màn hình của người dùng

Dựa vào giá trị riêng của mình, khung công tác jQuery Mobile là một giải pháp rất tốt để nhanh chóng tạo ra một trang web di động dựa vào đánh dấu HTML5, có thể truy cập được. Khi kết hợp với CSS3, nhiều thứ thực sự trở nên thú vị hơn, khi trở nên có thể tạo ra các cách bố trí trang web đáp ứng với một thiết bị của người dùng dựa trên độ phân giải màn hình. Bài này cho thấy cách sử dụng khung công tác jQuery Mobile và các truy vấn phương tiện của CSS3 để thực hiện một thiết kế đáp ứng trong các trang web của bạn.

Kris Hadlock, Nhà phát triển và nhà thiết kế web, Studio Sedition

Photo of Kris HadlockKris Hadlock là nhà phát triển và thiết kế trang web theo hợp đồng từ năm 1996. Ông đã làm về các dự án cho các công ty như SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, Le Cordon Bleu và Canon. Ông là tác giả của jQuery Mobile: Develop and Design - jQuery Mobile: Xây dựng và Thiết Kế (Peachpit), Ajax for Web Application Developers - Ajax dành cho các nhà phát triển ứng dụng Web (Sams) và The ActionScript Migration Guide - Hướng dẫn di trú ActionScript (New Riders). Kris là một nhà báo được đánh giá cao, ông phụ trách các chuyên mục và đã có nhiều bài viết cho các trang web và các tạp chí thiết kế, gồm IBM developerWorks, Peachpit.com, InformIT.com và Practical Web Design - Thực hành thiết kế web. Ông cũng là người sáng lập của trang www.studiosedition.com, một xưởng phát triển phần mềm và thiết kế web chuyên về tổng hợp biểu mẫu và chức năng.



22 11 2012

Khung công tác jQuery Mobile là một thư viện JavaScript mà bạn có thể sử dụng để dễ dàng tạo ra một phiên bản di động của một trang web, chuyển đổi các trang web hiện có thành các trang web và các ứng dụng thân thiện với cảm ứng. Khung công tác jQuery Mobile được cho là sẽ thay đổi cách truy cập các ứng dụng di động và cách phân phối trên các thiết bị di động và máy tính bảng nhờ cho phép người dùng kết nối trực tiếp đến các ứng dụng thân thiện với cảm ứng thông qua một trình duyệt web. Có những tùy chọn khác để phát triển di động, nhưng khác với cách tiếp cận mà jQuery Mobile đang làm ở chỗ chúng đang nhằm vào nhiều nền tảng di động khác nhau.

Tỷ lệ chọn dùng các thiết bị điện thoại thông minh và máy tính bảng đang tăng vọt và khung công tác jQuery Mobile đang giúp các nhà phát triển đáp ứng yêu cầu ngày càng tăng về các trải nghiệm web di động. Việc cung cấp các trải nghiệm web di động đòi hỏi một bộ các kỹ năng mới từ các nhà phát triển và các nhà thiết kế web. Vào năm 2010, Nielsen đã dự đoán rằng cứ một trong hai người Mỹ sẽ có một máy điện thoại thông minh (xem Tài nguyên để có một liên kết đến blog này), đó là một sự gia tăng rất lớn so với chỉ có một máy trên 10 người vào năm 2008 và vào tháng 6 năm 2011, AMI-Partners đã dự báo rằng "việc chọn dùng máy tính bảng giữa các doanh nghiệp có từ 1 đến 1.000 nhân viên sẽ tăng thêm 1.000% vào năm 2015 "(xem Tài nguyên để có một liên kết đến dự báo đầy đủ). Với sự gia tăng về tỷ lệ người chọn dùng như vậy, sẽ có một nhu cầu mạnh mẽ đối với các nhà phát triển và các nhà thiết kế web, những người có thể tạo ra những trải nghiệm web di động. Khung công tác jQuery Mobile là một giải pháp tuyệt vời để tạo ra những trải nghiệm web di động, vì nó làm tăng tốc độ có thể tạo ra các trang web di động và hỗ trợ một loạt các nền tảng di động.

Các cạm bẫy và các giải pháp

Khung công tác jQuery Mobile là một giải pháp rất tốt để tạo ra một phiên bản di động hoặc máy tính bảng của các trang web của bạn, nhưng nó hoàn toàn dựa trên nội dung của một trang web được nối thêm các thuộc tính data-role (vai trò-dữ liệu) nhất định. Trong rất ít trường hợp, có thể không có khả năng nối những thuộc tính này vào đánh dấu HTML của bạn và có thể đòi hỏi bạn phải tạo một trang web di động riêng biệt. Tuy nhiên, bài này cho bạn thấy, với tầm nhìn xa hơn và có kế hoạch hơn một chút, cách có thể sử dụng một sự kết hợp của khung công tác jQuery Mobile và các truy vấn phương tiện của phiên bản CSS 3 (Cascading Style Sheets – Các bản định kiểu nhiều tầng) để tạo ra một thiết kế đáp ứng và xác định cách bố trí đáp ứng lại với thiết bị của người dùng. Mục đích là tạo ra một trang web duy nhất, có thể đáp ứng động với các thiết bị của người dùng bằng cách hiển thị một cách bố trí thích hợp với độ phân giải màn hình của các thiết bị.

Một thiết kế đáp ứng là một thiết kế sẽ đáp ứng với một thiết bị của người dùng dựa trên độ phân giải màn hình của nó. Điều này có nghĩa rằng bất kể người dùng đang xem một trang web trên một máy tính bảng, một máy điện thoại di động hay máy tính để bàn thì thiết kế này sẽ đáp ứng một cách thích hợp với thiết bị đó bằng cách hiển thị một bố trí cụ thể dựa trên độ phân giải màn hình của thiết bị đó. Mặc dù khung công tác jQuery Mobile cung cấp một cách để nhanh chóng và dễ dàng tạo ra một phiên bản di động của một trang web, hiện nay nó không (và rất có thể sẽ không bao giờ) cung cấp một biện pháp có sẵn để đáp ứng động với thiết bị của người dùng dựa vào độ phân giải màn hình của thiết bị. Trong thực tế, trang web jQuery Mobile nói rằng tính năng Các lớp của trình trợ giúp truy vấn phương tiện (Media Query Helper Classes) có sẵn từ trước đã thành lạc hậu trong bản beta và được loại bỏ ra khỏi phiên bản mới nhất. Các nhà tạo ra khung công tác này thực tế đang khuyến cáo sử dụng các truy vấn phương tiện của CSS3 để thay thế. Với sự kết hợp của các truy vấn phương tiện CSS3 và khung công tác jQuery Mobile, có thể đạt được một thiết kế đáp ứng, thích hợp với các môi trường máy tính bảng, điện thoại di động và máy tính để bàn. Trên thực tế tài liệu hướng dẫn khung công tác sử dụng một sự kết hợp khung công tác jQuery Mobile và các truy vấn phương tiện CSS3 để thu được thiết kế đáp ứng riêng của nó. Trên thực tế tài liệu hướng dẫn này khá giống với ví dụ mà bạn sẽ tạo ra trong bài này về cách nó đáp ứng lại với các độ phân giải màn hình khác nhau.

CSS đã bao gồm các biện pháp mã hóa liên quan đến thiết bị kể từ phiên bản 2.1 thông qua việc sử dụng các kiểu phương tiện. Một cách phổ biến để sử dụng các kiểu phương tiện là định nghĩa một bản định kiểu riêng biệt cho một màn hình máy tính để bàn khác với một bản định kiểu cho một phiên bản in của trang web. CSS3 đã đưa những khái niệm về các biện pháp mã hóa liên quan đến thiết bị tiến một bước xa hơn bằng việc giới thiệu các truy vấn phương tiện. Có thể sử dụng các truy vấn phương tiện để xác định kiểu thiết bị đang tương tác với trang web của bạn cũng như cho phép các nhà phát triển xác định các đặc tính vật lý của thiết bị đang xem các trang web của bạn. Rõ ràng là, các truy vấn phương tiện đã trở thành một cách phổ biến để phân phối bản định kiểu đặc trưng-thiết bị, như bạn có thể thấy trong Liệt kê 1, phân phối một bản định kiểu đặc trưng cho các thiết bị di động và máy tính bảng dựa trên độ phân giải màn hình.

Liệt kê 1. Sử dụng các truy vấn phương tiện để cung cấp các bản định kiểu đặc trưng-thiết bị
<link 
  rel="stylesheet" 
  type="text/css" 
  media="screen and (max-device-width: 799px)" 
  href="mobile-tablet.css" />

Thuộc tính media (phương tiện) trong ví dụ này chứa một giá trị kiểu phương tiện được thiết lập là screen (màn hình) và một truy vấn phương tiện (được bọc trong dấu ngoặc đơn). Truy vấn phương tiện đặc biệt này kiểm tra để xem liệu độ phân giải màn hình của thiết bị hiện tại của người dùng có thấp hơn hoặc bằng 799px (điểm ảnh) không. Nếu đúng như vậy, bản định kiểu máy di động/máy tính bảng này sẽ được phân phối, nếu không, bản định kiểu này sẽ không được phân phối. Bạn có thể bao gồm nhiều liên kết bản định kiểu trong một trang web đơn lẻ, mỗi bản định kiểu có truy vấn phương tiện riêng của mình để làm cho trang của bạn khác nhau dựa trên các độ phân giải khác nhau như bạn mong muốn. Số lượng các bản định kiểu dựa vào độ phân giải phổ biến nhất mà tôi đã nhận thấy có lẽ là ba — một bản cho các thiết bị di động và máy tính bảng, một bản cho màn hình máy tính để bàn có độ phân giải thấp hơn và một bản cho màn hình máy tính để bàn có độ phân giải cao hơn. Nếu bạn đã sử dụng mã từ Liệt kê 1, tất cả các thiết bị có độ phân giải thấp hơn 799px sẽ sử dụng bản định kiểu này, vì vậy đây là một ví dụ hoàn hảo về cách bạn có thể nhằm đến các thiết bị di động và máy tính bảng với một bản định kiểu và máy tính để bàn với một bản định kiểu khác.

Cũng có thể sử dụng nhiều truy vấn phương tiện trực tiếp trong CSS của chỉ một bản định kiểu đơn lẻ. Liệt kê 2 cho thấy một ví dụ về một lớp CSS được sử dụng cho một tập các mục dẫn hướng, mà bạn sẽ tạo ra sau trong bài này. Khi độ phân giải màn hình của thiết bị rộng tới 800px hoặc cao hơn, chiều rộng của ô dẫn hướng được thiết lập là 300px, khi độ phân giải màn hình là 799px hoặc thấp hơn, chiều rộng ô dẫn hướng được thiết lập là 100%.

Liệt kê 2. Sử dụng các truy vấn phương tiện để phân phối CSS đặc trưng-thiết bị
@media all and (min-width: 800px) {
  #nav {
    width: 300px;
  }
}

@media all and (max-width: 799px) {
  #nav {
    width: 100%;
  }
}

Một điều thú vị về các truy vấn phương tiện là ở chỗ nếu bạn xem một trang web trong một trình duyệt web hiện đại, gồm có CSS từ Liệt kê 2 kết hợp với phần tử HTML liên quan, thì trang web này cũng sẽ thực sự đáp ứng với kích cỡ của trình duyệt. Vì vậy, nếu trình duyệt được thiết lập tới một chiều rộng là 799px hoặc thấp hơn, chiều rộng của ô dẫn hướng sẽ là 100%; nếu trình duyệt đã được định cỡ tới chiều rộng là 800px hoặc cao hơn, chiều rộng của ô dẫn hướng sẽ được định cỡ tới 300px.


Trở thành đáp ứng

Các truy vấn phương tiện là một kiểu câu lệnh có điều kiện để xác định CSS nào được áp dụng cho một trang web. Cùng với khung công tác jQuery Mobile, bạn có thể tạo ra một số trang web di động mạnh mẽ trong khi vẫn duy trì một cách bố trí cho máy tính để bàn độc lập. Có thể sử dụng chính khung công tác jQuery Mobile để nhanh chóng và dễ dàng tạo ra các trang web thân thiện với cảm ứng. Khung công tác này có một loạt các thành phần làm cho nó dễ dàng thêm vào các nút ấn, các thanh công cụ, các hộp thoại, các khung nhìn danh sách và nhiều hơn nữa. Tuy nhiên, khi nói đến xử lý bố trí trang web, CSS vẫn là một ngôn ngữ cần dùng đến. May mắn thay, như được trình bày ở phần trước trong bài này, CSS3 đã giới thiệu các truy vấn phương tiện, cung cấp cho các nhà phát triển khả năng để thay đổi cách bố trí trang web dựa trên độ phân giải của thiết bị.

Kết hợp với khung công tác jQuery Mobile, bạn có thể tạo ra một số cách bố trí đáp ứng. Với mục đích của bài này, tôi sử dụng một ví dụ đơn giản gồm có một tập các mục dẫn hướng và một lưới. Các mục dẫn hướng và lưới sẽ được bố trí theo cách khác nhau dựa trên độ phân giải màn hình. Điều đầu tiên mà bạn cần làm trước khi khung jQuery Mobile sẽ chạy trong trang web của bạn là nhúng các tệp JavaScript và CSS kết hợp với khung công tác jQuery Mobile (xem Liệt kê 3).

Liệt kê 3. Nhúng khung công tác jQuery Mobile
<link rel="stylesheet" 
  href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

Khung công tác jQuery Mobile gồm có một thành phần listview mà bạn sẽ sử dụng để hiển thị các mục dẫn hướng của mình. Để tạo một khung nhìn danh sách (list view), chỉ cần thêm một thuộc tính data-role có giá trị là listview vào phần tử ul của danh sách dẫn hướng của bạn. Khung công tác jQuery Mobile cũng có một số công cụ có ích cho phép bạn tạo các bố trí lưới nhiều cột. Trong Liệt kê 4, tôi đã kèm theo một lưới hai hàng và ba cột, được xây dựng bằng cách sử dụng một sự kết hợp các lớp ui-grid-b, ui-block-aui-bar. Để tìm hiểu thêm về các thành phần có sẵn của khung jQuery Mobile, xem phần Tài nguyên.

Liệt kê 4. Thêm một listview và lưới vào vùng nội dung
<div data-role="content">
    <ul id="nav" data-role="listview" data-inset="true">
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
    </ul>
    
    <div id="grid" class="ui-grid-b">
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
    </div>
</div>

Các chữ cái được nối vào cuối của một số tên lớp: Đây là những chữ cái liên quan đến chủ đề mà khung công tác jQuery Mobile sử dụng để xác định chủ đề nào được sử dụng để biểu thị một thành phần. Để tìm hiểu thêm về tạo chủ đề với khung công tác jQuery Mobile, hãy đọc bài báo liên quan trong phần Tài nguyên.

Bây giờ bạn đã tạo ra trang web của mình, bạn có thể sử dụng CSS3 để tạo ra một bố trí đáp ứng, sẽ điều chỉnh động dựa trên độ phân giải màn hình của người dùng. Làm việc này đơn giản: Chỉ cần sử dụng các truy vấn phương tiện mà bạn đã học ở phần trước trong bài này để xác định độ phân giải màn hình và sau đó viết CSS để xử lý cụ thể các kịch bản khác nhau. Liệt kê 5 sử dụng một truy vấn phương tiện để kiểm tra độ phân giải màn hình là 800px hoặc cao hơn và một truy vấn phương tiện khác để kiểm tra độ phân giải màn hình là 799px hoặc thấp hơn. Truy vấn phương tiện đầu tiên thả nổi ô dẫn hướng sang bên trái và thả nổi lưới sang bên phải, sao cho chúng tự đặt mình bên cạnh nhau để lấp đầy một vùng rộng lớn hơn có sẵn trên một màn hình có độ phân giải cao hơn. Truy vấn phương tiện thứ hai không có phao và thiết lập chiều rộng ô dẫn hướng và lưới đến 100%, cuối cùng sẽ đặt ô dẫn hướng bên trên lưới để thích ứng với các độ phân giải màn hình thấp hơn cho các thiết bị như các máy điện thoại thông minh và các máy tính bảng.

Liệt kê 5. Sử dụng các truy vấn phương tiện để tạo một bố trí đáp ứng
@media all and (min-width: 800px) {
  #nav {
    width: 300px;
    float: left;
    margin-right: 20px;
  }
  #grid {
    width: 450px;
    float: left;
  }
}

@media all and (max-width: 799px) {
  #nav {
    width: 100%;
  }
  #grid {
    width: 100%;
  }
}

Các thiết bị có độ phân giải màn hình cao hơn sẽ hiển thị một cách bố trí cạnh nhau tương tự như Hình 1.

Hình 1. Một thiết bị có độ phân giải cao hơn biểu thị trang web như thế nào
Hình ảnh hiển thị cách một thiết bị có độ phân giản lớn hơn biểu hiện một trang web

Các thiết bị có độ phân giải màn hình thấp hơn hiển thị một cách bố trí cạnh nhau tương tự như Hình 2.

Hình 2. Một thiết bị có độ phân giải thấp hơn biểu thị trang web như thế nào
Hình ảnh hiển thị cách một thiết bị có độ phân giản nhỏ hơn biểu hiện một trang web

Tất nhiên, đây là một ví dụ cực kỳ đơn giản, nhưng nó cho thấy cách để dễ dàng tạo ra một bố trí đáp ứng bằng cách sử dụng khung công tác jQuery Mobile và CSS3. Nhiều khả năng rất hấp dẫn và đây chỉ là một bước để giúp bạn bắt đầu. Bằng cách thêm một vài thuộc tính data-role đơn giản vào HTML của mình, bạn có thể tạo ra một phiên bản di động của các trang web của mình, bằng cách kèm theo truy vấn phương tiện CSS3, bạn có thể cho phép thiết kế của mình đáp ứng với thiết bị của người dùng dựa trên độ phân giải màn hình. Bạn thậm chí có thể thay đổi chủ đề của jQuery Mobile khi có ai đó xem các trang web của bạn trên một máy tính để bàn sao cho các trang web đó không trông giống như một trang web di động ở các độ phân giải cao hơn. Tất cả mọi thứ mà bạn cần làm là kiểm tra độ phân giải cao hơn bằng một truy vấn phương tiện, rồi thay đổi CSS cho những thành phần jQuery Mobile đó để ghi đè lên các kiểu dáng mặc định tạo ra chủ đề đó.


Kết luận

Mục đích của thiết kế đáp ứng là hiển thị dữ liệu của bạn theo cách bố trí tốt nhất có thể để nhận được các trang web thân thiện với người dùng. Kết hợp khung công tác jQuery Mobile và CSS3 có thể tạo ra một tập hợp nhiều cách bố trí đang thịnh hành mà bạn có thể sử dụng để đáp ứng với mỗi thiết bị của người dùng.


Tải về

Mô tảTênKích thước
Sample jQuery Mobile and CSS3 web pagejquery-mobile-responsive-design.zip3KB

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

Thảo luận

  • Hãy tham gia vào cộng đồng developerWorks. Kết nối với những người dùng developerWorks khác trong khi khám phá các blog, các diễn đàn, các nhóm và các wiki dựa vào nhà phát triển.

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=846578
ArticleTitle=Thực hiện thiết kế đáp ứng bằng jQuery Mobile và CSS3
publish-date=11222012