Khi một website được xây dựng để hiển thị tốt giao diện từ khung hình mobile cho tới màn hình máy tính, ta gọi là Responsive Web. Vậy khi lập trình, Responsive CSS style được thực hiện như thế nào?

Responsive CSS là gì?

Responsive CSS là cách thức viết nội dung file CSS sao cho đáp ứng khung hình từ mobile tới máy tính.

Có hai kiểu Responsive CSS chính mà bạn nên biết.

Kiểu thứ nhất: Responsive CSS theo stylesheet file riêng

Kiểu này thực chất là việc chia phần viết CSS cho từng khung hình, ví dụ

  • mobile – dưới 480px: mobile.css
  • tablet – từ 480px trở lên: tablet.css
  • desktop – 1024px trở lên: desktop.css

Chẳng hạn, mình có 1 module hero-image, với kích thước chiều cao khác nhau trên mỗi khung hình. Như vậy mình sẽ cần gán class .hero-image vào cả ba file này.

// mobile.css
.hero-image { max-height: 200px; }

// tablet.css
.hero-image { max-height: 400px; }

// desktop.css
.hero-image { max-height: 600px; }

Điểm đặc biệt là cách tổ chức code này không yêu cầu bạn dùng @media trong mỗi file nữa, mà thay vào đó là đăng ký file stylesheet theo từng khung hình như thế này:

<link rel="stylesheet" media='screen and (min-width: 140px) and (max-width: 479px)' href="mobile.css"/>
<link rel="stylesheet" media='screen and (min-width: 480px) and (max-width: 1024px)' href="tablet.css"/>

Việc đăng ký này sẽ diễn ra trong cặp thẻ <HEAD></HEAD> bạn thường thấy. Ví dụ điển hình nhất là cách mà plugin thương mại điện tử nổi tiếng WooCommerce đăng ký file style commerce-smallscreen.css như sau trong PHP:

<?php
...
'woocommerce-smallscreen' => array(
    'src'     => self::get_asset_url( 'assets/css/woocommerce-smallscreen.css' ),
    'deps'    => 'woocommerce-layout',
    'version' => WC_VERSION,
    'media'   => 'only screen and (max-width: ' . apply_filters( 'woocommerce_style_smallscreen_breakpoint', $breakpoint = '768px' ) . ')',
    'has_rtl' => true,
),
?>

Mình không bàn về điểm lợi của phương án này, vì nó tùy theo dự án. Cá nhân mình thì không thích lắm vì mình thích chia theo module và tách nhỏ theo page template hơn.

Kiểu thứ hai: Responsive gộp chung một file

Kiểu này thì khá phổ thông và được nhiều bạn developer biết đến qua việc sử dụng cùng với @media , và mình cũng đang sử dung kiểu viết này.

Thực chất, nếu bạn chưa rõ, thì nó chỉ là 1 file stylesheet .css duy nhất, trong đó, các thành phần có luôn cả style của nó trong đủ mọi khung hình.

Ví dụ:

.hero-image { max-height: 200px; }

@media screen and (min-width: 480px) {
  .hero-image { max-height: 400px; }
}

@media screen and (min-width: 1024px) {
  .hero-image { max-height: 600px; }
}

Đấy là cách viết trong 1 file stylesheet thông thường. Nếu bạn học và biết cách dùng LESS/Sass hay postCSS thì có thể viết tiện hơn bằng cách lồng vào trong selector như thế này:

// Sass/Scss
.hero-image {
  max-height: 200px;

  @include from('s') {
    max-height: 400px;
  }

  @include from('m') {
    max-height: 600px;
  }
}

Bạn thấy cách viết trên dễ nhìn và có thể xử lý đọc hiểu code tương đối dễ dàng hơn so với cách viết CSS Media Queries truyền thống.

Kết luận

Qua một bài viết ngắn này, các bạn cần tự tìm hiểu cách viết syntax media sao cho gọn và dễ hiểu. Nếu chưa rõ cách thức cài đặt phần này như thế nào, hãy bình luận dưới bài viết nhé.

Author

Khôi là Founder của CODE TOT JSC., công ty chuyên cung cấp dịch vụ website đa tính năng dành cho doanh nghiệp.

Write A Comment