Thiết kế responsive cho WordPress giúp giao diện WordPress của bạn tương thích với các thiết bị di động và website sẽ hiển thị đẹp trên mọi thiết bị có kích thước màn hình khác nhau. Bài viết này mình sẽ giới thiệu đến các bạn một vài kích thước thông dụng để làm responsive trong khi thiết kế giao diện cho WordPress.
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 980px) {
}
@media only screen and (max-width: 800px) {
}
@media only screen and (max-width: 780px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 720px) {
}
@media only screen and (max-width: 640px) {
}
@media only screen and (max-width: 600px) {
}
@media only screen and (max-width: 568px) {
}
@media only screen and (max-width: 563px) {
}
@media only screen and (max-width: 549px) {
}
@media only screen and (max-width: 534px) {
}
@media only screen and (max-width: 480px) {
}
@media only screen and (max-width: 360px) {
}
@media only screen and (max-width: 338px) {
}
@media only screen and (max-width: 330px) {
}
@media only screen and (max-width: 320px) {
}
Ngoài các kích thước mình liệt kê bên trên thì bạn cũng có thể bổ sung thêm các kích thước nhỏ hoặc lớn hơn. Miễn sao khi bạn kéo to hay thu nhỏ màn hình mà giao diện không có sự thay đổi nào làm xấu trang của bạn, nếu có sự thay đổi xảy ra mà bạn không ưng ý thì có thể bổ sung thêm css như mình giới thiệu bên trên.
@media only screen and (min-width:360px) and (max-width: 480px) {
}
Ngoài câu điều kiện kiểm tra độ rộng màn hình lớn nhất thì bạn cũng có thể kiểm tra kết hợp kích thước nằm trong khoảng giữa như mình ví dụ bên trên.
Bạn cũng có thể tùy chỉnh để load các tập tin css theo điều kiện, nếu màn hình phù hợp với điều kiện của bạn thì tập tin css sẽ được load lên tương ứng.
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css"> <link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css"> <link rel="stylesheet" media="(orientation: portrait)" href="portrait.css"> <link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
