一、安装

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. linux lvm逻辑卷管理之lvdisplay命令

    linux 磁盘管理分fdisk parted 和LVM三种方式,我们这里重点是说lvm 我们来看看LVM基本术语(lvm和传统fdisk分区方式有区别)由于传统的磁盘管理不能对磁盘进行磁盘管理,因此 ...

  2. 执行Hive sql 报FAILED:Execution Error,return code 2 from org.apache.hadoop.hive.ql.exec.mr.MapRedTask

    在hive Beeline命令行使用insert into ... select ...向hive表插入数据时,报FAILED:Execution Error,return code 2 from o ...

  3. python基础-基本数据类型(二)

    一.序列类型 序列类型是用来表示有序的元素集合 1.字符串(str) python中字符串通常用str表示,字符串是使用单引号,双引号,三引号包裹起来的字符的序列,用来表示文本信息. 1.1 字符串的 ...

  4. XCTF练习题---MISC---适合作为桌面

    XCTF练习题---适合作为桌面 flag:flag{38a57032085441e7} 解题步骤: 1.观察题目,下载附件 2.拿到题目以后是一张图片,切换一下通道,发现一张二维码,使用QR进行翻译 ...

  5. 分享一款高逼格的Linux磁盘信息查看工具

    关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 可以使用df命令来显示在Linux.macOS和类Unix系统中挂载的文件系统上有多少可用磁盘 ...

  6. fedora访问win10共享

    sudo mount -t cifs -o username=user,password=123 //192.168.31.20/aa /home/liao/win

  7. selenium模块 phantomJs 谷歌无可视界面

    参考微博: 什么是selenium 一款基于浏览器自动化的模块 什么是浏览器自动化 通过脚本程序或者python代码,这组程序或者代码表示一些行为动作,selenium可以让这些行为动作映射到浏览器中 ...

  8. java高级用法之:JNA中的回调

    目录 简介 JNA中的Callback callback的应用 callback的定义 callback的获取和应用 在多线程环境中使用callback 总结 简介 什么是callback呢?简单点说 ...

  9. 羽夏 Bash 简明教程(下)

    写在前面   该文章根据 the unix workbench 中的 Bash Programming 进行汉化处理并作出自己的整理,并参考 Bash 脚本教程 和 BashPitfalls 相关内容 ...

  10. 312. Burst Balloons - LeetCode

    Question https://leetcode.com/problems/burst-balloons/description/ Solution 题目大意是,有4个气球,每个气球上有个数字,现在 ...