<!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做了不同的处理
