一、安装

npm install px2rem-loader lib-flexible --save

二、入口文件main.js加上

import ‘lib-flexible/flexible.js’

三、在index.html加上

 <meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

四、在build下的 utils.js中加上

const px2remLoader = {
loader: ‘px2rem-loader’,
options: {
remUnit: 37.5
}
}

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119809139

关于Vue 移动端适配 (px2rem 插件将px转为rem)的更多相关文章

  1. sublime插件之px转rem

    sublime插件之px转rem   安装: 1.下载sublime并安装: 2.下载cssrem:https://github.com/hyb628/cssrem: 3.找到 Packages (首 ...

  2. 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基 ...

  3. 使用gulp将移动端px转为rem

    使用gulp的插件可以很方便的将xp转为rem,在布局的时候使用@1x .@2x布局,即10rem=device-width:@1x即设计图为320px,1rem对应的10px像素,相对的@2x即为布 ...

  4. 【移动端】移动端字体单位font-size选择px还是rem

    对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可对于需要适配各种移动设备,使用rem,例如只需要适配iphone和iPad等分辨率差别比较挺大的设备 html{font-size: ...

  5. SublimeText插件cssrem : px转换为rem

    步骤: 下载插件: https://github.com/flashlizi/cssrem 安装插件: 打开:Sublime Text 点击: Preferences 选择: Browse Packa ...

  6. vue3.x移动端适配px2rem

    1.什么是px2rem px2rem是一个插件能将px自动转换为rem,以适配各种不同的屏幕尺寸.前端开发可以直接使用设计稿量出的尺寸或者蓝湖给出的px进行布局,这样极大的提高了开发效率. 2.前提条 ...

  7. vue移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html

  8. 基于Vue/React项目的移动端适配方案

    本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...

  9. 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析

    以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...

随机推荐

  1. Windows下FFMEPG编译

    FFMPEG在Windows下编译(MIMO431) /************************************************************************ ...

  2. node.js - http、模块化、npm

    今天是node学习的第二天,其实越往后面学越感觉有点熟悉的味道了,光针对于node来说哈,为什么呢,因为我之前学过一点云计算的东西,当时感觉没什么用搞了下服务器客户端这些,没想到这里还能用一用,至少看 ...

  3. android软件简约记账app开发day02-收入支出明细页面绘制

    android软件简约记账app开发day02-收入支出明细页面绘制 效果图 列表界面绘制 新建layout文件-item_mainlv.xml大体使用绝对布局,嵌套相对布局,嵌套文本内容实现 < ...

  4. 2021.08.01 P4311 数字序列(左偏树)

    2021.08.01 P4311 数字序列(左偏树) [P4331 BalticOI 2004]Sequence 数字序列 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 重点: 1 ...

  5. 【openstack】红帽公开课笔记内容openstack

    overcloud节点自省失败(introspection) 节点自省--获取overcloud

  6. [AcWing 801] 二进制中1的个数

    点击查看代码 #include<iostream> using namespace std; int lowbit(int x) { return x & -x; } int ma ...

  7. git 配置别名简化命令行和删除别名

    废话不多说直接上添加别名语法 加上--global是针对当前用户起作用的,如果不加,那只针对当前的仓库起作用. git config --global alias.<自己想要的命令行> & ...

  8. CTF中常见密码学

    前言 参考,我们任课老师的WORD和PPT,结合自己的理解,在结合网上文章的理解. 一.BASE64编码 BASE64编码中,特征和所拥有的字符字母:A-Z a-z;数字:0-9;符号:+ / ,然后 ...

  9. web框架的本质、MVC框架MTV框架的介绍

    1.web框架的本质 所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端,基于请求做出响应,客户都先请求,服务端做出对应的响应,按照http协议的请求协议发送请 ...

  10. ReentrantLock可重入、可打断、Condition原理剖析

    本文紧接上文的AQS源码,如果对于ReentrantLock没有基础可以先阅读我的上一篇文章学习ReentrantLock的源码 ReentrantLock锁重入原理 重入加锁其实就是将AQS的sta ...