search

博客列表 >Flex实战：PC/手机端通用解决方案

Flex实战：PC/手机端通用解决方案

邱世家的博客
邱世家的博客原创
2020年06月24日 18:40:08670浏览

PC端通用方案

  • 先写dom结构
    1. <body>
    2.   <header>
    3.     <nav>
    4.       <a href="">LOGO</a>
    5.       <a href="">首页</a>
    6.       <a href="">视频教程</a>
    7.       <a href="">入门教程</a>
    8.       <a href="">社区问答</a>
    9.       <a href="">技术文章</a>
    10.       <a href="">资源下载</a>
    11.       <a href="">编程词典</a>
    12.       <a href="">工具下载</a>
    13.       <a href="">登陆</a>
    14.     </nav>
    15.   </header>
    16.   <div class="container">
    17.     <div class="side">zuo</div>
    18.     <div class="main">zhong</div>
    19.     <div class="side">you</div>
    20.   </div>
    21.   <footer>
    22.     <p>php中文网：公益在线php培训，帮助PHP学习者快速成长！</p>
    23.     <p>青岛 | 皖B2-20150071-9 皖公网安备 34010402701654号</p>
    24.   </footer>
    25. </body>
  • css样式
    1. <style>
    2.     * {
    3.       margin: 0;
    4.       padding: 0;
    5.       box-sizing: border-box;
    6.     }
    7.     a {
    8.       text-decoration: none;
    9.       color: aqua;
    10.     }
    11.     /* body转为flex 主轴方向垂直 不换行*/
    12.     body {
    13.       min-width: 960px;
    14.       display: flex;
    15.       flex-flow: column nowrap;
    16.     }
    17.     /* 设置页眉页脚公共样式 */
    18.     header nav,
    19.     footer {
    20.       background-color: grey;
    21.       height: 40px;
    22.     }
    23.     /* 把nav转为flex 主轴水平不换行 这行代码可以不写 */
    24.     header nav {
    25.       display: flex;
    26.       /* 所有项目在交叉轴上垂直居中 */
    27.       align-items: center;
    28.     }
    29.     /* 当nav转为flex时，他的子元素a标签 就成为一个个项目
    30.     让他不放大可收缩 宽度150*/
    31.     header nav > a {
    32.       flex: 0 1 150px;
    33.       text-align: center;
    34.     }
    35.     /* 设置第一个A标签右外边距 */
    36.     header nav > a:first-of-type {
    37.       margin-right: 80px;
    38.     }
    39.     /* 最后一个A标签靠最左边 */
    40.     header nav > a:last-of-type {
    41.       margin-left: auto;
    42.     }
    43.     /* 排除第一个A标签鼠标悬停效果 */
    44.     header nav > a:hover:not(:first-of-type) {
    45.       color: coral;
    46.       font-size: 1.5rem;
    47.       text-decoration: underline;
    48.       text-decoration-color: yellowgreen;
    49.     }
    50.     /* 主体去转为flex 主轴为水平 */
    51.     .container {
    52.       min-height: 600px;
    53.       /* 设置主体上下边距10 左右居中 */
    54.       margin: 10px auto;
    55.       display: flex;
    56.       /* container下面的项目 水平方向居中显示 */
    57.       justify-content: center;
    58.     }
    59.     /* 设置.container下面所有div */
    60.     .container > * {
    61.       border: 1px solid #000;
    62.       padding: 10px;
    63.     }
    64.     /* 设置左右两侧 禁止缩放，宽度为200*/
    65.     .container > .side {
    66.       flex: 0 0 200px;
    67.     }
    68.     /* 设置中间禁止缩放宽度为600，左右外边距为10px */
    69.     .container > .main {
    70.       flex: 0 0 600px;
    71.       margin: 0 10px;
    72.     }
    73.     /* 设置页脚样式：转为flex 主轴垂直不换行，文本居中显示 */
    74.     footer {
    75.       display: flex;
    76.       flex-flow: column nowrap;
    77.       text-align: center;
    78.     }
    79.   </style>

移动端通用方案

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <!-- 引入字体图标 -->
  7.     <link rel="stylesheet" href="static/css/font-icon.css" />
  8.     <title>手机端</title>
  9.     <style>
  10.       /* 初始化 */
  11.       * {
  12.         margin: 0;
  13.         padding: 0;
  14.         box-sizing: border-box;
  15.       }
  16.       a {
  17.         text-decoration: none;
  18.         color: #ccc;
  19.       }
  20.       /* html=:root */
  21.       html {
  22.         /* vw： 可视区宽度，100指100份 */
  23.         /* vh:可视区的高度，100指100分 */
  24.         width: 100vw;
  25.         height: 100vh;
  26.         font-size: 14px;
  27.         color: #666;
  28.       }
  29.       /* 手机端页面总是一列显示,
  30.       先转FLEx */
  31.       body {
  32.         min-width: 360px;
  33.         background-color: white;
  34.         display: flex;
  35.         flex-flow: column nowrap;
  36.       }
  37.       body > header {
  38.         color: white;
  39.         background-color: teal;
  40.         height: 30px;
  41.         display: flex;
  42.         /* 项目在交叉轴位置 */
  43.         align-items: center;
  44.         /* 项目在主轴上两端对齐 */
  45.         justify-content: space-between;
  46.         /* 固定在浏览器得上方 */
  47.         position: fixed;
  48.         width: 98vw;
  49.         padding: 0 10px;
  50.       }
  51.       /* 此处选择器问题 body下面就一个.slider得div而.slider下面就一个img标签
  52.       所以我用了后代选择器,用子选择器(>)得效果时一样得 */
  53.       body .slider {
  54.         height: 180px;
  55.       }
  56.       body .slider img {
  57.         width: 100%;
  58.       }
  59.       /* 导航区转为flex主轴水平,换行,分散对齐 */
  60.       .nav {
  61.         height: 200px;
  62.         margin-top: 10px;
  63.         display: flex;
  64.         flex-flow: row wrap;
  65.         align-content: space-around;
  66.       }
  67.       /* .nav1转为flex 主轴垂直不换行.项目在交叉轴居中显示 */
  68.       .nav > .nav1 {
  69.         width: 20vw;
  70.         display: flex;
  71.         flex-flow: column nowrap;
  72.         align-content: center;
  73.       }
  74.       .nav > .nav1 > a {
  75.         text-align: center;
  76.         color: #000000;
  77.       }
  78.       .nav > .nav1 img {
  79.         width: 50%;
  80.       }
  81.       .goods {
  82.         border-top: 1px solid #cdcdcd;
  83.         margin-top: 10px;
  84.         font-size: 0.8rem;
  85.         display: flex;
  86.         /* 水平行容器 */
  87.         flex-flow: row wrap;
  88.       }
  89.       .goods > .goods-hot img {
  90.         width: 100%;
  91.       }
  92.       .goods > .goods-hot {
  93.         padding: 10px;
  94.         /* 允许放大不允许缩小,否则项目不会换行,多行容器失效 */
  95.         flex: 1 0 30vw;
  96.         /* 再将每个商品描述转为flex */
  97.         display: flex;
  98.         flex-flow: column nowrap;
  99.         align-items: center;
  100.       }
  101.       .goods-hot > .goods-prc > a span {
  102.         color: red;
  103.       }
  104.       /* 商品列表 */
  105.       .list {
  106.         padding: 10px;
  107.         border-top: 1px solid #ccccdd;
  108.         margin-top: 10px;
  109.         display: flex;
  110.         /* 主轴垂直 */
  111.         flex-flow: column nowrap;
  112.       }
  113.       .list > .list1 {
  114.         /* 每个项目添加上下边距 转为flex*/
  115.         margin: 10px 0;
  116.         display: flex;
  117.       }
  118.       .list > .list1 > a {
  119.         padding: 10px;
  120.         color: #000000;
  121.         font-size: 0.8rem;
  122.       }
  123.       .list img {
  124.         width: 100%;
  125.       }
  126.       body footer {
  127.         height: 30px;
  128.         background-color: lightblue;
  129.         /* 做绝对定位 */
  130.         position: fixed;
  131.         bottom: 0;
  132.         width: 98vw;
  133.         display: flex;
  134.         justify-content: space-around;
  135.       }
  136.       /* 修改字体大小颜色 */
  137.       footer a > span:last-of-type {
  138.         font-size: 1.3rem;
  139.         color: #000000;
  140.       }
  141.     </style>
  142.   </head>
  143.   <body>
  144.     <!-- 页眉 -->
  145.     <header>
  146.       <a href=""><span class="iconfont">&#xe61f;</span></a>
  147.       <a href="">登录</a>
  148.     </header>
  149.     <!-- 轮播图 -->
  150.     <div class="slider">
  151.       <a href=""><img src="static/images/banner.jpg" alt="" /></a>
  152.     </div>
  153.     <!-- 主导航区 -->
  154.     <div class="nav">
  155.       <div class="nav1">
  156.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  157.         <a href="">京东超市</a>
  158.       </div>
  159.       <div class="nav1">
  160.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  161.         <a href="">数码电器</a>
  162.       </div>
  163.       <div class="nav1">
  164.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  165.         <a href="">京东服饰</a>
  166.       </div>
  167.       <div class="nav1">
  168.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  169.         <a href="">京东生鲜</a>
  170.       </div>
  171.       <div class="nav1">
  172.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  173.         <a href="">京东到家</a>
  174.       </div>
  175.       <div class="nav1">
  176.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  177.         <a href="">充值缴费</a>
  178.       </div>
  179.       <div class="nav1">
  180.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  181.         <a href="">9.9元拼</a>
  182.       </div>
  183.       <div class="nav1">
  184.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  185.         <a href="">领卷</a>
  186.       </div>
  187.       <div class="nav1">
  188.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  189.         <a href="">PLUS</a>
  190.       </div>
  191.       <div class="nav1">
  192.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  193.         <a href="">PLUS</a>
  194.       </div>
  195.     </div>
  196.     <h2>
  197.       为你推荐<span class="iconfont" style="color: tomato;">&#xe60b;</span>
  198.     </h2>
  199.     <div class="goods">
  200.       <div class="goods-hot">
  201.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  202.         <p>Iphone 11 128G</p>
  203.         <div class="goods-prc">
  204.           <a href=""><span>6299&nbsp;</span></a>
  205.           <a href=""><span class="iconfont">&#xe602;</span></a>
  206.         </div>
  207.       </div>
  208.       <div class="goods-hot">
  209.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  210.         <p>Iphone 11 256G</p>
  211.         <div class="goods-prc">
  212.           <a href=""><span>8299&nbsp;</span></a>
  213.           <a href=""><span class="iconfont">&#xe602;</span></a>
  214.         </div>
  215.       </div>
  216.       <div class="goods-hot">
  217.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  218.         <p>Iphone 11 64G</p>
  219.         <div class="goods-prc">
  220.           <a href=""><span>4199&nbsp;</span></a>
  221.           <a href=""><span class="iconfont">&#xe602;</span></a>
  222.         </div>
  223.       </div>
  224.       <div class="goods-hot">
  225.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  226.         <p>MAC 2020 128G</p>
  227.         <div class="goods-prc">
  228.           <a href=""><span>6299&nbsp;</span></a>
  229.           <a href=""><span class="iconfont">&#xe602;</span></a>
  230.         </div>
  231.       </div>
  232.       <div class="goods-hot">
  233.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  234.         <p>MAC 2020 256G</p>
  235.         <div class="goods-prc">
  236.           <a href=""><span>8099&nbsp;</span></a>
  237.           <a href=""><span class="iconfont">&#xe602;</span></a>
  238.         </div>
  239.       </div>
  240.       <div class="goods-hot">
  241.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  242.         <p>MAC 2020 1T</p>
  243.         <div class="goods-prc">
  244.           <a href=""><span>10999&nbsp;</span></a>
  245.           <a href=""><span class="iconfont">&#xe602;</span></a>
  246.         </div>
  247.       </div>
  248.     </div>
  249.     <!-- 商品列表 -->
  250.     <h2 style="text-align: center; margin-top: 15px;">
  251.       商品列表<span class="iconfont" style="color: tomato;">&#xe64b;</span>
  252.     </h2>
  253.     <div class="list">
  254.       <div class="list1">
  255.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  256.         <a href=""
  257.           >[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
  258.           今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  259.           以上都是我瞎编的<span class="iconfont" style="color: tomato;"
  260.             >&#xe675;</span
  261.           ></a
  262.         >
  263.       </div>
  264.       <div class="list1">
  265.         <a href=""><img src="static/images/goods4.jpg" alt="" /></a>
  266.         <a href=""
  267.           >[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
  268.           今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  269.           以上都是我瞎编的<span class="iconfont" style="color: tomato;"
  270.             >&#xe675;</span
  271.           ></a
  272.         >
  273.       </div>
  274.       <div class="list1">
  275.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  276.         <a href=""
  277.           >[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
  278.           今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  279.           以上都是我瞎编的<span class="iconfont" style="color: tomato;"
  280.             >&#xe675;</span
  281.           ></a
  282.         >
  283.       </div>
  284.     </div>
  285.     <!-- 页脚 -->
  286.     <footer>
  287.       <a href=""
  288.         ><span class="iconfont" style="color: tomato;">&#xe60c;</span>
  289.         <span>首页</span>
  290.       </a>
  291.       <a href=""
  292.         ><span class="iconfont" style="color: tomato;">&#xe64b;</span>
  293.         <span>分类</span>
  294.       </a>
  295.       <a href=""
  296.         ><span class="iconfont" style="color: tomato;">&#xe602;</span>
  297.         <span>购物车</span>
  298.       </a>
  299.       <a href=""
  300.         ><span class="iconfont" style="color: tomato;">&#xe657;</span>
  301.         <span>登录</span>
  302.       </a>
  303.     </footer>
  304.   </body>
  305. </html>

总结：

  • PC端通用方案相对简单，手机端感觉很难，这个手机端感觉写有点混乱，有时间分不清主轴要水平还是居中，对于各个图片宽度的设置也感觉有点蒙。还是需要多多写案例
上一条：水平与垂直对齐下一条：Flex布局知识及实战案例演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多