6
Tôi đang cố gắng thiết lập một chủ đề wordpress đáp ứng cơ bản. Để bắt đầu, tôi nắm lấy chủ đề hộp công cụ từ wordpress.org và thêm twitter bootstrap css/js đáp ứng.CSS đáp ứng cho điện thoại/màn hình nhỏ
Tôi đã thêm một số kiểu thử nghiệm cơ bản, chỉ để giảm đệm trên màn hình nhỏ hơn và thay đổi màu để cho biết rằng nó hoạt động. Vì một số lý do, các kiểu cho điện thoại ngang không hoạt động.
Bạn có thể xem trang web của mình here.
mã CSS đáp ứng của tôi:
/* Large desktop */
@media (min-width: 1200px) {
body {
padding-left: 50px;
padding-right: 50px;
color: green;
}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 1199px) {
body {
padding-left: 30px;
padding-right: 30px;
color: purple;
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
color: blue;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
body {
padding-left: 5px;
padding-right: 5px;
color: red;
}
}
Không chỉ cảnh quan điện thoại, nó cũng không hoạt động trên máy tính bảng nhỏ (800x600), máy tính bảng chân dung (768x1024), máy tính bảng cảnh quan (1024x768) – defau1t
@ tốt, đây chỉ là một khởi đầu (các kích thước thực sự là từ anh ấy hướng dẫn khởi động đáp ứng). Tôi không có quy tắc cho các kích thước bạn đã đề cập, nhưng tôi có một quy tắc nên bao gồm điện thoại (<481px rộng) và tôi không thể tìm ra lý do tại sao nó không hoạt động. – MrGlass
các quy tắc tôi đã đề cập, bạn không cần phải bận tâm về họ chỉ cần đảm bảo các nhịp này thêm 12 vào mỗi bootstrap twitter. Theo như quy tắc của bạn không bao gồm/hoạt động/trên iphones (481px). Điều đó có nghĩa là bạn đã đặt đúng điểm ngắt phương tiện truyền thông. – defau1t