Web Responsive là gì ? tác dụng của Web Responsive trong thiết kế web

Thảo luận trong 'Tin tức lập trình Website' bắt đầu bởi admin, 17/12/14.

  1. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,990
    Đã được thích:
    1,214
    Điểm thành tích:
    113
    Giới tính:
    Nam
    1. Thiết kế web responsive là gì?
    • Web responsive hay còn được gọi là Responsive Web Design(dân lập trình thường viết tắt RWD) là một kiểu thiết kế làm cho web bạn chạy trên tất cả các thiết bị mà không bị bẻ hoặc bố cục không bị lộn xộn, hình ảnh không bị to nhỏ thất thường. Nói tóm lại web responsive là cách thiết kế giúp web chạy tốt phù hợp với mọi thết bị duyệt web và chạy tốt trên mọi độ phân giải màn hình.
    • VD: khi bạn duyệt web của ITSEOVN trên đi động và trên máy bàn sẽ khác nhau, và khi bạn duyệt web ITSEOVN ở chế độ 1400, 1024, 800,.. thì trang ITSEOVN sẽ hiển thị và ẩn hoặc giao diện sẽ đổi đi giúp người đọc, đọc nội dung được tốt nhât.
    2. Lợi ích của Responsive Web Design
    • RWD dùng để bố cục lại giao diện trang web cho tương thích với nhiều loại kích cỡ màn hình khác nhau.
    • Khi bạn sử dụng 1 chiếc điện thoại có độ phân giải thấp, khi bạn duyệt web trên máy tính sẽ thấy 1 mớ quảng cáo ình xèo từ các web khác, nếu web bạn không được tối ưu theo RWD thì khi bạn duyệt web trên di động đó, sẽ là 1 mớ hỗn độn về quảng cáo,... nhìn rất khó coi.
    • RWD giúp bạn duyệt web trên di động hoặc máy tính có độ phân giải thấp khi duyệt web vẫn đạt được hiệu quả cao.
    • Với một web site không được RWD khi duyệt trên di động và máy tính sẽ giống nhau, việc đọc nội dung bài viết rất khó khăn, chắc chắn khách hàng sẽ sợ và không bao giờ quay lại web bạn.
    • => RWD là một xu hướng thiết kế hoàn toàn có lợi bởi nó đảm bảo bạn sẽ luôn luôn có những trải nghiệm tốt nhất, đẹp nhất khi xem trang web dù bạn có đang dùng thiết bị nào đi nữa. Nó giúp nhà lập trình web tận dụng tối đa không gian để trình diễn những nội dung cho chúng ta xem theo cách thoải mái và thích thú nhất có thể.
    3. Cách thiết kế RWD đơn giản.
    • Giá trị chiều rộng phải để đơn vị % hoặc em (vd : width=20% hoặc width=5%). Mục đích là để nó có thể co dãn theo chiều rộng màn hình.
    • Cùng một thuộc tính (VD: background-color) quy định với nhiều màn hình: > 600px, > 700px; > 800px, thì bạn cần đặt !important cho CSS của >= 700px; >= 800px (Tức là bỏ cái CSS bình thường và cái nhỏ nhất (> 600px))
    • Để ý đoạn code bên trên của mình : Thuộc tính background-color, mình quy định trong 4 trường hợp: Bình thường, > 600px, > 700px; > 800px. Bạn cần đặt thêm !important vào sau mỗi thuộc tính CSS của > 700px; > 800px. Bạn sẽ đổi màu cho phù hợp để dễ nhìn hơn trong các kiểu màn hình.
    • Ngược lại nếu ở trên mình không dùng min-width mà dùng max-width thì cần thêm !important vào sau mỗi thuộc tính CSS của < 700px; < 600px.
    • Tóm lại là CSS giao diện mặc định, giá trị nhỏ nhất (nếu min-width), giá trị lớn nhất (nếu max-width) thì ko thêm !important, còn lại thì để giống trên.
    • Trên là 1 số ví dụ để giao diện phù hợp mới mọi kiểu view và màu sắc web cũng thay đổi với từng chế độ, ngoa ra trong đoạn code đó bạn có thể chế biến thêm tùy ý thích.
    Để biết thêm các công cụ giúp thiết kế web responsive hiệu quả thì bạn đọc bài sau : công cụ thiết kế web hiệu quả.
     
    Cảm ơn đã xem bài:

    Web Responsive là gì ? tác dụng của Web Responsive trong thiết kế web

    Chỉnh sửa cuối: 11/6/15
  2. linhtuyen102
    Tham gia ngày:
    4/3/15
    Bài viết:
    3
    Đã được thích:
    1
    Điểm thành tích:
    0
    Các bạn cho ý kiến về Responsive của trang này thế nào :1yh:
     
  3. dieuhoa3
    Tham gia ngày:
    7/9/15
    Bài viết:
    182
    Đã được thích:
    6
    Điểm thành tích:
    18
    Giới tính:
    Nam
    mình mới làm seo nên khái niệm này cũng chưa hiểu cho lắm
     
  4. linht1106k1
    Tham gia ngày:
    9/12/15
    Bài viết:
    22
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    cái này các bạn SEO ko cần hiểu mà chỉ cần biết để bảo bên lập trình web họ làm thui. Các bạn cứ hiểu nôm na là nếu website đã dc reponsive thì sẽ hiển thị đẹp trên toàn bộ các thiết bị như mobile, tab, ipad, destop, smart tivi ...
     
  5. Quy Nguyen
    Tham gia ngày:
    23/12/15
    Bài viết:
    104
    Đã được thích:
    0
    Điểm thành tích:
    16
    Giới tính:
    Nam
    Chưa hiểu lắm :((((((((
     
  6. sonweb1988
    Tham gia ngày:
    21/2/15
    Bài viết:
    4
    Đã được thích:
    0
    Điểm thành tích:
    1
    còn chung chung quá nếu responsive thì dùng boostrap , jquery mobile
     
  7. congnghentm
    Tham gia ngày:
    7/1/16
    Bài viết:
    19
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Hầu hết các trang bây giờ sử dụng Responsive nên thường có 3 cột để đáp ứng màn hình lớn và dấu bớt khi trong màn hình nhỏ, lần lượt là Content – sidebar – sidebar
     
  8. hoclaixelod
    Tham gia ngày:
    3/11/15
    Bài viết:
    23
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Đọc qua một hồi mà vẫn chưa hiểu nhiều lắm :( có lẽ kiến thức mình chưa đủ
     
  9. Tran Minh Ngoc
    Tham gia ngày:
    8/1/16
    Bài viết:
    83
    Đã được thích:
    1
    Điểm thành tích:
    6
    Giới tính:
    Nữ
    Đọc mấy làn rồi cũng chưa hiểu lắm ad ơi, nói chi tiết hơn đcc ko?
     


Chủ để tương tự : Responsive tác
Diễn đàn Tiêu đề Date
Tin tức lập trình Website Tổng hợp công cụ test responsive web design online miễn phí 5/1/16
Tin tức lập trình Website Kiểm tra website Responsive online hiệu quả chuyên nghiệp cho lập trình viên 5/1/16
Tin tức lập trình Website 13 công cụ web hỗ trợ thiết kế web Responsive và website thường hiệu quả 17/12/14
Tin tức lập trình Website 7 nguyên tắc khi thiết kế website du lịch chuẩn SEO 7/1/20
Tin tức lập trình Website Sử dụng cấu hình tập tin .htaccess toàn tập, .htaccess căn bản đến nâng cao 9/9/14