注：参考网站 https://www.w3schools.com
HTML Responsive Web Page
index.html
<!DOCTYPE html>
<html><head><link rel="stylesheet" href="style.css"><title>Responsive web page</title><meta lang="en" charset="utf-8"></head><body><h1>Responsive Web Design</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> style.css
h1 {text-align:center;background-color:black;padding:5px;color:white;
}
.city {height:200px;max-width:410px;border:1px solid grey;margin:10px;padding:5px;overflow:hidden;float:left; /*关键是这一行代码，使得该代码能够在不同的设备上自适应的显示*/
}显示结果为：
