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

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...
Nội dung trích xuất từ tài liệu:
Thực hiện thiết kế đáp ứng bằng jQuery Mobile và CSS3 Thực hiện thiết kế đáp ứng bằng jQuery Mobile và CSS3Khung 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ạora 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 trangweb 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ínhbả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ôngqua 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áchtiế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ácnhau.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à khungcô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ảinghiệ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ớitừ 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ộttrong 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 2008và 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ácdoanh 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ạora 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 độngvà 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ápKhung 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áytí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ạnphả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ơnvà 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 jQueryMobile 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ếtbị 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ếtbị 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ủacá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ângiả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ênmộ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 ứngmộ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ànhì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óngvà 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ựavà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ínhnă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 rakhung 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 để thaythế. 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 độngvà 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ợpkhung công tác jQuery Mobile và các truy vấn phương tiện CSS3 để thu được thiết kế đáp ứngriê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àinà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ệcsử 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ĩamộ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 chomộ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ênquan đế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ể ...