Copyright © 1998-2023 maxiaoke.com All rights reserved.

当前位置:　 首页>> 技术小册>> Web响应式布局入门到实战

小册名称：Web响应式布局入门到实战

布局特点：
为了保证在各种屏幕上的不失真，就要根据实际屏幕宽度做等比例换算。

一句话描述：
一套方案，使用不同尺寸、分辨率的视口，都能呈现出较好的效果。

设计思路：
使用%或rem作为单位实现，本节将使用rem来实现。

代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>rem布局</title>
  8.     <link rel="stylesheet" href="main.css">
  9. </head>
  10. <body>
  11.     <div id="div0">
  12.         <div id="top">
  13.             <img id="logo" src="images/logo.png" alt="">
  14.         </div>
  16.         <div id="main">
  17.             <ul>
  18.                 <li>
  19.                     <div><img src="images/ke.png" class="ke" alt=""></div>
  20.                     <div>码小课，在线技术知识分享平台:www.maxiaoke.com</div>
  21.                     <div><img src="images/cart.png" class="cart" alt=""></div>
  22.                 </li>
  23.                 <li>
  24.                     <div><img src="images/ke.png" class="ke" alt=""></div>
  25.                     <div>码小课，在线技术知识分享平台:www.maxiaoke.com</div>
  26.                     <div><img src="images/cart.png" class="cart" alt=""></div>
  27.                 </li>
  28.                 <li>
  29.                     <div><img src="images/ke.png" class="ke" alt=""></div>
  30.                     <div>码小课，在线技术知识分享平台:www.maxiaoke.com</div>
  31.                     <div><img src="images/cart.png" class="cart" alt=""></div>
  32.                 </li>
  33.                 <li>
  34.                     <div><img src="images/ke.png" class="ke" alt=""></div>
  35.                     <div>码小课，在线技术知识分享平台:www.maxiaoke.com</div>
  36.                     <div><img src="images/cart.png" class="cart" alt=""></div>
  37.                 </li>
  38.                 <li>
  39.                     <div><img src="images/ke.png" class="ke" alt=""></div>
  40.                     <div>码小课，在线技术知识分享平台:www.maxiaoke.com</div>
  41.                     <div><img src="images/cart.png" class="cart" alt=""></div>
  42.                 </li>
  43.                 <li>
  44.                     <div><img src="images/ke.png" class="ke" alt=""></div>
  45.                     <div>码小课，在线技术知识分享平台:www.maxiaoke.com</div>
  46.                     <div><img src="images/cart.png" class="cart" alt=""></div>
  47.                 </li>
  48.                 <li>
  49.                     <div><img src="images/ke.png" class="ke" alt=""></div>
  50.                     <div>码小课，在线技术知识分享平台:www.maxiaoke.com</div>
  51.                     <div><img src="images/cart.png" class="cart" alt=""></div>
  52.                 </li>
  53.                 <li>
  54.                     <div><img src="images/ke.png" class="ke" alt=""></div>
  55.                     <div>码小课，在线技术知识分享平台:www.maxiaoke.com</div>
  56.                     <div><img src="images/cart.png" class="cart" alt=""></div>
  57.                 </li>
  58.             </ul>
  59.         </div>
  60.         <div id="bottom">
  61.             <div>
  62.                 <img src="images/homepage.png" alt="">
  63.             </div>
  64.             <div>
  65.                 <img src="images/cart.png" alt="">
  66.             </div>
  67.         </div>
  68.     </div>
  70. </body>
  71. <script>
  73.     /**
  74.      * 动态设置根字体大小
  75.     */
  76.     var c=()=>{
  77.         let w=document.documentElement.clientWidth; /* 获取设备的宽度 */
  78.         //设置一个默认值，以320的宽度(iphone)来计算20号字体
  79.         let defaultWidth = 20*(w/320)
  80.         //设置字号
  81.         let n= defaultWidth > 40 ? 40 + 'px' : defaultWidth + 'px';
  82.         //设置根字体大小
  83.         document.documentElement.style.fontSize = n;
  84.     }
  86.     window.addEventListener("load",c);
  87.     window.addEventListener("resize",c);
  89. </script>
  90. </html>

main.css:

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. /* 设置基准字体大小 */
  7. html{
  8.     font-size:10px;
  9. }
  11. #top,#main,#bottom{
  12.     width: 100%;
  13. }
  15. #top{
  16.     position: fixed; /* 固定位置 */
  17.     top:0;
  18.     left:0;
  19.     right:0;
  20.     height:2rem;
  21.     z-index: 9999;
  22.     background-color: #f5f5f5;
  23. }
  25. #logo{
  26.     width: 4rem;
  27.     height:1.5rem;
  28.     vertical-align: -webkit-baseline-middle; /* 垂直居中 */
  29. }
  31. #main{
  32.     height:auto;
  33.     position: absolute;
  34.     top:2rem; /* 根据header的高度设置 */
  35.     bottom: 2rem; /* 根据bottom的高度设置 */
  36.     background-color: #f5f5f5;
  37. }
  39. #main ul{
  40.     display: flex;
  41.     flex-direction: column;
  42.     justify-content: space-between;
  43.     font-size:0.5rem;
  44. }
  46. #main ul li{
  47.     display: flex;
  48.     flex:1 1 3rem;
  49.     border-bottom: 1px solid #dcdcdc;
  50.     align-items: center;
  51. }
  53. #main ul li div{
  54.     margin-left: 0.2rem;
  55.     margin-right: 0.5rem;
  56. }
  58. .ke{
  59.     width: 3.6rem;
  60.     height:2rem;
  61.     vertical-align: -webkit-baseline-middle;
  62. }
  64. .cart{
  65.     width: 1rem;
  66.     height: 1rem;
  67.     vertical-align: -webkit-baseline-middle;
  68. }
  70. #bottom{
  71.     position: fixed; /* 固定位置 */
  72.     bottom:0;
  73.     left:0;
  74.     right:0;
  75.     height:2rem;
  76.     z-index: 9999;
  77.     background-color: #f5f5f5;
  78.     display: flex;
  79. }
  81. #bottom div{
  82.     flex: 1 1 auto;
  83.     text-align: center;
  84. }
  86. /*设置bottom里的图片*/
  87. #bottom div img{
  88.     width:1.5rem;
  89.     height:1.5rem;
  90.     vertical-align: -webkit-baseline-middle;
  91. }

实现的效果：

该分类下的相关小册推荐：

vue高级应用开发与构建
vue高级应用开发与构建
uniapp快速入门与实战
uniapp快速入门与实战
WebGL开发指南
WebGL开发指南
web前端面试完全指南
web前端面试完全指南