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

Hàm kiểm tra nguyên tố nhận vào một số nguyên n và trả lại kết quả là true

Tính và in ra trung bình cộng của các số âm, số dương trong array Pascal

Posted by: Khanh Hoang
Tue, 4/03/2014, 20:52 (GMT+7)
0 Bình luận

[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.