[Drupal] Cách làm responsive theme (template) cho mobile

[Drupal] Cách làm responsive theme (template) cho mobile

Hiện nay càng ngày càng có nhiều người sử dụng điện thoại, máy tính bảng để truy cập internet thay vì dùng máy tính. Vì vậy việc thay đổi giao diện web cho phù hợp với chiều rộng màn hình thiết bị đóng vai trò khá quan trọng. Để tạo một giao diện đáp ứng được độ rộng của màn hình các thiết bị khác nhau bạn có thể dùng kỹ thuật đó là CSS. Sau đây là phần hướng dẫn cơ bản cách responsive để có một giao diện đáp ứng được với chiều rộng màn hình của các thiết bị.

Đầu tiên bạn tạo một file css

- chẳng hạn responsive.css rồi gọi nó trong file your-theme.info như sau: stylesheets[sreen][] = css/responsive.css trong file responsive.css này bạn có thể lưu tất cả các css cho các sreen khác nhau.

- chúng ta cũng có thể tách riêng mỗi screen một css

CSS Cho màn hình lớn

tạo file css cho màn hình lớn hơn chiều rộng nhất định, bạn có thể thêm các dòng lệnh sau vào file your-theme.info

stylesheets[screen and (min-width: 760px)][] = css/screen-760.css

stylesheets[screen and (min-width: 960px)][] = css/screen-960.css

Tập tin screen-760.css sử dụng cho các màn hình trình duyệt có chiều rộng 760px và cả những màn hình lớn hơn.

Tập tin screen-960.css sử dụng cho các màn hình trình duyệt có chiều rộng 960px và cả những màn hình lớn hơn. nó hạn chế chiều rộng là 960px vì vậy bạn phải tính toán độ rộng cho phần nội dung chính và các phần sidebar bên trái, bên phải cho phù hợp.

CSS Cho màn hình nhỏ.

stylesheets[screen and (max-width: 320px)][] = css/screen-320.css

stylesheets[screen and (max-width: 480px)][] = css/screen-480.css

Tập tin screen-320.css sẽ được sử dụng cho các màn hình có kích thước 320px hay nhỏ hơn. Tập tin screen-480.css sử dụng cho các màn hình có chiều rộng 480px hay nhỏ hơn. như vậy khi màn hình nhở hơn 480px nó có thể ghi đề nội dung của tập tin screen-320px. Do đó kích thước màn hình được sử dụng sẽ là ở tập tin screen-480px.

CSS cho một loạt các kích cỡ màn hình trong một khoảng nào đó

stylesheets[screen and (min-width: 480px) and (max-width: 760px)][] = css/screen-480-760.css

Như vậy khi thiết bị của bạn có màn hình trong khoảng 480px đến 760px thì sẽ sử dụng tập tin screen-480-760.css.

Viết lệnh media queries trong các tập tin css

để kích thước màn hình có thể thay đổi bạn phải đặt các lệnh css trong media query.

@meadia screen and (max-width: 480px){

#body{width: 480px;}

}

@media sreen and (min-width: 320px) and (max-width: 480px){

#body{width: 480px;}

}

Nó không làm việc trên Android

Các media queries sẽ không làm việc trên thiết bị chạy hệ điều hành android. Các thiết bị chạy android cần một thẻ meta để nó phát hiện ra độ rộng màn hình của nó. Vì vậy để các media queries có hiệu lực bạn cần thêm thẻ meta dưới đây vào trang web của bạn. bạn có thể thêm vào hàm yourtheme_preprocess_html() bằng việc sử dụng hàm drupal_add_html_head().

Mở file template.php tìm đến hàm yourtheme_preprocess_html() chèn code sau vào:

<?php
  $meta_viewport = array(
    '#type' => 'html_tag',
    '#tag' => 'meta',
    '#attributes' => array(
      'name' => 'viewport',
      'content' => 'width=device-width'
    )
  );
  drupal_add_html_head($meta_viewport, 'viewport');
?>

Như vậy là ok, bây giờ lưu lại và bạn có thể test. và đây là một số công cụ giúp bạn kiểm tra kết quả của mình.

Bạn có thể sử dụng module conditional syltes để hỗ trợ cho IE.

Đọc thêm Responsive web designsHow to apply responsive design techniques to a drupal theme.

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Tìm kiếm bất động sản

 

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
20 mẹo cho Google Docs

20 mẹo cho Google Docs

Gần đây bạn có dùng đến Google Docs không? Những nhà phát triển ứng dụng này đã tiến những bước rất chậm nhưng rất chắc để đưa Google Docs trở nên...

Dropbox

Dropbox tích hợp chức năng chia sẻ file theo nhóm trên Facebook

Người dùng Facebook trước giờ luôn có nhu cầu chia sẻ những dữ liệu nào đó với bạn bè của mình. Chức năng chia sẻ file cho những người trong cùng Group là một lựa chọn quen thuộc.

Samsung tung thêm chiêu quảng cáo độc chế giễu Apple

Samsung tung thêm chiêu quảng cáo độc chế giễu Apple

Để thu hút người dùng Úc đến với sản phẩm máy tính bảng của mình, trong một trang quảng cáo mới đây, Samsung tự hào đã giật tít tiêu đề "the tablet Apple tried to stop"

Công ty diệt chuột T&C

 

Diet con trung