1. 移动端开发
从零开始学习移动端Web开发
手机分辨率和webapp分辨率的关系
移动端适配之rem.js
css适配不同分辨率屏幕
移动WEBAPP开发常规CSS样式总结
移动端页面开发的两种方式
H5移动端常用标签总结
html5的一些常用标签
微信页面开发
2. 常用插件推荐
移动端手势库Hammer.js学习
2015年最全的移动WEB前端UI框架
模板页面
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>
<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>0h3>
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>1000h3>
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>190h3>
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>Documenttitle>
<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>
<div class="top">
<div class="left">leftdiv>
<div class="center">centerdiv>
<div class="right">rightdiv>
div>
<div class="wrap">
<div class="unit">
<span class="icon one-col">1span>
div>
<div class="unit">
<span class="icon">span>
<span class="text">20span>
div>
<div class="unit">
<span class="icon one-half">span>
<span class="text">21span>
div>
<div class="unit">
<span class="text">22span>
<span class="icon one-half">span>
div>
<div class="unit">
<span class="icon">span>
<span class="text">33span>
<span class="text">333span>
div>
div>
body>
html>
4 扩展思路
快速搭建响应式网站适配多终端，我一般选 bootstrap 或者 fundation ，当然可以借助其他比较好用的拖拽方式生成页面结构，比如菜鸟教程 UI 可视化 及其推荐的各大网站。
附上两个 bootstrap 官网推荐的经典案例
visualstudio.com
redash
当然，也可以重复造轮子的，不过特别慢，真的好慢。。主要是细节方面肯定是没有成熟框架做得好，但是代码是真的相当简洁喔
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 pagetitle>
<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">homeli>
<li class="item">prpductli>
<li class="item">about usli>
ul>
<span class="close">Xspan>
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-width: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 标准，这么用的话 手机自动缩放，挺好的
5. 给力链接
移动端，多屏幕尺寸高清屏retina屏适配的解决方案
淘宝 rem 布局 demo