响应式网页设计框架


目录

    显示目录


有许多免费的 CSS 框架提供响应式设计。


使用W3.CSS

创建响应式设计的一个好方法是使用响应式样式表,例如 W3.CSS:https://www.w3schools.com/w3css/default.asp

W3.CSS 可以轻松开发任何尺寸的美观网站!

W3.CSS Demo

Resize the page to see the responsiveness!

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

例子

<!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-container w3-blue">
  <h1>W3Schools 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>

自己尝试一下 →

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<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-container w3-blue">
  <h1>W3Schools 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>


要了解有关 W3.CSS 的更多信息,请阅读我们的 W3.CSS 教程。



引导程序

另一个流行的框架是 Bootstrap。它使用 HTML 和 CSS 来制作 响应式网页:

例子

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta 
  name="viewport" content="width=device-width, initial-scale=1">
<link 
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
  rel="stylesheet">
<script 
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  </head>
<body>
<div class="container-fluid p-5 bg-primary text-white 
  text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize 
  this responsive page to see the effect!</p> 
</div>
<div class="container mt-5">
  <div class="row">
    
  <div class="col-sm-4">
      <h3>Column 1</h3>
      
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    
  </div>
    <div class="col-sm-4">
      
  <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit 
  amet, consectetur adipisicing elit...</p>
      
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    
  </div>
    <div class="col-sm-4">
      
  <h3>Column 3</h3> 
      <p>Lorem ipsum dolor sit 
  amet, consectetur adipisicing elit...</p>
      
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    
  </div>
  </div>
</div>
</body>
</html>

自己尝试一下 →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>


要了解有关 Bootstrap 的更多信息,请访问我们的 Bootstrap 教程。