移动端布局案例

 
          <!DOCTYPE html> 
         
          <html> 
         
          <head> 
         
          <meta charset="UTF-8"> 
         
          <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 
         
          <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> 
         
          <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script> 
         
          <script type="text/javascript" src="js/rem.js" ></script> 
         
          <title></title> 
         
          <style> 
         
           html{ 
         
           font-size:20px; 
         
           } 
         
           *{ 
         
           border: 0; 
         
           padding: 0; 
         
           margin: 0; 
         
           } 
         
           #box1{ 
         
           width: 100%; 
         
           height: 7.5rem; 
         
           float: left; 
         
           background-color: red; 
         
           } 
         
           #box2{ 
         
           width: 100%; 
         
           height: 7.5rem; 
         
           float: left; 
         
           background-color: #00FFFF; 
         
           font-size: 0.6rem; 
         
           } 
         
           #box3{ 
         
           width: 100%; 
         
           height: 17rem; 
         
           float: left; 
         
           background-color: #B22222; 
         
           } 
         
           #box4{ 
         
           width: 100%; 
         
           height: 20rem; 
         
           float: left; 
         
           background-color: #BFBFBF; 
         
           } 
         
           #box5{ 
         
           width: 100%; 
         
           height: 22rem; 
         
           float: left; 
         
           background-color: cadetblue; 
         
           } 
         
           #input1{ 
         
           width: 80%; 
         
           height: 2rem; 
         
           float: left; 
         
           border-radius: 2rem; 
         
           margin-left: 1.5rem; 
         
           margin-top: 0.6rem; 
         
           } 
         
           </style> 
         
          <script> 
         
           window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() {//判断是屏幕旋转还是resize 
         
           function c() { 
         
           var d = document.documentElement;//获取html元素 
         
           var cw = d.clientWidth || 750; 
         
           d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px'; 
         
           } 
         
           c(); 
         
           return c; 
         
           })(), false); 
         
           </script> 
         
          </head> 
         
          <body> 
         
          <div id="box1"> 
         
          <input type="text" id="input1" /> 
         
          </div> 
         
          <div id="box2">手手手手手手手手手手手手手手手手手手手手手手手</div> 
         
          <div id="box3">段段段段段段段段段段段段段段段段段段段段段段段</div> 
         
          <div id="box4">方方方方方方方方方方方方方方方方方方方方方方方方</div> 
         
          <div id="box5">哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</div> 
         
          </body> 
         
          </html>
猜你喜欢
