<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="apple-mobile-app-capable" content="yes"> <meta http-equiv="cache-control" content="no-cache"> <link rel="stylesheet" href="reset.css"> <title>移动端flex布局</title> </head> <body> <header>头部</header> <section class="content">主题</section> <footer> <ul class="bottom"> <li> <img src="" alt=""> <span>会员中心</span> </li> <li> <img src="" alt=""> <span>店铺首页</span> </li> </ul> </footer> </body> </html>
移动端CSS重置样式：
@charset "utf-8"; * { padding: 0; margin: 0; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } * { touch-action: pan-y; } html{ font-size: 100px; } body { width: 100%; min-width: 320px; /*word-break: break-all;*/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: PingFangSC-Regular, sans-serif; font-size: 12px; } html,body{ height:100%; overflow-x:hidden; } select { display: none !important; -moz-appearance: none; appearance: none; -webkit-appearance: none; } input[type="text"], input[type="password"] { -webkit-appearance: none; } input:focus { outline: none; } button { background: none; border: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } ul, ol, li { list-style: none; } i, em { font-style: normal; } table { border-collapse: collapse; border-spacing: 0; } img { border: none; vertical-align: middle; } a { text-decoration: none; cursor: pointer; outline: none; color: #000; } /*引入字体*/ @font-face { font-family: 'Gotham-Bold'; src: url(../font/Gotham-Bold.otf); } @font-face { font-family: 'Gotham-BoldIta'; src: url(../font/Gotham-BoldIta.otf); } @font-face { font-family: 'gotham-book'; src: url(../font/gotham-book.otf); } @font-face { font-family: 'Gotham-BookIta'; src: url(../font/Gotham-BookIta.otf); } @font-face { font-family: 'Gotham-Regular'; src: url(../font/Gotham-Regular.otf); } @font-face { font-family: 'GothamCond-Bold'; src: url(../font/GothamCond-Bold.otf); } @font-face { font-family: 'Hiragino Sans GB W3 （中文细体）'; src: url(../font/Hiragino Sans GB W3 （中文细体）.otf); } @font-face { font-family: 'Hiragino Sans GB W6 （中文粗体）'; src: url(../font/Hiragino Sans GB W6 （中文粗体）.otf); } /*适配320以上屏幕*/ @media (min-320px) { html { font-size: 42.66px !important; } .card .r_l{ top:0.40rem !important; } } /*适配360以上屏幕*/ @media (min-360px) { html { font-size: 48px !important; } } /*适配400以上屏幕*/ @media (min-400px) { html { font-size: 53.33px !important; } } /*适配480以上屏幕*/ @media (min-480px) { html { font-size: 64px !important; } } /*适配540以上屏幕*/ @media (min-540px) { html { font-size: 72px !important; } } /*适配640以上屏幕*/ @media (min-640px) { html { font-size: 85.33px !important; } } /*适配720以上屏幕*/ @media (min-720px) { html { font-size: 96px !important; } } /*适配769以上屏幕*/ @media (min-769px) { html { font-size: 102.5px !important; } } /*适配800以上屏幕*/ @media (min-800px) { html { font-size: 106.66px !important; } } /*适配1025以上屏幕*/ @media (min-1025px) { html { font-size: 136.66px !important; } } /*适配1200以上屏幕*/ @media (min-1200px) { html { font-size: 160px !important; } } /* 头部 */ header{ width: 100%; height:4.50rem; background: url() no-repeat; background-size: cover; position: relative; overflow: hidden; } /* 主题内容 */ .content{ flex: 1; overflow-y: auto; } /* 底部 */ footer{ width: 100%; height:1.30rem; border-top: 1px solid #eeeeee; } .bottom{ width: 4.80rem; height: 100%; margin-left: 1.4rem; display: flex; justify-content:space-between; align-items: center; } .bottom li{ width: 1.30rem; height: 1.30rem; display: flex; flex-direction: column; align-items: center; justify-content: center; } .bottom img{ width: 0.42rem; } .bottom span{ font-size: 0.26rem; }