移动端开发 资源分享

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>

  <!--

         * 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>
View Code

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>
View Code

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 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>
View Code

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';
    }
}
View Code

reset.css

        /* reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul,
        li {
            list-style: none;
        }
View Code

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;
      }
    }
View Code

另外附上一种行之有效的写法：  如果设计稿是 640 标准，这么用的话 手机自动缩放，挺好的

<meta name="viewport" content="width=640,user-scalable=no" />
 

5. 给力链接

移动端，多屏幕尺寸高清屏retina屏适配的解决方案 

淘宝 rem 布局 demo 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/justSmile2/p/10491562.html