vue项目在webpack2实现移动端字体自适配功能

使用vue开发移动端页面时，往往需要实现页面根据不同设备屏幕进行尺寸的适配，实现将px自动换算成rem单位，其实只需要安装下面的两个插件即可快速实现移动端适配问题。

1 准备工作：
a. 安装 px2rem-loader 插件：npm install px2rem-loader --save；

b. 安装 lib-flexible 插件：npm install lib-flexible --save;

2 插件的作用：
px2rem-loader插件的作用：我们通过配置基准，实现将px自动换算成rem，
lib-flexible插件的作用：根节点会根据页面视口变化而变化font-size大小。

3 在utils.js文件配置px2rem-loader：
安装完上边两个插件后，可以在package.json中查看到是否安装成功，以及他们的版本信息，其实一般安装插件时，如果没有自己指定版本，基本都会自动安装最新的版本。

4.打开build目录里边的utils.js文件：

找到下边对应的位置，添加红色框的代码：

比如我拿到的是750的设计稿，而我这里又配置成以750为基准，所以写样式时，设计稿标注的是多少px我就直接写成多少px就行，浏览器会自动换算rem单位。

在当前文件中，找到下边的generateLoaders (loader, loaderOptions)方法，将刚才新加的px2remLoader对象添加到下边下划线位置即可

然后打开当前项目的首页入口文件index.html：

新增meta标签：

关于上图中meta标签里边相关属性的简单描述：

viewport：简单来说就是指当前移动设备浏览器用于显示网页内容的可视区域，移动设备一般会自动给它设置默认值为980px或1024px(详细信息有兴趣可以自行网上查看下)；

width=device-width：表示当前布局视口与理想视口一致 ( js获取理想视口：window.screen.width )。

initial-scale：设置页面初次显示时的缩放比例，值为1.0时表示当前显示的是未经缩放的页面。

其实在content里边还可以设置其它属性，比如：

maximum-scale：页面的最大缩放比例；

minimum-scale：页面的最小缩放比例；

user-scalable：用户是否可以手动缩放页面，值可以为no或yes，分别表示不允许缩放和允许缩放。

4 在项目中使用lib-flexible：

只需要在当前项目的main.js中引入：lib-flexible/flexible

5 效果：


6 总结：

通过上边在utils.js文件中对使用px2rem进行相关的中配置后，成功实现了自动将px换算成rem；

在main.js中引入lib-flexible/flexible,成功实现根节点根据页面视口变化而变化font-size大小。

画重点：
配置了rem，项目中样式直接写px就行，浏览器中看到的都是自动换算成rem的

