移动端布局

页头设置

移动端需要禁止用户缩放，否则体验非常差。

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <!-- 设置在苹果手机上以应用模式启动时，是否全屏 --> <meta name='apple-touch-fullscreen' content='yes' /> <!-- 是否识别手机号码、电子邮件、地址 等--> <meta name="format-detection" content="telephone=no,email=no,address=no" /> <!-- 让360双核浏览器用webkit内核渲染页面 --> <meta name="renderer" content="webkit" /> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1" /> <!-- 允许全屏模式浏览,隐藏浏览器导航栏--> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 微信缓存 --> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" /> <!-- 是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 这个主要是根据实际的页面设计的主体色为搭配来进行设置。 --> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 忽略页面中的数字识别为电话号码,email识别 --> <meta name="format-detection"content="telephone=no, email=no" /> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no">

重置样式

重置字体大小：使用语义标记不会影响样式 重置块边距：只有在需要时才应用间距 重置表格：表格数据只占用它所需的空间 保留了行内间距：按钮和输入保持其默认布局 设置边框的大小：边框和划线不会影响设置的尺寸 设置响应的媒体元素：以便图像和嵌入与浏览器的宽度成比例

<link href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.min.css" rel="stylesheet">

初始化样式

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; } body, button, input, select, textarea { font: 12px/1.5 tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } address, cite, dfn, em, var { font-style: normal; } code, kbd, pre, samp { font-family: couriernew, courier, monospace; } small { font-size: 12px; } ul, ol { list-style: none; } a { text-decoration: none; -webkit-user-select: none; -moz-user-focus: none; -moz-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } a:hover { text-decoration: none; outline: none; background: none; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } legend { color: #000; } fieldset, img { border: 0; } button, input, select, textarea { font-size: 100%; } table { border-collapse: collapse; border-spacing: 0; } input { margin: 0; padding: 0; border: 1px solid transparent; outline: none; }

公共样式

body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0;padding:0;} ol,li,ul,dl,dt,dd {list-style:none;} table {border-collapse:collapse;border-spacing:0} html {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%; /* 解决IOS默认滑动很卡的情况 */-webkit-overflow-scrolling : touch;} a {text-decoration: none; color: #fff; font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;} a:hover {text-decoration: none; outline: none;} h1, h2, h3, h4, h5, h6 {font-size: 100%;font-family: 'Microsoft YaHei';} img {border: none;} input{font-family: 'Microsoft YaHei';} /* 禁止缩放表单 */ input[type="submit"], input[type="reset"], input[type="button"], input {resize: none;border: none;} /* 取消链接高亮 */ body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} /* 设置HTML5元素为块 */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} /* 图片自适应 */ img {width: 100%;height: auto;width: auto\9; /* ie8 */-ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/} em, i {font-style: normal;} /*禁用了文本的拖拉，尤其在谷歌下*/ textarea {resize:none; } /* 不够的单词自动换行 而不会被截掉 */ p {word-wrap:break-word; } /* 移动端点击a链接出现蓝色背景问题解决 */ a:link,a:active,a:visited,a:hover {background: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;} /*浮动设置*/ .fl {float: left;} .fr {float: right;} .clearfix {zoom: 1;} .clearfix:after {content: "";display: block;visibility: hidden;height: 0;clear: both;} /*单行溢出*/ .one-txt-cut{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} /*多行溢出 手机端使用*/ .txt-cut{overflow : hidden;text-overflow: ellipsis;display: -webkit-box;/* -webkit-line-clamp: 2; */-webkit-box-orient: vertical;} .overflow {overflow:hidden; } /*宽度设置*/ .w50{width: 50%;} .w25{width: 25%;} .w20{width: 20%;} .w33{width: 33.333333%;} 使用Flex弹性布局 .flexinline{ display: -webkit-inline-flex; display: inline-flex; } .flexbox{ display: -ms-flexbox; display: -webkit-flex; display: flex; display: -webkit-box; display: -moz-box; } .flexbox-row{ -moz-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -webkit-box-direction: normal; -webkit-box-orient: horizontal; } .flexbox-col{ -moz-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-direction: normal; -webkit-box-orient: vertical; } .flexitem{ -moz-flex: 1; -webkit-flex: 1; flex: 1; -webkit-box-flex: 1.0; } .flexwrap{ flex-wrap:wrap; box-lines: multiple; } .flexitem-justify{ -moz-justify-content: center; -webkit-justify-content: center; justify-content: center; -webkit-box-pack: center; } .flexitem-center{ -moz-align-items: center; -webkit-align-items: center; align-items: center; -webkit-box-align: center; }

媒体查询

html {font-size: 15px} html {font-size: 4.7vw;/* rem(root element)配合vw(viewport width) */} @media only screen and (min-width:320PX) and (max-width:359PX) { html { font-size: 15px } } @media only screen and (min-width:360PX) and (max-width:374PX) { html { font-size: 16.875px } } @media only screen and (min-width:375PX) and (max-width:389PX) { html { font-size: 17.5781px } } @media only screen and (min-width:390PX) and (max-width:400PX) { html { font-size: 18.75px } } @media only screen and (min-width:401PX) and (max-width:414PX) { html { font-size: 19.4063px } } @media only screen and (min-width:415PX) and (max-width:640PX) { html { font-size:22.5px } } @media screen and (min-width:641PX) { html { font-size: 30px } }

使用REM控制布局单位

(function(doc,win){ var docEl = doc.documentElement; var resize = "orientationchange" in window ? "orientationchange" : "resize"; var calculate = function(){ var clientWidth = docEl.clientWidth; if(!clientWidth){ return; } docEl.style.fontSize = (clientWidth > 640 ? 640 :clientWidth)/320*20 + "px"; }; //不同浏览器对resize事件处理机制不同，使用定时器延迟处理resize回调函数以降低重复响应。 var timer = null; var delay = function(){ win.clearTimeout(timer); timer = win.setTimeout(calculate, 100); }; //移动端无需考虑事件注册函数兼容性 if(!doc.addEventListener){ return; } //添加resize事件注册函数 win.addEventListener(resize, delay, false); //DOMContentLoaded事件只在DOM文档树加载完毕后触发，因此延迟处理。 doc.addEventListener("DOMContentLoaded", calculate, false); })(document, window); (function(doc, win, designWidth){ var html = doc.documentElement; var resize = "orientationchange" in window ? "orientationchange" : "resize"; var calculate = function(){ var clientWidth = html.clientWidth; if(!clientWidth){ return; } //若设备宽度超过设计稿宽度则按统一值计算 html.style.fontSize = (clientWidth >= designWidth ? 100 : clientWidth/designWidth*100) + "px"; }; //不同浏览器对resize事件处理机制不同，使用定时器延迟处理resize回调函数以降低重复响应。 var timer = null; var delay = function(){ win.clearTimeout(timer); timer = win.setTimeout(calculate, 100); }; //移动端无需考虑事件注册函数兼容性 if(!doc.addEventListener){ return; } //添加resize事件注册函数 win.addEventListener(resize, delay, false); //DOMContentLoaded事件只在DOM文档树加载完毕后触发，因此延迟处理。 doc.addEventListener("DOMContentLoaded", calculate, false); })(document, window, 750);

背景图片缩放自适应

body{ background-color: #0b0f34; background-image:url("/assets/stats/img/bg.png"); background-repeat: no-repeat no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; } .main{ padding:3rem 1.5rem 1.5rem 1.5rem; background-image:url("/assets/stats/img/wrapper-bg.png"); background-repeat: no-repeat no-repeat; background-position: center center; background-size: 100% 100%; }

background-size:cover;设置背景基于容器大小伸缩 background-attachment:fixed;设置当内容高度大于背景图片高度时背景图片位置先对于viewport固定 文本字体缩放自适应