Hướng dẫn làm responsive cho website bằng css cho người mới

/ Lập trình web / Html & Css 363 0 1 năm trước

Responsive trong website là khái niệm mà trong đó giao diện của website có khả năng biến đổi linh hoạt, hiển thị đẹp trên hầu hết các thiết bị như máy tính, tablet, hay điện thoại di động.

Có rất nhiều cách để làm responsive cho website, mà trong đó cách sử dụng css được cho là nhanh chóng và khá hiệu quả, bản thân mình cũng rất thích cách này.

Responsive trong css thực chất là các đoạn code css sẽ được thực thi một cách có điều kiện, phụ thuộc vào các thông số của thiết bị thực thi trang html hiện tại.

Cú pháp responsive trong css

@media query{
    /*code css thực thi khi thiết bị đáp ứng được điều kiện đưa ra trong query*/
}

Trong đó:

query: Là điều kiện truy vấn thiết bị. Chúng ta có thể truy vấn theo kích thước, loại thiết bị, hướng hiển thị, hoặc kết hợp nhiều tiêu chí với nhau.

Ví dụ: query theo kích thước thiết bị

@media (min-width : 600px){
    .product{
        width: 50%;
        float: left;
    }
}

Ví dụ: query theo loại thiết bị và kích thước

@media only screen and (min-width : 600px){
    .product{
        width: 50%;
        float: left;
    }
}

Danh sách các loại thiết bị trong responsive css

all: Áp dụng cho tất cả thiết bị
screen: Áp dụng cho các loại thiết bị hiển thị nội dung website trực tiếp trên màn hình, ví dụ là màn hình máy tính, màn hình điện thoại...
projection: Áp dụng cho máy chiếu
print: Áp dụng cho máy in

Danh sách các query theo kích thước

max-width: Giới hạn kích thước lớn nhất được phép theo chiều ngang (px, pt)
max-height: Giới hạn kích thước lớn nhất được phép theo chiều dọc
min-width: Giới hạn kích thước nhỏ nhất được phép theo chiều ngang
min-height: Giới hạn kích thước nhỏ nhất được phép theo chiều dọc

Danh sách query theo hướng hiển thị

orientation: Hướng đặt thiết bị. Có 2 hướng gồm: landscape, portrait. Khi bạn đặt điện thoại theo hướng như bình thường thì đó là một trường hợp của portrait. Khi bạn quay ngang điện thoại lại, thì đó là một ví dụ của landscape.

Ví dụ về responsive trong css

Yêu cầu đưa ra như sau: Chúng ta có 4 sản phẩm. Ở màn hình nhỏ hơn 600px theo chiều ngang thì mỗi sản phẩm hiển thị trên 1 hàng riêng biệt. Ở màn hình từ 600px đến 768px theo chiều ngang thì 2 sản phẩm hiển thị trên 1 hàng riêng biệt. Ở màn hình lớn hơn 768px theo chiều ngang thì 4 sản phẩm hiển thị trên 1 hàng riêng biệt.

Kết quả sau khi thực hiện sẽ giống như hình sau:

Code html như sau:

<body>
    <div class="product">Sản phẩm 1</div>
    <div class="product">Sản phẩm 2</div>
    <div class="product">Sản phẩm 3</div>
    <div class="product">Sản phẩm 4</div>
    <div class="clear_both"></div>
</body>

Để giải quyết yêu cầu trên, ta có thể sử dụng code css như sau:

/*Mọi loại màn hình*/
*{
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    font-family: sans-serif;
}
body{
    background-color: #cccccc;
    padding: 15px;
}
.clear_both{
    clear: both;
}
.product{
    padding: 15px;
    margin: 15px 0px;
    background-color: #ffffff;
}

@media (min-width : 600px){
    /* nhỏ nhất 600px */
    .product{
        width: 50%;
        float: left;
    }
}
@media (min-width : 768px){
    /* nhỏ nhất 768px */
    .product{
        width: 25%;
    }
}

Hy vọng với những kiến thức và thực hành phía trên, sẽ giúp ích được phần nào cho các bạn mới học lập trình web hiểu về responsive.

Tạo vào 04/03/2023, Cập nhật 1 năm trước