Thiết kế web Responsive là gì?
Thiết kế Web Responsive làm cho trang web của bạn trông tốt 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 Responsive là về việc sử dụng CSS và HTML để thay đổi kích thước, ẩn, thu nhỏ, phóng to, hoặc di chuyển các nội dung để làm cho nó trông tốt trên bất kỳ màn hình:
Tạo Thiết Kế Responsive riêng của bạn
Một cách để tạo ra một thiết kế đáp ứng, là tạo ra nó cho mình:
Thí dụ
<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} </style>
</head>
<body>
<h1>Responsive Web Design Demo</h1>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
Sử dụng W3.CSS
Một cách khác để tạo ra một thiết kế đáp ứng, là sử dụng một phong cách đáp ứng, như W3.CSS
W3.CSS làm cho nó dễ dàng để phát triển các trang mà nhìn đẹp tại bất kỳ kích thước; máy tính để bàn, máy tính xách tay, máy tính bảng hay điện thoại:
W3.CSS Demo
Thay đổi kích thước trang đáp ứng này!London
London là thành phố thủ đô của nước Anh.Đây là thành phố đông dân nhất ở Vương quốc Anh, với một khu vực đô thị trên 13 triệu dân.
Paris
Paris là thủ đô của Pháp.Các khu vực Paris là một trong những trung tâm dân cư lớn nhất ở châu Âu, với hơn 12 triệu dân.
Tokyo
Tokyo là thủ đô của Nhật Bản.Đây là trung tâm của khu vực Greater Tokyo, và các khu vực đô thị đông dân nhất trên thế giới.
Thí dụ
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-orange">
<h1>W3.CSS Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</body>
</html>
0 Bình luận:
Đăng nhận xét
Khi các bạn đóng góp ý kiến nhớ chú ý ngôn từ cho phù hợp với thuần phong ,mỹ tục văn hóa nước ta. Cảm ơn!