到此这篇关于vue项目在webpack2实现移动端字体自适配的文章就介绍到这了,更多相关vue webpack2 移动端字体自适配内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解基于webpack2.x的vue2.x的多页面站点

    详解基于webpack2.x的vue2.x的多页面站点

    本文介绍了基于webpack2.x的vue2.x的多页面站点,分享给大家,具体如下: vue的多页面 依旧使用vue-cli来初始化我们的项目 然后修改主要目录结构如下: ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── we

  • 详解用webpack2.0构建vue2.0超详细精简版

    详解用webpack2.0构建vue2.0超详细精简版

    npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 安装webpack以及webpack测试服务器,默认安装是1.0版本的,所以必须指定版本号 npm install --save-dev babel-core babel-loader babel-preset-es2015

  • 关于Vue Webpack2单元测试示例详解

    前言 最近发现一个问题,vue-cli 提供的官方模板确实好用.但一直用下来手贱毛病又犯了,像穿了别人的内衣,总感觉不舒服. 所以有机会就瞎倒腾了一遍,总算把各个流程摸了一把.这里分享一下配置带覆盖率的单元测试.分享出来供大家参考学习,话不多少了,来一起看看详细的介绍: 一.文件结构 基本的文件结构. ├─src │ ├─assets │ ├─components │ ├─app.vue │ └─main.js ├─test │ └─unit │ ├─coverage │ ├─specs │ ├

  • vue 系列——vue2-webpack2框架搭建踩坑之路

    react.vue.angular代表了3种前端工程化的思想,学习三大框架主要是理解它们的核心概念,比如组件.生命周期.单向数据流.双向绑定等.这些概念在非框架开发中,很少人会去这样系统化的思考,对于新手来说,很多概念都没有接触过,不知道从何入手一个react.vue或者是angular项目,下面我将会从零搭建vue项目,边做项目边学习vue的思想. 1.想要使用vue,我首先该怎么做? 想要学习vue,我第一件事是去vue官网看简介:https://cn.vuejs.org/v2/guide.

  • vue-cli webpack2项目打包优化分享

    减小文件搜索范围 配置 resolve.modules Webpack的resolve.modules配置模块库(即 node_modules)所在的位置,在 js 里出现 import 'vue' 这样不是相对.也不是绝对路径的写法时,会去 node_modules 目录下找.但是默认的配置,会采用向上递归搜索的方式去寻找,但通常项目目录里只有一个node_modules,且是在项目根目录,为了减少搜索范围,可以直接写明 node_modules 的全路径:同样,对于别名(`alias)的配置

  • vue项目在webpack2实现移动端字体自适配功能

    使用vue开发移动端页面时,往往需要实现页面根据不同设备屏幕进行尺寸的适配,实现将px自动换算成rem单位,其实只需要安装下面的两个插件即可快速实现移动端适配问题. 1 准备工作: a. 安装 px2rem-loader 插件:npm install px2rem-loader --save: b. 安装 lib-flexible 插件:npm install lib-flexible --save; 2 插件的作用: px2rem-loader插件的作用:我们通过配置基准,实现将px自动换算成

  • vue项目中公用footer组件底部位置的适配问题

    需求: footer为公用组件,其他页面都需要引入,这是会存在一种情况:有的页面高度很高,footer组件要放在内容的最后:有的页面内容很少,高度很低,footer需要放在浏览器可视窗口的最底部:窗口高度的变化时,footer的位置需要重新调整. 可能有的伙伴首先想到的 position: fixed; bottom: 0; 这确实能解决页面内容不足以撑满浏览器高度的情况,但由于footer组件是公用的,在内容很多的页面调用时,会出现内容被组件覆盖的情况. 我最终的解决方案: 给内容不足以撑满浏

  • vue项目中实现图片预览的公用组件功能

    今天产品提出了一个查看影像的功能需求. 在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示.而且,从列表进入详情之后,附件那边也会有一个查看影像的按钮. 所以,根据需求,多个组件需要用到查看影像的功能,所以考虑做一个公用组件,通过组件传值的方法将查看影像文件的入参传过去. 后来,产品要求图片可以旋转缩放. 废话不多说,贴上代码: <template> <div class="filePreview&q

  • vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)

    1.首先在index.html引入高德地图的秘钥.如图: 注意:如果使用关键字搜索功能要加上 plugin=AMap.Autocomplete,AMap.PlaceSearch,否则功能无法使用,并会报错 2. 定位功能,代码如下: const map = new AMap.Map(this.$refs.container, { resizeEnable: true }) // 创建Map实例 const options = { 'showButton': true, // 是否显示定位按钮 '

  • Vue项目引用百度地图并实现搜索定位等功能(案例分析)

    目录 一.效果图及功能点 二.前期准备 三.引入百度地图 四.功能解析 本文给大家介绍如何在vue项目中引用百度地图,并设计实现简单的地图定位.地址搜索功能. Tip:本篇文章为案例分析,技术点较多,所以篇幅较长,认真阅览的你一定会学到很多知识. 前言:百度地图开放平台 给开发者们提供了丰富的地图功能与服务,使我们的项目中可以轻松地实现地图定位.地址搜索.路线导航等功能.本文给大家介绍如何在vue项目中引用百度地图,并设计实现简单的地图定位.地址搜索功能. 一.效果图及功能点 先来看一下效果图

  • vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用详解

    vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用详解

    vue项目ElementUI组件中el-upload组件与裁剪功能组件结合使用,供大家参考,具体内容如下 如下图所示,点击上传组件,选择文件后,会立马弹出图片裁剪功能组件的页面 问题描述: 1.在使用upload组件中,如果修改fileList中的内容,浏览器会报错2.获取上传的文件,传递给图片裁剪组件(在on-change中获取文件并传递个裁剪组件)3.要获取裁剪后的图片即File文件(将裁剪后的图片返回出去)4.获取到裁剪后的file调用上传的接口 由于el-upload组件默认使用的是“选

  • vue quill editor 使用富文本添加上传音频功能

    1. 前言 vue-quill-editor 是vue项目中常用的富文本插件,其功能能满足大部分的项目需求.但是,最近项目中,需要在富文本中上传音频文件,但是vue-quill-editor这个富文本仅支持图片,视频上传:所以这个功能需要自定义. 怎么实现这个功能? 写一个只能上传音频的组件,并且隐藏 在富文本插件的toolbar定义一个按钮,点击时调用上传组件 监听上传成功的回调函数,在富文本输入框中插入音频标签 2. 功能实现 2.1 基于Element-ui实现上传组件,并且隐藏(不能让用

  • vue项目适配大屏端的方法示例

    浅析rem 首先rem是css单位,相比于px固定的像素单位,rem更加的灵活,还有现在也比较好的vm.如果从未了解过,可以先过过眼 rem自适应.CSS3的REM设置字体大小 font size of the root element. 简单来说,rem就是根据html元素的字体大小来计算单位的.我们的需求就是说,根据不同的分辨率,我们元素的大小能够有所对应的变化,在视觉上能够做到很舒服的效果.想想我们在做pc端的时候,一般都是中间固定比如1200px像素,然后最小1200px,两边留白,这样

  • vue项目引入字体.ttf的方法

    1.下载所需要的字体,.ttf格式本文以(FZCYJ.ttf 为例) 2.在src下新建common文件,文件夹中包含以下文件 3.打开font.css @font-face { font-family: 'FZCYJ'; //重命名字体名 src: url('FZCYJ.ttf'); //引入字体 font-weight: normal; font-style: normal; } 4.配置webpack.base.conf.js 文件 5.App.vue引入字体 6.可在body中设置字体

  • 解决vue 项目引入字体图标报错、不显示等问题

    问题:在项目开发时使用字体图标,发现两个问题: 1.出现报错: 解决方法为:把字体引入方式改为绝对路径 2.不报错,但是不显示图标字体,出现方框 原因可能有两种: ①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件 ①的解决办法是在用到的地方引入字体的样式文件(全局引入的话需要从app.vue里引入) ②这个就是我遇到的问题,浪费了我好几分钟!!!微笑 解决办法是把font.styl改为font.css 记得在用到图标的地方引入 问题原理后续再写. 以上这篇解决vue 项目

随机推荐