zoukankan      html  css  js  c++  java
  • flex自适应小例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
    .navigation {
        list-style: none;
        margin: 0;
        background: deepskyblue;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        justify-content: flex-end
    }
    .navigation a {
        text-decoration: none;
        display: block;
        padding: 1em;
        color: white
    }
    .navigation a:hover {
        background: #00AEE8
    }
    @media all and (max-800px) {
        .navigation {
            justify-content: space-around
        }
    }
    @media all and (max-600px) {
        .navigation {
            -webkit-flex-flow: column wrap;
            padding: 0
        }
        .navigation a {
            text-align: center;
            padding: 10px;
            border-top: 1px solid rgba(255, 255, 255, 0.3);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1)
        }
        .navigation li:last-of-type a {
            border-bottom: none
        }
    } 
        </style>
    </head>
    <body>
    
    <ul class="navigation">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Contact</a></li>
    </ul>
    </body>
    </html>

    分别对800,600做了不同的处理

  • 相关阅读:
    vue3配置rem适配
    webPack转vite2
    vite ant Design vue按需加载
    Vue3 +Vite+ts
    vite 2.0 动态引入加载图片
    Vue3使用vmdeditor自定义锚点
    ThinkPHP6 路由
    DIV+CSS 文本属性
    DIV+CSS 入门篇 CSS选择器
    如何不使用react,也能解析jsx?
  • 原文地址:https://www.cnblogs.com/change-oneself/p/5390039.html
Copyright © 2011-2022 走看看