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

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

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

布局特点：
确保一个页面在所有终端上，都能显示出令人满意的效果。

一句话：一套方案处处运行。

设计思路：
使用%或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,user-scalable=no">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="big.css" media="(min-device-width:1000px)">
  9.     <link rel="stylesheet" href="small.css"
  10.           media="(min-device-width:400px) and (max-device-width:600px) ">
  11. </head>
  12. <body>
  13.     <div id="layout">
  14.         <div id="top">
  16.         </div>
  17.         <div id="main">
  18.             <div>
  19.                 <li>分类1</li>
  20.                 <li>分类2</li>
  21.                 <li>分类3</li>
  22.                 <li>分类4</li>
  23.                 <li>分类5</li>
  24.                 <li>分类6</li>
  25.             </div>
  27.             <div>
  28.                 <li>图片</li>
  29.                 <li>图片</li>
  30.                 <li>图片</li>
  31.                 <li>图片</li>
  32.                 <li>图片</li>
  33.                 <li>图片</li>
  34.                 <li>图片</li>
  35.                 <li>图片</li>
  36.             </div>
  37.         </div>
  39.     </div>
  41. </body>
  42. </html>

big.css：

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     background-color: #f5f5f5;
  5. }
  7. #layout{
  8.     display:flex;
  9.     flex-direction: column;
  10.     width: 80%; /* pc端的宽度，可以设置为当前视口的百分之80或90 */
  11.     margin: 0 auto;
  12. }
  14. #top{
  15.     width:100%;
  16.     flex:0 0 50px;
  17.     margin: 0 auto;
  18.     background-color: yellow;
  19. }
  21. #main{
  22.     flex: 0 0 100%;
  23.     display: flex;
  25. }
  27. /* 分类样式 */
  28. #main div:nth-child(1){
  29.     flex: 0 0 10%;
  30.     background-color: #f5f5f5;
  31.     list-style-type: none;
  32.     display: flex;
  33.     flex-wrap:wrap;
  34.     border-left:1px solid white;
  35.     border-right:1px solid white;
  36. }
  38. #main div:nth-child(1) li{
  39.     flex: 0 0 100%;
  40.     height:40px;
  41.     line-height: 40px;
  42.     text-align: center;
  43.     border-bottom:1px solid white;
  44. }
  46. /* 右边部分 */
  47. #main div:nth-child(2){
  48.     flex: 0 0 90%;
  49.     background-color: #f5f5f5;
  50.     list-style-type: none;
  51.     display: flex;
  52.     flex-wrap:wrap;
  53.     justify-content: space-around;
  54. }
  56. #main div:nth-child(2) li{
  57.     flex: 0 0 30%;
  58.     height:120px;
  59.     text-align: center;
  60.     border-bottom:1px solid white;
  61.     background-color: yellow;
  62.     margin-top:10px;
  63. }

实现效果：

移动端：

small.css:

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     background-color: #f5f5f5;
  5. }
  7. #layout{
  8.     display:flex;
  9.     flex-direction: column;
  10.     width: 100%; /* 移动端占100%  */
  11.     margin: 0 auto;
  12. }
  14. #top{
  15.     width:100%;
  16.     flex:0 0 50px;
  17.     margin: 0 auto;
  18.     background-color: yellow;
  19. }
  21. #main{
  22.     flex: 0 0 100%;
  23.     display: flex;
  24.     flex-wrap: wrap;
  26. }
  28. /* 分类样式 */
  29. #main div:nth-child(1){
  30.     flex: 0 0 100%; /* 分类占100% */
  31.     background-color: #f5f5f5;
  32.     list-style-type: none;
  33.     display: flex;
  34.     flex-wrap:wrap;
  35.     border-left:1px solid white;
  36.     border-right:1px solid white;
  37.     align-content: flex-start; 
  38. }
  40. #main div:nth-child(1) li{
  41.     flex: 0 0 30%;
  42.     height:40px;
  43.     line-height: 40px;
  44.     text-align: center;
  45.     border-bottom:1px solid white;
  46. }
  48. /* 右边部分 */
  49. #main div:nth-child(2){
  50.     flex: 0 0 100%;
  51.     background-color: #f5f5f5;
  52.     list-style-type: none;
  53.     display: flex;
  54.     flex-wrap:wrap;
  55.     justify-content: space-around;
  56. }
  58. #main div:nth-child(2) li{
  59.     flex: 0 0 30%;
  60.     height:120px;
  61.     text-align: center;
  62.     border-bottom:1px solid white;
  63.     background-color: yellow;
  64.     margin-top:10px;
  65. }

实现效果：

优化方式：
将big.css和small.css中公共的代码分离出来为common.css。
而区分宽度的地方，分别写在big.css和small.css文件里。

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

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