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

Thảo luận trong 'Lập trình website' bắt đầu bởi admin, 17/12/14.

  1. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    3,748
    Đã được thích:
    717
    Đ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
    Đang tải...
  2. linhtuyen102

    linhtuyen102 Banned

    Tham gia ngày:
    4/3/15
    Bài viết:
    3
    Đã được thích:
    0
    Đ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

    dieuhoa3 Thành Viên Thường

    Tham gia ngày:
    7/9/15
    Bài viết:
    163
    Đã được thích:
    3
    Đ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

    linht1106k1 Thành Viên Mới

    Tham gia ngày:
    9/12/15
    Bài viết:
    26
    Đã đượ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

    Quy Nguyen

    Vip Member

    Tham gia ngày:
    23/12/15
    Bài viết:
    108
    Đã được thích:
    0
    Điểm thành tích:
    16
    Giới tính:
    Nam
    Chưa hiểu lắm :((((((((
     
  6. sonweb1988

    sonweb1988 Thành Viên Mới

    Tham gia ngày:
    21/2/15
    Bài viết:
    20
    Đã đượ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

    congnghentm

    Vip Member

    Tham gia ngày:
    7/1/16
    Bài viết:
    14
    Đã đượ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

    hoclaixelod Thành Viên Mới

    Tham gia ngày:
    3/11/15
    Bài viết:
    28
    Đã đượ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

    Tran Minh Ngoc Thành Viên Mới

    Tham gia ngày:
    8/1/16
    Bài viết:
    96
    Đã được thích:
    2
    Đ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?
     


Like và Share ủng hộ ITSEOVN