Thiết kế web Responsive với HTML
Thiết kế web Responsive là gì? Thiết kế web Responsive giúp trang web của bạn tương thích 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). Một website Reponsive được sử dụng HTML và CSS để tự co, dãn để hiển thị tốt trên mọi thiết bị như ...
Thiết kế web Responsive là gì?
Thiết kế web Responsive giúp trang web của bạn tương thích 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).
Một website Reponsive được sử dụng HTML và CSS để tự co, dãn để hiển thị tốt trên mọi thiết bị như hình dưới đây:
Tự thiết kế Reponsive
Ví dụ dưới đây là đoạn mã HTML được thiết kế reponsive:
<!DOCTYPE html>
<html lang=”en-us”>
<head>
<meta name=”viewport” content=”awidth=device-awidth, initial-scale=1.0″>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
max-awidth: 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><div class=”city”>
<h2>New York</h2>
<p>The City of New York is the most populous city in the United States.</p>
<p>New York is an important center for international diplomacy and has been described as the cultural and financial capital of 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ế reponsive, là sử dụng reponsive style, như w3.css. W3.css giúp dễ dàng phát triển các trang web hiển thị đẹp ở mọi kích cỡ: 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:
Ví dụ:
<!DOCTYPE html>
<html>
<meta name=”viewport” content=”awidth=device-awidth, initial-scale=1″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/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 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>
- Khóa học lập trình frontend cơ bản : Bootstrap 4, Jquery, CSS3, HTML5
- Học lập trình Frontend nâng cao qua project thực tế
