h­ướng dẫn responsive web mobile

h­ướng dẫn responsive web mobile

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ẻ :
[code type=html]

[/code]

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.

[code type=html]
/*————————————*
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) {

}

[/code]

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 bootstrap

web responsive với bootstrap

 

MORE / INFO DEMO

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

Share this post

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai.