Sử dụng CSS @media để responsive website

Xin chào tất cả các bạn đã đến với Tôi Viết Code!
Như mình biết hiện nay thì trừ một số nhỏ những bạn làm blog về chủ đề tin tức báo chí ra thì đa số tất cả các bạn sử dụng blogger đều muốn blog mình vừa nhẹ, đẹp mà không cần sử dụng nhiều đoạn code hay javascript.

Thì hôm nay, mình sẽ hướng dẫn các bạn sử dụng CSS @media để tùy chỉnh một số thuộc tính của giao diện cho phù hợp nhé.

Bắt đầu nào:

Cũng khá đơn giản thôi nên mình không viết quá dài dòng tránh tình trạng bị nhàm chán khi đọc. Các bạn chèn đoạn css dưới vào trong template của mình:

@media screen and (max-width: số phần trăm độ rộng) 
{ 
vùng chọn{thuộc tính; thuộc tính} 
}

Phần trên là phần chính của css, các bạn đem về tự tùy biến theo ý thích của các bạn nhé, ví dụ các bạn muốn thumbnail bài viết ngoài trang chủ ẩn hiển thị khi sử dụng thiết bị có màn hình với width là 500px, các bạn sẽ tùy chỉnh lại CSS như sau:

@media screen and (max-width: 500px){ 
.block-image{display:none!important} 
}

Vì class của thumbnail bài viết ngoài trang chủ trong template của mình đang xài là block-image nên khi viết vùng chọn vào css sẽ là .block-image, nếu như các bạn sử dụng class khác thì có thể thay vào, hoặc các bạn sử dụng id thay cho class thì thay dấu "." trước tên vùng chọn thành dấu "#" .

Phía trên là mình hướng dẫn cho các bạn đơn giản hóa nhất và cũng là cơ bản nhất để responsive bằng CSS @media, ở những bài sau sẽ còn chuyên sâu về các kiểu của loại CSS này nữa, các bạn nhớ ủng hộ nha.

Hãy tùy chỉnh CSS phù hợp để giúp cho giao diện của bạn trở nên hoàn hảo nhé, chúc các bạn thành công!