参考手册
RWD 视口

响应式网页设计 - 教程

什么是响应式网页设计？

  • 响应式 web 设计会让您的网页在所有设备上看起来都不错。
  • 响应式 web 设计仅使用 HTML 和 CSS。
  • 响应式 web 设计并不是程序或 JavaScript。

为所有用户获得最佳体验的设计

可以使用许多不同的设备来查看网页：台式机、平板电脑和手机。无论使用哪种设备，您的网页都应该看起来美观且易用。

网页不应舍弃信息来适合较小的设备，而应使其内容适合任何设备：

电脑桌面
平板
手机

如果您使用 CSS 和 HTML 调整大小、隐藏、缩小、放大或移动内容，以使其在任何屏幕上看起来都很好，则称为响应式 Web 设计。

如果您不理解下面的例子，请不要担心，我们将在下一章中一步一步地分解代码：

完整代码如下：

  1. <html>
  2. <head>
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <style>
  5.         * {
  6.             box-sizing: border-box;
  7.         }
  9.         p {
  10.             font-size: 14px;
  11.         }
  13.         .row::after {
  14.             content: "";
  15.             clear: both;
  16.             display: table;
  17.         }
  19.         [class*="col-"] {
  20.             float: left;
  21.             padding: 15px;
  22.         }
  24.         html {
  25.             font-family: "Lucida Sans", sans-serif;
  26.         }
  28.         .header {
  29.             background-color: #9933cc;
  30.             color: #ffffff;
  31.             padding: 15px;
  32.         }
  34.         .menu ul {
  35.             list-style-type: none;
  36.             margin: 0;
  37.             padding: 0;
  38.         }
  40.         .menu li {
  41.             padding: 8px;
  42.             margin-bottom: 7px;
  43.             background-color: #33b5e5;
  44.             color: #ffffff;
  45.             box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  46.         }
  48.             .menu li:hover {
  49.                 background-color: #0099cc;
  50.             }
  52.         .aside {
  53.             background-color: #33b5e5;
  54.             padding: 15px;
  55.             color: #ffffff;
  56.             text-align: center;
  57.             font-size: 14px;
  58.             box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  59.         }
  61.         .footer {
  62.             background-color: #0099cc;
  63.             color: #ffffff;
  64.             text-align: center;
  65.             font-size: 12px;
  66.             padding: 15px;
  67.         }
  69.         /* For mobile phones: */
  70.         [class*="col-"] {
  71.             width: 100%;
  72.         }
  74.         @media only screen and (min-width: 600px) {
  75.             /* For tablets: */
  76.             .col-s-1 {
  77.                 width: 8.33%;
  78.             }
  80.             .col-s-2 {
  81.                 width: 16.66%;
  82.             }
  84.             .col-s-3 {
  85.                 width: 25%;
  86.             }
  88.             .col-s-4 {
  89.                 width: 33.33%;
  90.             }
  92.             .col-s-5 {
  93.                 width: 41.66%;
  94.             }
  96.             .col-s-6 {
  97.                 width: 50%;
  98.             }
  100.             .col-s-7 {
  101.                 width: 58.33%;
  102.             }
  104.             .col-s-8 {
  105.                 width: 66.66%;
  106.             }
  108.             .col-s-9 {
  109.                 width: 75%;
  110.             }
  112.             .col-s-10 {
  113.                 width: 83.33%;
  114.             }
  116.             .col-s-11 {
  117.                 width: 91.66%;
  118.             }
  120.             .col-s-12 {
  121.                 width: 100%;
  122.             }
  123.         }
  125.         @media only screen and (min-width: 768px) {
  126.             /* For desktop: */
  127.             .col-1 {
  128.                 width: 8.33%;
  129.             }
  131.             .col-2 {
  132.                 width: 16.66%;
  133.             }
  135.             .col-3 {
  136.                 width: 25%;
  137.             }
  139.             .col-4 {
  140.                 width: 33.33%;
  141.             }
  143.             .col-5 {
  144.                 width: 41.66%;
  145.             }
  147.             .col-6 {
  148.                 width: 50%;
  149.             }
  151.             .col-7 {
  152.                 width: 58.33%;
  153.             }
  155.             .col-8 {
  156.                 width: 66.66%;
  157.             }
  159.             .col-9 {
  160.                 width: 75%;
  161.             }
  163.             .col-10 {
  164.                 width: 83.33%;
  165.             }
  167.             .col-11 {
  168.                 width: 91.66%;
  169.             }
  171.             .col-12 {
  172.                 width: 100%;
  173.             }
  174.         }
  175.     </style>
  176. </head>
  177. <body>
  179.     <div class="header">
  180.         <h1>上海</h1>
  181.     </div>
  183.     <div class="row">
  184.         <div class="col-3 col-s-3 menu">
  185.             <ul>
  186.                 <li>航班</li>
  187.                 <li>景点</li>
  188.                 <li>美食</li>
  189.                 <li>购物</li>
  190.             </ul>
  191.         </div>
  193.         <div class="col-6 col-s-9">
  194.             <h1>城市</h1>
  195.             <p>上海市，简称沪，别称申，是中华人民共和国直辖市，中国的经济、金融、贸易和航运中心，世界著名的港口城市，是中国人口第二多的城市。</p>
  196.             <p>上海位于中国东部弧形海岸线的正中间，长江三角洲最东部，东临东海，南濒杭州湾，西与江苏、浙江两省相接，北端的崇明岛处于长江入海口中，与周围的江苏、浙江、安徽三省多个城市共同构成世界级城市群长江三角洲城市群，是其重要的组成部分。</p>
  197.         </div>
  199.         <div class="col-3 col-s-12">
  200.             <div class="aside">
  201.                 <h2>简介</h2>
  202.                 <p>中国经济规模最大的城市。</p>
  203.                 <h2>位置</h2>
  204.                 <p>长三角区域，东海之滨。</p>
  205.                 <h2>交通</h2>
  206.                 <p>上海的交通四通八达，拥有空铁海河各种交通通道。</p>
  207.             </div>
  208.         </div>
  209.     </div>
  211.     <div class="footer">
  212.         <p>调整浏览器窗口的大小以查看内容对调整大小的响应。</p>
  213.     </div>
  215. </body>
  216. </html>
运行一下
RWD 视口

分类导航