Responsive css cho người mới bắt đầu học lập trình web

Tri thức / Lập trình / Lập trình web / Html & Css      140 - 0      1 tháng trước
Responsive css cho người mới bắt đầu học lập trình web
0 0

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: Tất cả thiết bị
  • screen: Màn hình hiển thị
  • projection: Màn hình máy chiếu
  • print: 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ị (landscape, portrait)

 

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 tháng trước
TuTriThuc.com TuTriThuc.com Theo dõi 1
Chia sẻ Responsive css cho người mới bắt đầu học lập trình web tới bạn bè để mọi người cùng đọc nhé !
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 Responsive css cho người mới bắt đầu học lập trình web
Gửi đi
Bạn đang đọc bài viết Responsive css cho người mới bắt đầu học lập trình web , hãy để nguồn tutrithuc.com khi phát hành lại nội dung này !
36355
0.055592060089111