因为公司有个项目需求,手机端的.之前就写了一个一样的项目,只不过是用原生的写的,心想刚写了个vue后台管理系统,何不也用vue写,所有就没有把之前的利用过来.那么问题来了,要让手机端自适应我们该怎么做呢. 可以用阿里的移动端适配代码flexible.js.首先在命令行输入 npm i lib-flexible --save 然后在全局配置文件main.js引入 import Vue from 'vue' import App from './App' import router from './…

因为公司有个项目有webapp的需求,在前期准备的期间考虑过使用ionic,毕竟该项目web端的框架使用的是Angular,项目组的人也都比较熟悉,但是我们毕竟只是做个移动的网页,不想用ionic那么繁琐的东西,最终我还是选了vue.   开始的设想是vue+Muse-ui或者Mint-ui(各有优缺点)+flexible.js,在做到手机端兼容的同时结合ui框架让项目更好看些,然后就开始动手做!   这个时候需要说下flexible.js,阿里开源的移动端适配代码,很好用,不过也有他的缺点,比…

一.安装 1.npm安装 npm i muse-ui -S 或者 CDN安装 <link rel="stylesheet" href="https://unpkg.com/muse-ui/dist/muse-ui.css"> <script src="https://unpkg.com/muse-ui/dist/muse-ui.js"></script> 2.字体安装 <link rel="st…

1.环境的配置: C:\Windows\System32\drivers\etc 2.多行注释: 光标放在函数中间,连按两次:“Ctrl+Alt+D”,就会出现以下的内容 3.总结使用过程:vue移动端flexible.js结合Muse-ui使用的小坑 1/px to rem 插件(vs code) 使用的时候选中 Alt + Z 2/安装步骤见链接: http://blog.csdn.net/zhanglong_web/article/details/78649717 http://blog.…

通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 vue -V 查看版本号验证是否安装成功 通过vue-cli 初始化vue项目 输入命令行新建 vue-demo 项目 vue init webpack vue-demo(项目名) 然后就可以一路回车键了 $ vue init webpack vue-demo ? Project name (vue…

前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分辨率大小不同,调整根元素html的font-size,从而达到每个元素宽高自动变化,适配不同屏幕 安装lib-flexible.js npm install lib-flexible --save 在项目入口文件main.js中引入lib-flexible import 'lib-flexible/…

曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢慢的到了有了统一的技术方案去落地实现. 从手写不同尺寸的媒体查询css到以手淘的flexible.js来进行移动端的适配,虽然过程曲折,不过效果也是十分的显著,因为有了成熟的体系以后.什么东西就有据可寻,适配也就没那么困难了. 但是,因为这次引入了高德地图,所以在适配上出现了一点意料之外的问题. 首…

本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. 例如:当一台手机的分辨率为1024*768来说,也就是说,这屏幕由纵向的1024个像素点和横向的768个像素点组成,所以当一个组件的width为200px的时候在这台手机上会占据200个横向的像素点:那么当同样大小的手机只有800*600的分辨率,那么该组件在同样的大小手机中也占据了200个横向像素…

第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible npm install lib-flexible --save-dev 二.在项目入口文件main.js中引入lib-flexible import 'lib-flexible/flexible.js' 三.在项目根目录的index.html 头部加入手机端适配的meta <meta name="viewport" content="width=device-width,initial…

http://caibaojian.com/flexible-js.html 阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现方法: 通过JS来调整html的字体大小,而在页面中的制作稿则统一使用rem这个单位来制作.关键代码如下: ;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc…