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

Chi tiết

Liên quan

Nhận xét

Tác giả

Bản Quyền

Xem toàn trang

Nếu muốn xem bài viết một kích thước lớn hãy click xem toàn trang nhé!

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!

Chia sẻ lên Facebook

Chia sẻ lên Zalo

Lưu ý:
Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/xvhDr24.png[/img]

Trịnh Công Sơn

“Đừng so sánh mình với bất cứ ai trong thế giới này. Nếu bạn làm như vậy có nghĩa bạn đang sỉ nhục chính bản thân mình.”

Tất cả bài đăng trên website đều thuộc bản quyền về Tôi Viết Code, chỉ được phát hành lại nội dung từ website này khi có sự đồng ý bằng văn bản của admin