17:15 - 31/12/18 / 2 nhận xét

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

Xin chào tất cả các bạn đã đến với blog của mình!
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é.

Trước khi vào bài viết chúng ta sẽ giới thiệu về css @ media nhé:

1. Media CSS là gì?

Media CSS là một "công nghệ" được giới thiệu trong Css3. Nguyên tắc nó sử dụng trên thông qua các thông số kích thước màn hình được khai báo thông qua @media Với công cụ này chúng ta có thể phân đoạn Css chúng ta ra nhiều phần khác nhau tương ứng với kích thước của các loại thiết bị.

Trong đó mediatype gồm các thuộc tính hay sử dụng sau:

all: Dùng cho mọi thiết bị print: Dùng cho máy in.
screen: Dùng cho máy tính và các thiết bị smart phone.

Vẫn còn một số thuồng óng nữa nhưng mình sẽ giới thiệu ở sau nhé, giờ thì 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!