Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Responsive Website Là Gì? 25 Thiết Kế Website Responsive 2021

Responsive Website Là Gì? 25 Thiết Kế Website Responsive 2021


Ngày 25 Tháng 12 Năm 2020

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu responsive là gì và các ví dụ thực tế được thiết kế đáp ứng để áp dùng vào quá trình phát triển website nhé!


Responsive Là Gì?

Responsive Web Design(RWD) là kỹ thuật thiết kế để trang web có thể hiển thị được trên nhiều loại màn hình và thiết bị khác nhau (máy tính bàn, laptop, điện thoại). Để dễ hình dùng hơn thì bạn xem hình ảnh minh họa bên dưới nhé!

Ví dụ Về Responsive web Design

Có một số cách để bạn có thể thiết kế đáp ứng cho trang web của mình là:

  • Thiết lập viewport: Bạn nên thiết lập thẻ meta viewport cho tất cả các trang để có thể thiết lập responsive cho website.
    <meta name="viewport" content="width=device-width, initial-scale=1">
  • Hình Ảnh: Thông thường thì hình ảnh sẽ có kích thước cố định. Do đó khi chúng ta sử dụng cho tất cả thiết bị sẽ gây ra tình trạng vỡ bố cục. Vì vậy để hình ảnh có thể đáp ứng trên nhiều loại màn hình thì chúng ta có thể thiết lập độ rộng của nó bằng 100%.
    .hinh_anh{max-width: 100%; display: block}
  • Sử dụng @media: Đối với những phần tử phức tạp thì bạn có thể dùng @media để thiết lập cách mà phần tử này sẽ hiển thị trên những màn hình khác nhau.
     @media (min-width: Độ rộng của thiết bị){}
  • Sử dụng layout hiện đại trong CSS: Hiện nay CSS3 đã cung cấp hai kỹ thuật giúp bạn có thể tạo các bố cục responsive một cách dễ dàng hơn là Flexbox và Grid. Bạn có thể tham khảo thêm về hai thuộc tính này ở đường dẫn bên dưới nhé!
    Những Bài Viết Và Công Cụ Hay Dành Cho Flexbox.
    Những Nguồn Lập Trình Giúp Bạn Học CSS Grid Hiệu Quả Và Dễ Dàng Hơn.

Bạn có thể tham khảo thêm về các cách thiết kế web responsive tại Responsive web design Web.dev

Cách Thiết kế Responsive Menu

See the Pen Responsive and Mega menu by Arjun Amgain (@arjunamgain) on CodePen.

Nguồn

Cách Tạo Accordion Responsive

See the Pen CSS + HTML only Accordion Element by Alex Bergin (@abergin) on CodePen.

Nguồn

Cách Tạo Responsive Timeline

See the Pen Timeline by Bruno Rodrigues (@itbruno) on CodePen.

Nguồn

Cách Tạo Responsive Table

See the Pen Responsive Table by Geoff Yuen (@geoffyuen) on CodePen.

Nguồn

Thiết Kế Responsive Modal

See the Pen Responsive Modal Design by Ettrics (@ettrics) on CodePen.

Nguồn

Thiết Kế Responsive Slider CSS

See the Pen HTML5 CSS-Driven Responsive Image Slider With Captions by Dudley Storey (@dudleystorey) on CodePen.

Nguồn

Thiết Kế Responsive cho Thanh Tiêu Đề

See the Pen Sticky Slider Navigation (Responsive) by Ettrics (@ettrics) on CodePen.

Nguồn

Thiết Kế Responsive Cho Audio Player

See the Pen Responsive Audio Player by Mark Hillard (@markhillard) on CodePen.

Nguồn

Thiết Kế Responsive Cho Owl Carousel

See the Pen Owl Carousel stage slider by Clark Wimberly (@clarklab) on CodePen.

Nguồn

Tạo Responsive Cho Slick Slideshow

See the Pen Slick Slideshow with blur effect by Fabio Ottaviani (@supah) on CodePen.

Nguồn

Tạo Responsive Video Trong Modal

See the Pen Play YouTube or Vimeo Video in Modal - Bootstrap 4 by Jacob Lett (@JacobLett) on CodePen.

Nguồn

Tạo Responsive Image Với Flexbox

See the Pen A Better Responsive Image Gallery With Flexbox by Dudley Storey (@dudleystorey) on CodePen.

Nguồn

Thiết kế Responsive Background Video

See the Pen Responsive Background Video by Daniel Riemer (@zitrusfrisch) on CodePen.

Nguồn

Thiết kế Responsive Tab CSS

See the Pen Responsive pure CSS tabs & accordion by mikestreety (@mikestreety) on CodePen.

Nguồn

Thiết kế Responsive Image Gallery

See the Pen CSS Grid Responsive Image Gallery by Stephanie (@ramenhog) on CodePen.

Nguồn

Thiết kế Responsive Video Youtube

See the Pen Responsive iFrames by Ben Marshall (@bmarshall511) on CodePen.

Nguồn

Thiết kế Responsive Pagination(Phân Trang)

See the Pen Responsive Flexbox Pagination by William H. (@iamjustaman) on CodePen.

Nguồn

Thiết kế Responsive Form

See the Pen RESPONSIVE MATERIAL DESIGN CONTACT FORM by Nikhil Krishnan (@nikhil8krishnan) on CodePen.

Nguồn

Thiết kế Responsive Typography(Chữ) Cho Website

See the Pen Viewport sized typography with minimum and maximum sizes by Eduardo Bouças (@eduardoboucas) on CodePen.

Nguồn

Thiết kế Responsive Image Carousel Bằng Flexbox

See the Pen FlexBox Exercise #3 - Image carousel by Veronica (@veronicadev) on CodePen.

Nguồn

Thiết kế Responsive Menu Với Bootstrap4

See the Pen Responsive Bootstrap 4 menu - light/dark by Ivan Grozdic (@ig_design) on CodePen.

Nguồn

Thiết kế Responsive Form Flexbox

See the Pen Flexbox Responsive Form by Adam Argyle (@argyleink) on CodePen.

Nguồn

Thiết kế Responsive Form Đăng Nhập Và Đăng Ký

See the Pen Responsive Signup/Login form by Mohamed Hasan (@Mhmdhasan) on CodePen.

Nguồn

Thiết kế Responsive Background Video Header

See the Pen Responsive HTML5 Background Video Demo by Angus Russell (@GusRuss89) on CodePen.

Nguồn

Thiết kế Responsive Contact Form

See the Pen Responsive Contact Form by Bobby Korec (@bobbykorec) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức và ví dụ responsive hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!