一、安装

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. 虚拟机VMware的安装与Xshell的应用

    先安装VMware 1.安装就按照提示一点点安装就行了 配置网络 打开VMware 这里的IOS映像文件在https://developer.aliyun.com/mirror/里下载 这里用方向键往 ...

  2. 最强Postman替代品,国产软件Apifox到底有对牛?

    作为软件开发从业者,API 调试是必不可少的一项技能,在这方面 Postman 做的非常出色.但是在整个软件开发过程中,API 调试只是其中的一部分,还有很多事情 Postman 无法完成,或者无法高 ...

  3. Selenium3自动化测试【27】Frame的操作

    本篇文章内容摘要 " 讲解Python3+Selenium3如何处理Frame窗体" 同步视频知识与系列知识内容,可关注:[公众号]:柒哥测试:[WX]:Lee-890;[视频号] ...

  4. 2021.11.11 P4052 [JSOI2007]文本生成器(AC自动机+DP)

    2021.11.11 P4052 [JSOI2007]文本生成器(AC自动机+DP) https://www.luogu.com.cn/problem/P4052 题意: JSOI 交给队员 ZYX ...

  5. Vue.js Mixins 混入使用

    Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重 ...

  6. MySQL进阶之表的增删改查

    我的小站 修改表名 ALTER TABLE student RENAME TO stu; TO可以省略. ALTER TABLE 旧表名 RENAME 新表名; 此语句可以修改表的名称,其实一般我们在 ...

  7. Day 006:PAT练习--1005 Spell It Right (20 分)

    上星期一直在写报告乱七八糟的,从今天开始不刷乙级的了,还是多刷甲级进步来得快一点! 显而易见,该题的关键在于将输入之和的每一位从高到低输出,这里我们发现题意中的输入数的范围为0-10^100,显然我们 ...

  8. RAID5加热备盘

    RAID 5加热备盘 RAID 10磁盘阵列中最多允许50%的硬盘设备发生故障,但是存在这样一种极端情况,即同一RAID 1磁盘阵列中的硬盘设备若全部损坏,也会导致数据丢失.换句话说,在RAID 10 ...

  9. Solon 1.7 重要发布,更现代感的应用开发框架

    相对于 Spring Boot 和 Spring Cloud 的项目 启动快 5 - 10 倍 qps 高 2- 3 倍 运行时内存节省 1/3 ~ 1/2 打包可以缩小到 1/2 ~ 1/10(比如 ...

  10. 用Docker打包Python运行环境

    虽然Docker作为部署环境打包镜像的工具,和我的科研并没有直接的关系.但我觉得在项目中运用Docker来打包环境依赖也可以大大提高工作效率,于是准备专门学习一下Docker. 1. Docker基础 ...