Responsive cơ bản trong thiết kế Website

0
17

Trong bài viết này mình sẽ trình bày về Responsive một cách đơn giản nhất cho các bạn mới bắt đầu tìm hiều về HTML/CSS.

Hiện nay trong thiết kế Website chắc hẳn các bạn sẽ nghe đến từ “Responsive“. Vậy Responsive là gì và tại sao nó lại cần trong thiết kế Website?

Như các bạn đã biết thì ở thời điểm hiện tại điện thoại, laptop hay desktop nó đều có rất nhiều kích thước màn hình khác nhau. Và đối với một người phát triển giao diện Website thì chúng ta cần phải thiết kế giao diện sao cho phù hợp với từng kích thước màn hình khác nhau để đảm bảo trãi nghiệm của người dùng được trơn tru nhất.

Để làm được điều này thì trước đây người ta thường chia ra làm 2 hoặc hơn nhiều mã nguồn giao diện cho từng loại thiết bị. Nhưng hiện tại để giải quyết vấn đề này thì CSS đã cung cấp cho chúng ta một tính năng đó là @media.
Trong bộ @media có nhiều thuộc tính khác nhau, nhưng hôm nay mình chỉ trình bày cơ bản về thuộc tính screen của @media.

Khi nói về responsive thì nó lại có Desktop First hoặc Mobile First. Nhưng thông thường hiện nay người ta vẫn chuộng thiết kế Mobile First hơn.
Nhìn chung để chọn kiểu thiết kế nào phù hợp với dự án mà mình đang làm thì các bạn nên dành chút thời gian để phân tích xem Website của mình sẽ được khách hàng sử dụng nhiều nhất trên loại thiết bị nào để từ đó có thể lựa chọn được kiểu thiết kế phù hợp.
Mình ví dụ như mình làm một trang tin tức và mình nhận định là hơn 70% lượng người dùng của mình sẽ đọc nội dung bằng Mobile hoặc Tablet và lượng người dùng đọc nội dung bằng Desktop chiếm số lượng không đáng kể. Từ đó mình sẽ quyết định chọn hướng thiết kế Mobile First.

Không trình bày dài dòng nữa, mình sẽ đi thẳng vào việc sử dụng Responsive như thế nào.
Mình đã tạo một folder là Responsive chứa 2 files là index.htmlstyle.css.

Nội dung HTML

Trong file index.html mình sẽ link file style.css vào mục header. Trong nội dung thẻ body mình có 1 thẻ div.container (thẻ div với class container) và nội dung của thẻ div.container sẽ gồm có 5 khối block.

Khi bạn chưa định nghĩa nội dung cho file style.css thì nội dung hiện tại sẽ trông giống thế này

Nội dung hiển thị khi không có css

Trước tiên mình sẽ trình bày kiểu thiết kế Mobile First.

Ở Mobile mình ví dụ kích thước màn hình thiết bị sẽ từ 300px đến 640px. Tất nhiên là kích thước như thế nào là tùy các bạn 🙂
Mình sẽ thêm một chút CSS như sau:

/* các bạn không cần quan tâm đến body đâu, tại mình thích như vậy thôi */
body {
    margin: 0;
    padding: 0;
}

.block {
    float: left;
    border: 1px solid;
    box-sizing: border-box;
    margin: 5px;
    padding: 5px;
    text-align: justify;
}

Và kết quả sau khi mình thêm đoạn CSS:

Nội dung hiển thị sau khi thêm css

Nhưng bây giờ mình muốn từ kích thước màn hình 640px trở lên các khối block sẽ hiển thị thành 2 cột và block thứ 5 có chiều rộng vẫn là 100%.
Mình sẽ thêm đoạn CSS này vào bên dưới file style.css:

@media screen and (min-width: 640px) {
    .block {
        width: calc(50% - 10px);
    }
    .block-5 {
        width: calc(100% - 10px);
    }
}

Trong đoạn mã CSS trên mình sử dụng @media với min-with: 640px. Cái này là một break-point mình quy định khi kích thước thiết bị có chiều rộng nhỏ nhất là 640px thì đoạn mã CSS bên trong sẽ được thực thi.
Bạn sẽ có kết quả như sau

nội dung mobile-first 640px

Tương tự muốn từ kích thước 920px trở lên, nội dung sẽ hiển thị thành 3 cột với chiều rộng bằng nhau. Mình sẽ tiếp tục thêm đoạn CSS vào file style.css

@media screen and (min-width: 920px) {
    .block {
        width: calc(33.33% - 10px);
    }
}

Sau khi thêm đoạn mã CSS trên bạn sẽ được kết quả như sau

nội dung mobile-first 920px

Bên trên là cách thiết kế theo kiểu Mobile First.

Tiếp theo mình sẽ trình bày kiểu thiết kế theo Desktop First.

Mình vẫn sẽ xem kích thước 920px trở lên là dành cho Desktop, lúc này nội dung của file style.css của mình sẽ như sau:

/* các bạn không cần quan tâm đến body đâu, tại mình thích như vậy thôi */
body {
    margin: 0;
    padding: 0;
}

.block {
    float: left;
    border: 1px solid;
    box-sizing: border-box;
    margin: 5px;
    padding: 5px;
    text-align: justify;
    width: calc(33.33% - 10px);
}

Và kiết quả bạn nhận được sẽ là

nội dung desktop-first 920px

Tiếp theo mình đối với thiết bị có kích thước nhỏ hơn 920px sẽ hiển thị thành 2 cột và block thứ 5 sẽ có chiều rộng là 100%.
Mình sẽ thêm đoạn CSS sau vào file style.css

@media screen and (max-width: 919px) {
    .block {
        width: calc(50% - 10px);
    }
    .block-5 {
        width: calc(100% - 10px);
    }
}

Các bạn chú ý ở đây mình sử dụng @media với max-width nhé.
Kết quả sẽ trông giống thế này

Và tiếp theo mình lại muốn những thiết bị có kích thước nhỏ hơn 640px tất cả các block sẽ hiển thị thành một cột duy nhất.
Mình sẽ thêm đoạn mã CSS sau vào file style.css

@media screen and (max-width: 639px) {
    .block {
        width: calc(100% - 10px);
    }
}

Và tất nhiên kết quả sẽ là

Thêm một chút kịch tính khi sử dụng Responsive nhé. Giờ mình muốn kích thước thiết bị từ 640px đến nhỏ hơn 700px thì block thứ 4 sẽ bị mất đi. Mình sẽ thêm đoạn CSS như sau vào file style.css

@media screen and (min-width: 640px) and (max-width: 699px) {
    .block-4 {
        display: none;
    }
}

Kết quả bạn nhận được là

Trên đây là cách responsive hoạt động. Tất nhiên là còn nhiều thuộc tính khác nhau nhưng ở đây mình chỉ hướng dẫn ở mức cơ bản.

Nếu bạn thấy hay hoặc có ích vui lòng để lại một like hoặc một comment.
Nếu mình có gì sai sót vui lòng để lại góp ý của bạn để mình có thể hoàn thiện hơn.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây