Rate this post

Responsive design là một phương pháp thiết kế trang web cho phép trang web tự điều chỉnh kích thước và hiển thị trên các thiết bị khác nhau, bao gồm cả máy tính, điện thoại di động và máy tính bảng.

Các bài viết liên quan:

Trong CSS, có một số thuộc tính và kỹ thuật có thể sử dụng để thiết kế trang web responsive như:

  • Media Queries: cho phép bạn thiết lập các điều kiện cho các thuộc tính CSS để chỉ áp dụng trên các thiết bị với kích thước màn hình hoặc khả năng đặc biệt.
  • Flexbox và Grid Layout: cho phép bạn thiết kế bố cục trang web một cách linh hoạt và dễ dàng tự điều chỉnh khi kích thước màn hình thay đổi.
  • Viewport: cho phép bạn điều chỉnh cách trình duyệt xử lý và hiển thị trang web trên các thiết bị di động.

Ví dụ:

@media (max-width: 768px) {
    /* CSS rules for screens smaller than 768px */
    body {
        font-size: 14px;
    }
    .container {
        flex-wrap: wrap;
    }
    .img-responsive {
        max-width:100%; height: auto; 
  }
}

Trong ví dụ trên, media query được sử dụng để chỉ áp dụng các quy tắc CSS cho màn hình có độ rộng nhỏ hơn 768px. Trong đó, font-size của body được thiết lập là 14px, container có thể chứa nhiều hơn một hàng và hình ảnh có thuộc tính class "img-responsive" sẽ tự điều chỉnh kích thước theo chiều rộng của thiết bị.

Như vậy, responsive design trong CSS cho phép bạn thiết kế trang web tương thích với các thiết bị khác nhau và cung cấp trải nghiệm tốt hơn cho người dùng.

Các thuộc tính responsive trong css

Một số thuộc tính responsive trong CSS:

  • widthmax-width: cho phép giới hạn chiều rộng của một thành phần.
  • heightmax-height: cho phép giới hạn chiều cao của một thành phần.
  • marginpadding: cho phép thiết lập khoảng cách giữa các thành phần.
  • display: cho phép chuyển đổi giữa các kiểu hiển thị như block, inline, v.v.
  • flexboxgrid: cho phép thiết kế bố cục linh hoạt và tự điều chỉnh khi kích thước màn hình thay đổi.
  • media queries: cho phép áp dụng các quy tắc CSS cho các thiết bị có kích thước màn hình hoặc khả năng đặc biệt.
  • font-size: cho phép thiết lập kích thước font cho văn bản
  • @viewport: cho phép điều chỉnh cách trình duyệt xử lý và hiển thị trang web trên các thiết bị di động
  • word-wrap: cho phép tự động xuống dòng văn bản khi chiều rộng thay đổi
  • object-fit: cho phép tự động chỉnh kích thước hình ảnh và vị trí khi chiều rộng thay đổi
  • order: cho phép sắp xếp các thành phần với nhau
  • grid-template-columns : cho phép thiết lập kế số lượng cột trong grid layout
  • grid-template-rows: cho phép thiết lập số lượng hàng trong grid layout
  • grid-column-gap: cho phép thiết lập khoảng cách giữa các cột trong grid layout
  • grid-row-gap: cho phép thiết lập khoảng cách giữa các hàng trong grid layout
  • grid-column: cho phép xác định vị trí của một thành phần trong grid layout theo cột
  • grid-row: cho phép xác định vị trí của một thành phần trong grid layout theo hàng
  • align-items: cho phép canh lề thành phần theo chiều dọc trong flexbox
  • justify-content: cho phép canh lề thành phần theo chiều ngang trong flexbox
  • flex-wrap: cho phép tự động xuống dòng các thành phần trong flexbox khi không còn chỗ trống.

Các thuộc tính trên là một số ví dụ của các thuộc tính responsive trong CSS, tuy nhiên có rất nhiều thuộc tính khác có thể sử dụng để tạo trang web responsive.

một số ví dụ responsive trong css

Ví dụ 1: Thiết kế bố cục trang web theo grid layout với 3 cột và 2 hàng và tự điều chỉnh khi kích thước màn hình thay đổi.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

Ví dụ 2: Thiết lập font-size tự điều chỉnh theo kích thước màn hình.

body {
    font-size: 16px;
}
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
}
@media (min-width: 992px) {
    body {
        font-size: 20px;
    }
}

Ví dụ 3: Thiết lập chiều rộng của hình ảnh tự điều chỉnh theo kích thước màn hình.

img {
    max-width: 100%;
    height: auto;
}

Ví dụ 4: Thiết lập bố cục trang web theo flexbox với các thành phần tự điều chỉnh khi kích thước màn hình thay đổi.

.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

Trong các ví dụ trên, tôi đã trình bày một số ví dụ về cách sử dụng các thuộc tính responsive trong CSS để thiết kế trang web tương thích với các thiết bị khác nhau. Tuy nhiên, có rất nhiều cách khác để sử dụng các thuộc tính responsive trong CSS và tùy thuộc vào yêu cầu và mục tiêu của trang web mà bạn cần sử dụng các thuộc tính khác nhau.

Ví dụ 5: Thiết lập menu chuyển đổi sang dạng hamburger khi kích thước màn hình nhỏ hơn 768px.

@media (max-width: 768px) {
    .menu {
        display: none;
    }
    .hamburger-menu {
        display: block;
    }
}

Ví dụ 6: Thiết lập layout cho trang web chuyển đổi từ dạng 2 cột sang 1 cột khi kích thước màn hình nhỏ hơn 992px.

@media (max-width: 992px) {
    .main-content {
        grid-column: 1 / 3;
    }
    .sidebar {
        display: none;
    }
}

Như vậy, có rất nhiều cách để sử dụng các thuộc tính responsive trong CSS để thiết kế trang web tương thích với các thiết bị khác nhau và cung cấp trải nghiệm tốt hơn cho người dùng.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now