响应式 Web 设计（Responsive Web Design）

优质

小牛编辑

134浏览

2023-12-01

CSS3响应式网页设计

响应式网页设计提供最佳体验，易于阅读和轻松导航，只需在桌面，手机和标签等不同设备上进行最小尺寸调整。

反应灵敏的结构

下图显示了网页的响应结构。

灵活的网格演示

<html>
   <head>
      <style>
         body {
            font: 600 14px/24px "Open Sans", 
               "HelveticaNeue-Light", 
               "Helvetica Neue Light", 
               "Helvetica Neue", 
               Helvetica, Arial, 
               "Lucida Grande", 
               Sans-Serif;
         }
         h1 {
            color: #9799a7;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 6px;
         }
         .container:before, .container:after {
            content: "";
            display: table;
         }
         .container:after {
            clear: both;
         }
         .container {
            background: #eaeaed;
            margin-bottom: 24px;
            *zoom: 1;
         }
         .container-75 {
            width: 75%;
         }
         .container-50 {
            margin-bottom: 0;
            width: 50%;
         }
         .container, section, aside {
            border-radius: 6px;
         }
         section, aside {
            background: #2db34a;
            color: #fff;
            margin: 1.858736059%;
            padding: 20px 0;
            text-align: center;
         }
         section {
            float: left;
            width: 63.197026%;
         }
         aside {
            float: right;
            width: 29.3680297%;
         }
      </style>
   </head>
   <body>
      <h1>100% Wide Container</h1>
      <div class = "container">
         <section>Section</section>
         <aside>Aside</aside>
      </div>
      <h1>75% Wide Container</h1>
      <div class = "container container-75">
         <section>Section</section>
         <aside>Aside</aside>
      </div>
      <h1>50% Wide Container</h1>
      <div class = "container container-50">
         <section>Section</section>
         <aside>Aside</aside>
      </div>
   </body>
</html>

媒体查询

媒体查询适用于不同大小的设备（如手机，台式机等）的不同风格规则，

<html>
   <head>
      <style>
         body {
            background-color: lightpink;
         }
         @media screen and (max-width: 420px) {
            body {
               background-color: lightblue;
            }
         }
      </style>
   </head>
   <body>
      <p>
         If screen size is less than 420px, then it will show lightblue 
         color, or else it will show light pink color
      </p>
   </body>
</html>

Bootstrap响应式网页设计

Bootstrap是最流行的基于HTML，CSS和Java脚本的Web设计框架，它可以帮助您以响应的方式为所有设备设计网页。

<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <style>
         body {
            color:green;
         }
      </style>
   </head>
   <body>
      <div class = "container">
         <div class = "jumbotron">
            <h1>xnip</h1> 
            <p>
               xnip originated from the idea that there exists a class 
               of readers who respond better to online content and prefer to learn 
               new skills at their own pace from the comforts of their drawing rooms.
            </p> 
         </div>
         <div class = "row">
            <div class = "col-md-4">
               <h2>Android</h2>
               <p>
                  Android is an open source and Linux-based operating system for mobile 
                  devices such as smartphones and tablet computers. Android was developed 
                  by the Open Handset Alliance, led by Google, and other companies.
               </p>
         </div>
         <div class = "col-md-4">
            <h2>CSS</h2>
            <p>
               Cascading Style Sheets, fondly referred to as CSS, is a simple design 
               language intended to simplify the process of making web pages presentable.
            </p>
         </div>
         <div class = "col-md-4">
            <h2>Java</h2>
            <p>
               Java is a high-level programming language originally developed by Sun 
               Microsystems and released in 1995. Java runs on a variety of platforms,
               such as Windows, Mac OS, and the various versions of UNIX. This tutorial
               gives a complete understanding of Java.
            </p>
         </div>
      </div>
   </body>
</html>