Responsive là gì? Các truy vấn trên Responsive Web Design

Responsive là gì? Các truy vấn trên Responsive Web Design

19/02/2021

Responsive là gì?  Thiết kế web đáp ứng là về việc sử dụng HTML và CSS để tự động thay đổi trang web kích thước.

Nó làm cho một trang web trông đẹp trên tất cả các thiết bị (máy tính để bàn, máy tính bảng và điện thoại):

Thiết kế web đáp ứng

Responsive là gì?

Khi tạo các trang web responsive, hãy thêm <meta> vào sau tất cả các trang web của bạn:

Example

<meta name = “viewport” content = “width = device-width, initial-scale = 1.0”>

Truy vấn phương tiện truyền thông

Media queries đóng một vai trò quan trọng trong các trang web responsive.

Với các truy vấn phương tiện, bạn có thể xác định các loại khác nhau cho các trình duyệt kích thước khác nhau.

Ví dụ:

Thay đổi trình duyệt cửa sổ kích thước để thấy rằng ba phần tử bên dưới sẽ hiển thị theo chiều ngang trên màn hình lớn và theo chiều dọc trên màn hình nhỏ:

Left

Main content

Right

Example

<kiểu>

.trái phải {

float: trái;

chiều rộng: 20%; / * Theo mặc định, chiều rộng là 20% * /

}

.chủ yếu {

float: trái;

chiều rộng: 60%; / * Theo mặc định, chiều rộng là 60% * /

}

/ * Sử dụng Media Query để thêm một điểm ngắt ở 800px: * /

@media screen and (max-width: 800px) {

.left, .main, .right {width: 100%;}

}

</style>

Hình ảnh đáp ứng

Hình ảnh đáp ứng là hình ảnh có tỷ lệ độc đáo để phù hợp với mọi trình duyệt kích thước.

Khi CSS chiều rộng thuộc tính được đặt thành phần trăm giá trị, hình ảnh sẽ tăng tỷ lệ lên và xuống khi thay đổi trình duyệt cửa sổ kích thước.

This image is responsive:

Ví dụ phản hồi hình ảnh giúp bạn hiểu rõ hơn Responsive là gì?

Ví dụ phản hồi hình ảnh giúp bạn hiểu rõ hơn Responsive là gì?

Example

<img src = “img_girl.jpg” style = “width: 80%; height: auto;”>

If max-width thuộc tính được đặt thành 100%, hình ảnh sẽ giảm tỷ lệ, nhưng không bao giờ tăng tỷ lệ lớn hơn ban đầu kích thước của nó:

Example

<img src = “img_girl.jpg” style = “max-width: 100%; height: auto;”>

Tùy chọn hình ảnh vào trình duyệt kích thước

<picture> HTML cho phép bạn xác định các hình ảnh khác nhau cho trình duyệt cửa sổ kích thước khác nhau.

Example

<hình ảnh>

<source srcset = “img_smallflower.jpg” media = “(max-width: 600px)”>

<source srcset = “img_flowers.jpg” media = “(max-width: 1500px)”>

<source srcset = “flowers.jpg”>

<img src = “img_smallflower.jpg” alt = “Hoa”>

</picture>

W3.CSS đáp ứng

W3.CSS là một CSS Framework miễn phí cung cấp Thiết kế trả lời ứng dụng theo mặc định.

W3.CSS giúp dễ dàng phát triển các trang web trông đẹp mắt trên mọi thiết bị; máy tính để bàn, máy tính xách tay, máy tính bảng hoặc điện thoại:

Example

<! DOCTYPE html>

<html>

<meta name = “viewport” content = “width = device-width, initial-scale = 1”>

<link rel = “stylesheet” href = “https://www.w3schools.com/w3css/4/w3.css”>

<body>

<div class = “w3-center w3-padding-64 w3-light-gray”>

<h1> Trang W3.CSS của tôi </h1>

<p> Thay đổi kích thước trang này để xem hiệu ứng đáp ứng! </p>

</div>

<div class = “w3-row-padding”>

<div class = “w3-third”>

<h2> Luân Đôn </h2>

<p> Luân Đôn là thủ đô của nước Anh. </p>

<p> Đây là thành phố đông dân nhất ở Vương quốc Anh,

với một khu vực đô thị hơn 13 triệu dân. </p>

</div>

<div class = “w3-third”>

<h2> Paris </h2>

<p> Paris là thủ đô của Pháp. </p>

<p> Khu vực Paris là một trong những trung tâm dân số lớn nhất ở Châu Âu,

với hơn 12 triệu dân. </p>

</div>

<div class = “w3-third”>

<h2> Tokyo </h2>

<p> Tokyo là thủ đô của Nhật Bản. </p>

<p> Đây là trung tâm của Khu vực Đại Tokyo,

và khu vực đô thị đông dân nhất trên thế giới. </p>

</div>

</div>

</body>

</html>

Bootstrap

Bootstrap là một framework rất phổ biến, sử dụng HTML, CSS và jQuery để tạo các trang web responsive.

Example

<! DOCTYPE html>

<html lang = “en”>

<head>

<title> Ví dụ về Bootstrap </title>

<meta charset = “utf-8”>

<meta name = “viewport” content = “width = device-width, initial-scale = 1”>

<link rel = “stylesheet” href = “https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”>

<script src = “https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”> </script>

<script src = “https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”> </script>

<script src = “https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”> </script>

</head>

<body>

<div class = “jumbotron text-center”>

<h1> Trang Bootstrap đầu tiên của tôi </h1>

<p> Thay đổi kích thước trang đáp ứng này để xem hiệu ứng! </p>

</div>

<div class = “container-liquid”>

<div class = “row”>

<div class = “col-sm-4”>

<h2> Luân Đôn </h2>

<p> Luân Đôn là thủ đô của nước Anh. </p>

<p> Đây là thành phố đông dân nhất ở Vương quốc Anh,

với một khu vực đô thị hơn 13 triệu dân. </p>

</div>

<div class = “col-sm-4”>

<h2> Paris </h2>

<p> Paris là thủ đô của Pháp. </p>

<p> Khu vực Paris là một trong những trung tâm dân số lớn nhất ở Châu Âu,

với hơn 12 triệu dân. </p>

</div>

<div class = “col-sm-4”>

<h2> Tokyo </h2>

<p> Tokyo là thủ đô của Nhật Bản. </p>

<p> Đây là trung tâm của Khu vực Đại Tokyo,

và khu vực đô thị đông dân nhất trên thế giới. </p>

</div>

</div>

</div>

</body>

</html>

Hy vọng những cơ bản hướng dẫn trên đây sẽ giúp các bạn hiểu rõ có thể đáp ứng được là gì. Từ đó, dễ dàng thực hiện thay đổi kích thước trang web chuẩn đẹp trên tất cả các thiết bị.

Theo W3schools

Bài viết liên quan
Không có bài viết liên quan
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments