Sau đây mình chia sẻ về cơ bản vể việc responsive web trong việc thiết kế web mobile.Sự ra đời css3 đã hỗ trợ khá tốt cho việc responsive web , giúp web dễ dàng thiết kế tương thích với các trình duyệt mà bạn không cần phải mất nhiều công sức như trước.Để bắt đầu thiết kế web responsive ở trên header web bạn cần thêm thẻ :
Dòng này sẽ giúp các trình duyệt nhận thiết được các loại màn hình khác nhau.Tiếp theo để hướng dẫn responsive web mobile với các loại màn hình bạn sẽ dùng các thuộc tính css cơ bản sau.
/*------------------------------------*
RESPONSIVE
*------------------------------------*/
@media only screen and (min-width:320px) {
}
@media only screen and (min-width:480px) {
}
@media only screen and (min-width:768px) {
}
@media only screen and (min-width:1024px) {
}
@media only screen and (min-width:1140px) {
}
@media only screen and (min-width:1280px) {
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-resolution:144dpi) {
}
Tùy theo loại màn hình mà bạn sẽ css cho phù hợp.
Bạn có thể kết hợp vói các frameworks css hỗ trợ cho việc response cho web mobile.
Đây là vài frameworks css giúp cho việc responsive web mobile:
Twitter Bootstrap
web responsive với bootstrapMORE / INFODEMO
bạn có thể xem hướng dẫn bootstrap tại trang chủ bootstrap.Mình sẽ hướng dẫn bootstrap trong bài viết sau.Bạn có thể bắt đầu thiết kế web wordpress
với 1 blank theme bootstrap .Bạn có thể tải theme ở đây download.Bài sau mình sẽ hướng dẫn responsive web mobile với jquery mobile.
Bạn có thể tham khảo bài viết Hướng dẫn Bootstrap voi wordpress
Cảm ơn bạn đã đọc bài hướng dẫn responsive web mobile
wpDiscuz
