Tôi Viết Code

Welcome to ToiVietCode

Chúc các bạn có những phút giây thật vui vẻ và ý nghĩa tại blog nhé! hihi...

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!

N
Trịnh Công Sơn

Cuộc sống đôi lúc không như chúng ta mong muốn nhưng đừng buồn, đừng suy nghĩ nhiều quá mà hãy tiếp tục đứng lên và chiến đấu tiếp vì tương lai của chính mình nhé!

8 nhận xét:
1. Chèn ảnh: [img]Link ảnh[/img]
2. Chèn video: [youtube]ID Video[/youtube]
Hướng dẫn lấy ID Video từ Youtube

Ví dụ video có link trực tiếp: https://www.youtube.com/watch?v=BUaLnDL3f-M, ta sẽ lấy BUaLnDL3f-M và thay vào vị trí ID Video ở cú pháp trên.

Nội quy chung Tôi Viết Code

1. Bài viết đều tự tay tác giả viết nên nếu có ý định copy xin hãy ghi nguồn bài viết đó.
2. Không được spam dưới mọi hình thức và đưa ra những bình luận xúc phạm đến danh dự và nhân phẩm của người khác (những bình luận vi phạm sẽ bị xóa).

Đang cập nhật thêm nội quy...

- Blog: Tôi Viết Code - Life Is Share
- Thành lập: 22/09/2017
- Nội dung: Blog chủ yếu viết về những tâm tư, tình cảm và những điều xung quanh cuộc sống của tác giả. Ngoài ra, blog thi thoảng còn chia sẻ một vài thủ thuật về Blogspot, share ảnh đẹp, tin tức về Công nghệ...
- Tác giả blog: Trịnh Công Sơn hiện đang là một học sinh trung học.

Lời cuối chúc các bạn có những phút giây thật vui vẻ và ý nghĩa tại blog nhé!