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

Lập trình web / Html & Css      805 - 0      1 năm trước
Hướng dẫn làm responsive cho website bằng css cho người mới
1 0

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 2019-08-31 09:43:38, Cập nhật 1 năm trước
Bình luận
Top phản hồi
Đang tải bình luận bài viết Phản hồi bài viết Hướng dẫn làm responsive cho website bằng css cho người mới
Gửi đi

Chia sẻ Hướng dẫn làm responsive cho website bằng css cho người mới tới bạn bè để mọi người cùng đọc nhé !

Bài viết có vấn đề ? Hãy cho chúng tôi biết.

Gửi báo cáo sai phạm
Bạn đang đọc bài viết Hướng dẫn làm responsive cho website bằng css cho người mới.

Hãy để nguồn tutrithuc.com khi phát hành lại nội dung này !

36355