h5移动端百分比

 <!DOCTYPE html>
 <html lang="en">

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
     <title>Document</title>
     <style>
         /*

         要想设置当前容器的高度或宽度百分比，必须“明确”知道父容器的高度或宽度
   */

         * {
             padding: 0;
             margin: 0;
         }

         .one {
             width: 20%;
             height: 100px;
             float: left;
             background: red;
         }

         .two {
             width: 30%;
             float: left;
             background: blue;
         }

         .three {
             width: 50%;
             height: 100px;
             float: left;
             background: green;
         }

         .four {
             width: 50%;
             height: 50%;
             background: #fff;
         }
     </style>
 </head>

 <body>
     <div class="one"></div>
     <div class="two"></div>
     <div class="three">
         <div class="four"></div>
     </div>

 </body>

 </html>