Responsive laravel note
Có nhiều đặc điểm môi trường tác động đến việc này bao gồm:
- Kết nối mạng
- Kích thước màn hình
- Loại tương tác (Màn hình cảm ứng, track pad)
- Độ phân giải đồ họa
Reponsive example:
@media screen and (max-width: 600px) { // tối đa chiều rộng là 600px
.input_search {
width: 80%;
}
@media (min-width: 600px) { tối thiểu 600px trở lên
- CSS Media Queries cho các kích thước và hướng màn hình khác nhau
- Media Queries cho phép bạn định kiểu các phần tử dựa trên chiều rộng khung nhìn.
- Một chiến lược CSS phổ biến là viết các style dành cho thiết bị di động trước (Mobile-first) và sau đó dựa trên đó để xây dựng các style phức tạp hơn cho các thiết bị khác (Máy tính để bàn, máy tính bảng...)
Thẻ meta viewport hướng dẫn trình duyệt cách điều chỉnh trang theo chiều rộng của từng thiết bị.
1/ <576px: Thiết bị cực nhỏ như điện thoại di động ở chế độ dọc.
2/ Từ 576px đến <768px: Thiết bị màn hình nhỏ như điện thoại di động ở chế độ ngang
3/ Từ 768px đến <992px: thiết bị màn hình trung bình như máy tính bảng
4/ Từ 992px đến <1200px: Thiết bị lớn như máy tính để bàn
5/ Từ 1200px trở lên: Các thiết bị có màn hình máy tính cực lớn