Cách website hiển thị Responsive | Học lập trình cùng iif

Responsive là gì ?
Kỹ thuật chính của thiết kế Responsive
Lợi ích của thiết kế Responsive
Cách sử dụng Responsive

1. Responsive là gì ?

Responsive một phương pháp thiết kế web cho phép giao diện của trang web / app web tự động điều chỉnh để phù hợp với kích thước và độ phân giải của các loại thiết bị khác nhau, bao gồm máy tính để bàn, máy tính bảng và điện thoại di động.

Ví dụ:
- Độ rộng của máy tính khoảng > 1300 pixel, chiều cao : 700 pixel
- Độ rộng của điện thoại khoảng > 300 ~ 400 pixel, chiều cao : ~ 300 pixel

Mục tiêu của thiết kế Responsive là mang lại hiệu đọc nội dung người dùng tốt nhất, bất kể họ truy cập trang web từ loại thiết bị nào.

Lúc chưa có Responsive thì người dùng phải zoom to khi vào các thiết bị có màn hình nhỏ (~300 pixel)

2. Kỹ thuật chính của thiết kế Responsive

Media Queries: CSS Media Queries cho phép áp dụng các kiểu CSS khác nhau dựa trên kích thước màn hình và độ phân giải của thiết bị. Điều này cho phép thay đổi cách hiển thị mà không cần tạo nhiều phiên bản trang web.

Một ví dụ Media Queries đơn giản nhất:

@media (max-width: 768px) {
    p {
    font-size:2em;
    }
}

// Nếu màn hình nhỏ thì TĂNG font lên cho người dùng dễ đọc

Hình ảnh và văn bản linh hoạt: Hình ảnh có thể co giãn để phù hợp với các kích thước khác nhau, và văn bản cũng điều chỉnh kích thước để dễ đọc trên mọi thiết bị.

img {
width:80%;
}
// Hỉnh ảnh sẽ đều trên mọi thiết bị, nếu ta sử dụng

img {
width:600px;
}

// Có vẻ bất ổn vì màn hình điện thoại tầm 300~ nhưng hiển thị 600px, dẫn đến bị tràn hiển thị (che lấp)

Thẻ Meta Viewport: Thẻ này giúp trang web hiển thị theo kích thước thực của màn hình, thay vì phóng to hay thu nhỏ, đảm bảo trang web không bị quá to hoặc quá nhỏ trên các màn hình khác nhau.

3. Lợi ích của thiết kế Responsive

    Cải thiện trải nghiệm người dùng: Người dùng có thể truy cập trang web từ mọi thiết bị mà không gặp khó khăn khi điều hướng hoặc đọc nội dung.
    Tối ưu SEO: Google ưu tiên các trang web Responsive, vì vậy trang web dễ được xếp hạng cao hơn trên kết quả tìm kiếm.
    Tiết kiệm chi phí và thời gian: Thay vì phát triển nhiều phiên bản cho các loại thiết bị khác nhau, bạn chỉ cần tạo một trang web có thể điều chỉnh linh hoạt.

4. Cách sử dụng Responsive

4.1. Cách sử dụng Viewport Meta Tag

Trong file HTML, thêm thẻ meta này vào phần <head> để điều chỉnh độ rộng và thu phóng của trang web trên thiết bị di động:

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4.2. Sử dụng CSS Flexbox và CSS Grid

CSS Flexbox và CSS Grid là các công cụ mạnh mẽ để tạo layout linh hoạt và có thể điều chỉnh dễ dàng. Bạn có thể sử dụng chúng để tạo cấu trúc Responsive mà không cần phải tạo các lớp phức tạp.

    Flexbox: Dùng để bố trí các phần tử trong dòng hoặc cột, tốt cho các layout một chiều.

    css

.container {
    display: flex;
    flex-wrap: wrap;
}

Grid: Dùng để tạo layout hai chiều, phù hợp với các bố cục phức tạp hơn.

css

    .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

4. 3. Sử dụng Media Queries

Sử dụng media queries để thay đổi kiểu dáng CSS dựa trên kích thước màn hình. Ví dụ:

css

/* Thiết lập mặc định cho màn hình lớn */
.container {
    display: flex;
    flex-direction: row;
}

/* Điều chỉnh cho màn hình nhỏ hơn (ví dụ: điện thoại) */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

4.4. Đặt Kích Thước theo Phần Trăm hoặc vh, vw

Sử dụng đơn vị phần trăm (%) hoặc vw (viewport width) và vh (viewport height) thay vì px để các phần tử tự điều chỉnh kích thước.

css

.box {
width: 50%; /* Chiếm 50% chiều rộng của container */
height: 30vh; /* Chiều cao là 30% của chiều cao màn hình */
}

4.5. Sử dụng Font chữ và Hình ảnh Responsive

Font chữ: Sử dụng đơn vị em hoặc rem cho kích thước font để nó có thể điều chỉnh kích thước dựa trên viewport.

    css

h1 {
    font-size: 2em;
}

Hình ảnh: Đặt thuộc tính max-width: 100% để hình ảnh tự điều chỉnh kích thước.

css

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

4.6. Kiểm tra Responsive

Sử dụng DevTools của trình duyệt (F12 trong Chrome) và chọn chế độ Responsive Design Mode để kiểm tra trang web trên các kích thước màn hình khác nhau.
Ví dụ về CSS Responsive cơ bản

css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.box {
    width: 33.33%; /* Chia thành ba cột cho màn hình lớn */
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

@media (max-width: 768px) {
    .box {
        width: 50%; /* Chia thành hai cột cho màn hình trung bình */
    }
}

@media (max-width: 480px) {
    .box {
        width: 100%; /* Chiếm toàn bộ màn hình cho điện thoại */
    }
}

Với các kỹ thuật trên, bạn có thể tạo trang web hiển thị Responsive, đảm bảo trải nghiệm người dùng tốt trên mọi thiết bị.

Tìm kiếm: responsive la gi ?;ky thuat chinh cua thiet ke responsive;loi ich cua thiet ke responsive;cach su dung responsive;