vue开发移动端h5使用 lib-flexible移动端适配

在做h5的时候，考虑到移动端的适配问题，以及px像素的问题

项目中使用lib-flexible

一、项目中安装lib-flexible

npm install lib-flexible --save

二、在项目的入口js文件中引入lib-flexible

import 'lib-flexible'

三、修改index.html 的mate属性

<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<title>my-firsth5</title>

使用px2rem-loader自动将css中的px转换成rem

一，项目中安装

npm install px2rem-loader --save-dev

二，添加，修改

在build下的utils.js文件内添加

  const px2remLoader = {loader: 'px2rem-loader',options: {remUint: 75}}

修改

 // const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]const loaders = [cssLoader, px2remLoader]

注意事项

1.添加，修改 utils.js之后记得重新启动项目

2.如何知道操作是否成功

发现自己的html商的Data-fpr=“2”

以及自己原本是px的单位；自动转换为了rem

vue开发移动端h5使用 lib-flexible移动端适配相关推荐

vue开发android tv,h5做APP TV(电视端APP vue框架)-Go语言中文社区
先px转rem,然后把psd上传蓝湖,把尺寸改为750的图纸,按照上面的尺寸来写代码 1.安装px2rem-loader npm install px2rem-loader 2.配置px2rem-lo ...
移动端H5页面高清多屏适配方案
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
移动端h5框架自适应_Html5移动端页面自适应百分比布局
按百分比布局,精度肯定不会有rem精确 Document * { padding: 0; margin: 0; } .one { width: 20%; height: 100px; float: l ...
移动端h5唤起键盘_移动端H5界面打开后，如何自动调用软键盘
test(){ // let aa = this.$refs.input1.blur(); // this.$nextTick((x)=>{ //正确写法 // // this.$refs.in ...
移动端（五）flexible.js + rem适配布局
rem适配方案flexible.js github地址:https://github.com/amfe/lib-flexible flexible.js 是手机淘宝团队出的移动端布局适配库不需要在写 ...
使用vue开发钉钉H5微应用
1.钉钉开放平台打开钉钉开放文档,登录企业账号之后找到微应用本地开发工具页面 2.参考使用流程参考以下步骤,使用H5微应用开发工具进行开发. 1.安装DingTalk-Design-CLI npm ...
vue开发一款h5弹幕项目
两天时间用vue写一个手持弹幕,(没有完成所有功能) 先看一下效果视频演示这里使用vue 写的,只支持vue语法.后期有时间会考虑写成npm 插件.欢迎大神PR/ 有两个组件 , 贴一下代码,如果 ...
智能混剪系统爆款生成器移动端-----H5手机版(小程序端)
智能混剪系统爆款生成器移动端手机版 ------ 开发剪辑软件类工具(行业模板化操作) //整理@用户功能 $at_users = []; if (!empty( ...
Vue自定义指令—解决H5页面不同尺寸屏幕的适配问题
基于vue框架针对H5在不同分辨率的手机做出来一套适配方案,具体如下: 设计图按iPhone6/7/8 去掉底部返回条的尺寸设计的: width:750px , height:1108px(可使用该方 ...
移动端h5 顶部菜单栏_HTML5 移动端上动态固定菜单栏的问题
展开全部 html> content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1 ...

vue开发移动端h5使用 lib-flexible移动端适配

vue开发移动端h5使用 lib-flexible移动端适配相关推荐

最新文章

热门文章