1. 移动端开发
2. 常用插件推荐
3. 例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手机app通用模板爱旅游在线个人中心页面模板</title> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> <link href="http://www.17sucai.com/preview/1527619/2019-02-28/noun/css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- * 17素材vip建站专区模块代码 * 详尽信息请看官网：http://www.17sucai.com/pins/vip * * Copyright , 温州易站网络科技有限公司版权所有 * * 请尊重原创，未经允许请勿转载。 * 在保留版权的前提下可应用于个人或商业用途 --> <section class="aui-flexView"> <section class="aui-scrollView"> <div class="aui-head-noun"> <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/head.png" alt=""> <div class="aui-flex aui-flex-auto"> <div class="aui-user-img"> <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/user-logo-004.png" alt=""> </div> <div class="aui-flex-box"> <h2>李嘉桦</h2> </div> <div class="aui-arrow-right"> <h3>每日签到</h3> </div> </div> </div> <div class="aui-noun-vip"> <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-vip.png" alt=""> </div> <div class="aui-palace aui-palace-one"> <a href="javascript:;" class="aui-palace-grid"> <div class="aui-palace-grid-icon"> <h3>0</h3> </div> <div class="aui-palace-grid-text"> <h2>优惠券</h2> </div> </a> <a href="javascript:;" class="aui-palace-grid"> <div class="aui-palace-grid-icon"> <h3>1000</h3> </div> <div class="aui-palace-grid-text"> <h2>积分</h2> </div> </a> <a href="javascript:;" class="aui-palace-grid"> <div class="aui-palace-grid-icon"> <h3>190</h3> </div> <div class="aui-palace-grid-text"> <h2>放假基金</h2> </div> </a> </div> <div class="aui-palace aui-palace-two"> <a href="javascript:;" class="aui-palace-grid"> <div class="aui-palace-grid-icon"> <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-001.png" alt=""> </div> <div class="aui-palace-grid-text"> <h2>全部订单</h2> </div> </a> <a href="javascript:;" class="aui-palace-grid"> <div class="aui-palace-grid-icon"> <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-002.png" alt=""> </div> <div class="aui-palace-grid-text"> <h2>待付款</h2> </div> </a> <a href="javascript:;" class="aui-palace-grid"> <div class="aui-palace-grid-icon"> <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-003.png" alt=""> </div> <div class="aui-palace-grid-text"> <h2>待出游</h2> </div> </a> <a href="javascript:;" class="aui-palace-grid"> <div class="aui-palace-grid-icon"> <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-004.png" alt=""> </div> <div class="aui-palace-grid-text"> <h2>我的点评</h2> </div> </a> <a href="javascript:;" class="aui-palace-grid"> <div class="aui-palace-grid-icon"> <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-005.png" alt=""> </div> <div class="aui-palace-grid-text"> <h2>我的收藏</h2> </div> </a> <a href="javascript:;" class="aui-palace-grid"> <div class="aui-palace-grid-icon"> <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-006.png" alt=""> </div> <div class="aui-palace-grid-text"> <h2>消息</h2> </div> </a> <a href="javascript:;" class="aui-palace-grid"> <div class="aui-palace-grid-icon"> <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-007.png" alt=""> </div> <div class="aui-palace-grid-text"> <h2>分享给好友</h2> </div> </a> <a href="javascript:;" class="aui-palace-grid"> <div class="aui-palace-grid-icon"> <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-008.png" alt=""> </div> <div class="aui-palace-grid-text"> <h2>您的意见</h2> </div> </a> <a href="javascript:;" class="aui-palace-grid"> <div class="aui-palace-grid-icon"> <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-009.png" alt=""> </div> <div class="aui-palace-grid-text"> <h2>客服热线</h2> </div> </a> <a href="javascript:;" class="aui-palace-grid"> <div class="aui-palace-grid-icon"> <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-010.png" alt=""> </div> <div class="aui-palace-grid-text"> <h2>更多</h2> </div> </a> </div> <div style="height:150px;"></div> </section> <footer class="aui-footer aui-footer-fixed"> <a href="javascript:;" class="aui-tabBar-item"> <span class="aui-tabBar-item-icon"> <i class="icon icon-loan"></i> </span> <span class="aui-tabBar-item-text">度周末</span> </a> <a href="javascript:;" class="aui-tabBar-item"> <span class="aui-tabBar-item-icon"> <i class="icon icon-credit"></i> </span> <span class="aui-tabBar-item-text">目的地</span> </a> <a href="javascript:;" class="aui-tabBar-item "> <span class="aui-tabBar-item-icon"> <i class="icon icon-meTo"></i> </span> <span class="aui-tabBar-item-text">定制</span> </a> <a href="javascript:;" class="aui-tabBar-item "> <span class="aui-tabBar-item-icon"> <i class="icon icon-my"></i> </span> <span class="aui-tabBar-item-text">发现</span> </a> <a href="javascript:;" class="aui-tabBar-item aui-tabBar-item-active"> <span class="aui-tabBar-item-icon"> <i class="icon icon-me"></i> </span> <span class="aui-tabBar-item-text">我的</span> </a> </footer> </section> </body> </html>
3.1 简版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } /* footer */ .wrap, .wrap .unit { box-sizing: border-box; } .wrap { position: fixed; bottom: 0; left: 0; padding: 2px 6px; display: flex; width: 100%; border: 1px solid red; font-size: 0.7rem; } .wrap .unit { flex: 1; display: flex; flex-direction: column; align-items: center; border: 1px solid red; } .wrap .unit span{ color: #333; } .wrap .unit span:nth-child(1){ color: #f00; } .wrap .unit span:nth-child(2){ color: #0f0; } .wrap .unit span:nth-child(3){ color: #00f; } .icon{ display: block; width: 20px; height: 20px; border: none; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAA3CAIAAAAnuUURAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODJBRTIwRDEyOTI3MTFFOTk0MjhENTIzOTlDQjA2RUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODJBRTIwRDIyOTI3MTFFOTk0MjhENTIzOTlDQjA2RUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFFMjBDRjI5MjcxMUU5OTQyOEQ1MjM5OUNCMDZFRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFFMjBEMDI5MjcxMUU5OTQyOEQ1MjM5OUNCMDZFRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PihMWQkAAAgkSURBVHja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); background-size: 20px; background-position: center; background-repeat: no-repeat; } /* special */ .one-col { height: 100%; display: flex; flex-direction: column; justify-content: center; } .one-half { height: 66.666%; display: flex; flex-direction: column; justify-content: center; } /* top */ .top{ position: fixed; top: 0; left: 0; width: 100%; display: flex; padding: 2px 20px; box-sizing: border-box; border: 2px solid red; } .top .left, .top .center, .top .right{ border: 1px solid red; box-sizing: border-box; } .top .left, .top .center{ flex: 1; } .top .right{ margin-right: -15px; } </style> </head> <body> <!-- top --> <div class="top"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div> <!-- footer --> <div class="wrap"> <div class="unit"> <span class="icon one-col">1</span> </div> <div class="unit"> <span class="icon"></span> <span class="text">20</span> </div> <div class="unit"> <span class="icon one-half"></span> <span class="text">21</span> </div> <div class="unit"> <span class="text">22</span> <span class="icon one-half"></span> </div> <div class="unit"> <span class="icon"></span> <span class="text">33</span> <span class="text">333</span> </div> </div> </body> </html>
4 扩展思路
快速搭建响应式网站适配多终端，我一般选 bootstrap 或者 fundation ，当然可以借助其他比较好用的拖拽方式生成页面结构，比如菜鸟教程 UI 可视化 及其推荐的各大网站。
附上两个 bootstrap 官网推荐的经典案例
当然，也可以重复造轮子的，不过特别慢，真的好慢。。主要是细节方面肯定是没有成熟框架做得好，但是代码是真的相当简洁喔
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>web page</title> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/content.css" /> </head> <body> <nav class="menu-wrap"> <ul class="menu"> <li class="item active">home</li> <li class="item">prpduct</li> <li class="item">about us</li> </ul> <span class="close">X</span> </nav> <h1> hello menu </h1> <script src="js/index.js"></script> </body> </html>
index.js
function $(s) { return document.querySelector(s) } $('.menu-wrap .close').onclick = function () { if(/show/ig.test($('.menu').className)){ $('.menu').className='menu'; }else{ $('.menu').className='menu show'; } }
reset.css
/* reset */ * { margin: 0; padding: 0; box-sizing: border-box; } ul, li { list-style: none; }
content.css
/* content */ .menu-wrap { position: relative; width: 100%; height: 36px; line-height: 36px; font-size: 16px; } .menu { float: left; } .menu .item { float: left; margin-left: 30px; padding: 0 6px; cursor: pointer; } .menu .item.active { background-color: burlywood; color: purple; font-weight: bold; } .menu-wrap .close { display: none; } @media screen and (max-600px) { .menu-wrap .menu{ max-height:36px; overflow: hidden; } .menu-wrap .menu.show{ max-height:none; } .menu-wrap .close { display: block; position: absolute; top: 0; right: 10px; width: 30px; /* parent height % */ height: 26px; /* parent width % */ margin-top: 5px; line-height: 26px; border: 1px solid #ccc; text-align: center; } .menu { position: absolute; width: 100%; background-color: #ccc; } .menu .item { width: 100%; margin-left: 0; } }
另外附上一种行之有效的写法： 如果设计稿是 640 标准，这么用的话 手机自动缩放，挺好的
<meta name="viewport" content="width=640,user-scalable=no" />
5. 给力链接