Responsive

Các cách code responsive

Responsive có nhiều cách viết code khác nhau, tuy nhiên lựa chọn phương pháp nào phù hợp với yêu cầu sao cho tối ưu thì không phải ai cũng biết.

Bài học này sẽ giới thiệu với các bạn một vài phương pháp code responsive hiệu quả thường gặp.

Responsive - ưu tiên Mobile (Mobile first)

Mobile first, là phương pháp viết cho giao diện Mobile (màn hình nhỏ) trước, sau đó sẽ viết responsive cho các màn hình lớn hơn.

Phương pháp này thích hợp cho các trang web hướng tới người dùng sử dụng điện thoại, dự đoán được lượng người dùng điện thoại cao hơn nhiều so với các thiết bị khác.

Tham khảo cấu trúc viết cho Mobile first:

/*-- Code cho màn hình nhỏ (Mobile) viết ở đây --*/

@media only screen and (min-width: 641px) and (max-width: 1024px) {
    /*-- Code cho màn hình vừa (Table) viết ở đây --*/
}

@media only screen and (min-width: 1025px) {
    /*-- Code cho màn hình lớn (PC) viết ở đây --*/
}

Responsive Mobile first

Responsive - ưu tiên PC (Desktop layout)

Ưu tiên PC, là phương pháp viết cho giao diện PC (màn hình lớn) trước, sau đó sẽ viết responsive cho các màn hình nhỏ hơn.

Phương pháp này thích hợp cho các trang web hướng tới người dùng sử dụng thiết bị có Desktop hoặc Laptop.

Tham khảo cấu trúc viết cho ưu tiên PC:

/*-- Code cho màn hình lớn (PC) viết ở đây --*/

@media only screen and (max-width: 1024px) {
    /*-- Code cho màn hình vừa (Table) viết ở đây --*/
}

@media only screen and (max-width: 640px) {
    /*-- Code cho màn hình nhỏ (Mobile) viết ở đây --*/
}

Responsive PC first

Responsive - cách viết theo thứ tự màn hình

Là cách viết cho từng dạng màn hình riêng biệt, ví dụ như sau khi viết xong màn hình lớn (PC), sau đó mới viết tiếp cho màn hình vừa (Tablet), cuối cùng là viết cho màn hình nhỏ (Mobile), đây là cách thường được ưa chuộng.

Cách viết này hiệu quả trong việc kiểm soát code của từng loại màn hình rất tốt, việc tìm kiếm code cũng dễ dàng hơn.

Điểm chưa tốt: thao tác chỉnh sửa giữa các màn hình hơi mất thời gian, vì scroll lên xuống nhiều lần.

Tham khảo cấu trúc viết:

/*-- Code cho màn hình lớn (PC) viết ở đây --*/
tag1 {
    property1: value1;
}

tag2 {
    property2: value2;
}

tag3 {
    property3: value3;
}

@media only screen and (max-width: 1024px) {
    /*-- Code cho màn hình vừa (Table) viết ở đây --*/
    tag1 {
        property1: value1;
    }

    tag2 {
        property2: value2;
    }

    tag3 {
        property3: value3;
    }
}

@media only screen and (max-width: 640px) {
    /*-- Code cho màn hình nhỏ (Mobile) viết ở đây --*/
    tag1 {
        property1: value1;
    }

    tag2 {
        property2: value2;
    }

    tag3 {
        property3: value3;
    }
}

Responsive - cách viết theo tính năng

Đây là cách viết dành cho những trang web có nhiều tính năng, hoặc người code muốn kiểm soát tốt giao diện theo tính năng.

Điểm mạnh của cách viết này là kiểm soát khá tốt giao diện theo từng tính năng, thao tác viết cho từng tính năng cũng nhanh hơn.

Điểm chưa tốt: nội dung CSS sẽ dài và nếu kiểm soát không tốt sẽ dễ rối.

Tham khảo cấu trúc viết:

/*-- Code cho tính năng 1 --*/
tag1 {
    property1: value1;
}
@media only screen and (max-width: 1024px) {
    tag1 {
        property1: value1;
    }
}
@media only screen and (max-width: 640px) {
    tag1 {
        property1: value1;
    }
}

/*-- Code cho tính năng 2 --*/
tag2 {
    property2: value2;
}
@media only screen and (max-width: 1024px) {
    tag2 {
        property2: value2;
    }
}
@media only screen and (max-width: 640px) {
    tag2 {
        property2: value2;
    }
}

/*-- Code cho tính năng 3 --*/
tag3 {
    property3: value3;
}
@media only screen and (max-width: 1024px) {
    tag3 {
        property3: value3;
    }
}
@media only screen and (max-width: 640px) {
    tag3 {
        property3: value3;
    }
}

Responsive layout block