CSS - Đáp ứng

Thiết kế web đáp ứng CSS3

Thiết kế web đáp ứng mang lại trải nghiệm tối ưu, dễ đọc và điều hướng dễ dàng với việc thay đổi kích thước tối thiểu trên các thiết bị khác nhau như máy tính để bàn, điện thoại di động và tab).

Cấu trúc đáp ứng

Hình ảnh dưới đây cho thấy cấu trúc đáp ứng của các trang web.

Demo lưới linh hoạt

<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>

Nó sẽ tạo ra kết quả sau:

Truy vấn phương tiện truyền thông

Truy vấn phương tiện dành cho các quy tắc kiểu khác nhau cho các thiết bị có kích thước khác nhau như điện thoại di động, máy tính để bàn, v.v.,

<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>

Nó sẽ tạo ra kết quả sau:

Thiết kế web đáp ứng Bootstrap

Bootstrap là khung thiết kế web phổ biến nhất dựa trên tập lệnh HTML, CSS và Java và nó giúp bạn thiết kế các trang web theo cách đáp ứng cho mọi thiết bị.

<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>Tutorials point</h1> 
            <p>
               Tutorials Point 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>

Nó sẽ tạo ra kết quả sau: