CSS Responsive

Responsive hiểu đơn giản là trang website tương thích với tất cả mọi trình duyệt máy tính, máy tính bảng, điện thoại di động.

Để làm được điều đó thì các nhà phát triển website phải CSS cho từng thiết bị một, nếu như gà thì mỗi thiết bị code lại một lần còn nếu như pro thì chỉ cần code những cái khác biệt là đủ.

Cấu trúc file CSS Responsive như dưới đây bắt theo chiều ngang trình duyệt để CSS các bạn có thể tham khảo.

/* Mobile Menu
================================================== */
/* Smaller Then Desktop
================================================== */
@media only screen and (max-width: 959px) {
/*css cho thiết bị màn hình nhỏ tại đây*/
}
/* Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
/*css cho máy tính bảng quay ngang*/
}
/* Mobile (Portrait & Landscape)
================================================== */
@media only screen and (max-width: 767px) {
/*css cho máy tính bảng đứng, điện thoại quay ngang*/
}
/* Mobile (Landscape)
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
/* Mobile (Portrait only)
================================================== */
@media only screen and (max-width: 479px) {
}

Về cơ bản như vậy là đủ nếu bạn muốn CSS cho từng thiết bị riêng thì kiểm tra chiều rộng của thiết bị và thêm đoạn này vào với *** là kích thước trình duyệt.

@media only screen and (max-width: ***px) {
}

CSS có thể làm mọi thứ chỉ là bạn chưa khám khá ra thôi, nên cứ  từ từ cần thì sẽ tìm hiểu.

N.S