Code Monkey home page Code Monkey logo

vue-mobile-ui's Introduction

vue-mobile-ui

A Mobile UI Components based on Vue, named ?

预览地址

预览地址

环境和依赖

详见 package.json

文档

为什么要�存在这个项目 想法

Issues

欢迎提交 issues

Fork && Star

点击右上角 Fork 及时接收本项目的更新消

喜欢猛戳 Star

项目结构说明

项目开发具体组件思路

File Structure

The following directories and files:

vue-mobile-ui
.
├── LICENSE
├── README.md
├── package.json
├── build
│   ├── build.js
│   ├── check-version.js
│   ├── logo.png
│   ├── utils.js
│   └── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   ├── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
│   └── test.env.js
├── docs
│   ├── index.html
│   ├── static
│   │── ├── css
│   │── ├── js
└── src
    ├── assets
    │   ├── css
    │   │   └── reset.css
    │   ├── logo.png
    │   ├── img
    │   │   └── logo.png
    ├── components
    │   ├── Buttons
    │   │   └── buttons.vue
    │   ├── Dialog
    │   │   └── dialog.vue
    │   ├── Form
    │   │   └── form.vue
    │   ├── Icons
    │   │   └── icons.vue
    │   ├── Input
    │   │   └── input.vue
    │   ├── Layout
    │   │   └── layout.vue
    │   ├── List
    │   │   └── list.vue
    │   ├── Popup
    │   │   └── popup.vue
    │   ├── Process
    │   │   └── process.vue
    │   ├── Toast
    │   │   └── toast.vue
    │   └── AllList.vue
    │   └── HelloWorld.vue
    │   └── components.list.json
    ├── routes
    │   └── index.jsx
    ├── App.vue
    └── main.js

项目开发、部署说明

  1. 使用gh-pages进行部署,网站显示资源需要在 docs 目录下,所以需要配置下weoback打包策略;
  2. 本地开发和预览,查看 package.json;
  3. 部署远程主页,npn run build 然后 push 到代码仓库即可;
  4. 本项目的开发顺序说明: 先实现显示基础性功能,后公共提取样式,直到拥有可供单个组件引入的能力,维护和成熟阶段;

本项目受启发于下列项目

weui mint-ui meili

License

MIT

vue-mobile-ui's People

Contributors

eyea avatar

Watchers

James Cloos avatar  avatar

vue-mobile-ui's Issues

移动端适配方案

众所周知的是 rem 布局,根本是响应式的设置根元素的 font-size

  1. 根据媒体查询来
html{ font-size: 38px; }
@media only screen and (min-width: 320px) {
  html { font-size: 42.666px !important; }
}
@media only screen and (min-width: 360px) {
  html {
    font-size: 48px !important;
  }
}
@media only screen and (min-width: 375px) {
  html {
    font-size: 50px !important;
  }
}
@media only screen and (min-width: 414px) {
  html {
    font-size: 55.2px !important;
  }
}
@media only screen and (min-width: 480px) {
  html {
    font-size: 64px !important;
  }
}
@media only screen and (min-width: 560px) {
  html {
    font-size: 74.666px !important;
  }
}
@media only screen and (min-width: 640px) {
  html {
    font-size: 85.333px !important;
  }
}
@media only screen and (min-width: 720px) {
  html {
    font-size: 96px !important;
  }
}
@media only screen and (min-width: 750px) {
  html {
    font-size: 100px !important;
  }
}
@media only screen and (min-width: 800px) {
  html {
    font-size: 106.666px !important;
  }
}
@media only screen and (min-width: 960px) {
  html {
    font-size: 128px !important;
  }
}
  1. js设置 font-size
(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
  1. 直接引用 js 设置 (1kb)
<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);  flex(100, 1);</script>
/*这是阿里团队的高清方案布局代码,
*所谓高清方案就是根据设备屏幕的DPR
*(设备像素比,又称DPPX,比如dpr=2时,表示1个CSS像素由2个物理像素点组成)
*动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值,进而达到高清效果
*/

上述源码:

'use strict';

/**
 * @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px;
 * @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体;
 */
const win = window;
export default win.flex = (baseFontSize, fontscale) => {
  const _baseFontSize = baseFontSize || 100;
  const _fontscale = fontscale || 1;

  const doc = win.document;
  const ua = navigator.userAgent;
  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
  const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
  const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
  let dpr = win.devicePixelRatio || 1;
  if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
    // 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
    dpr = 1;
  }
  const scale = 1 / dpr;

  let metaEl = doc.querySelector('meta[name="viewport"]');
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    doc.head.appendChild(metaEl);
  }
  metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
  doc.documentElement.style.fontSize = `${_baseFontSize / 2 * dpr * _fontscale}px`;
};
  1. postcss-px2rem vue+webpack下的配置
    vue-loader.conf.js
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

module.exports = {
  //使用px-rem转换
  postcss: [require('postcss-px2rem')({remUnit: 75})], // remUnit为1rem应的px值 UI稿是750px
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

base.conf.js module 的 rules 添加规则

      {
        test: /\.(css|scss)$/,
        loader:"style-loader!css-loader!sass-loader!postcss-loader"
      }

但是有个 1px 的问题怎么处理呢?

.no1px {
 border-width: 1px;/*no*/
}

注意: 使用postcss-px2rem插件处理px时候,需要在使用时候注意每个属性后面的分号不能省略

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.