一、安装

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. css常见知识点总结

    CSS 中可继承与不可继承属性有哪些 可继承: 字体系列 font-family font-weight font-size 文本系列 color text-align line-height 可见系 ...

  2. 汇编语言实验1—Debug基础操作

    1.使用Debug,将下面的程序段写入内存,逐条执行,观察每条指令执行后CPU中相关寄存器中内容的变化. 记录1:最后一条指令执行完BX=(4026)H,AL=(66)H,检验结果. 两种写入:e命令 ...

  3. Jenkins+Allure测试报告+飞书机器人发送通知

    一.前言 之前讲了jenkins如何设置定时任务执行脚本,结合实际情况,本篇讲述在jenkins构建成功后,如何生成测试报告,以及推送飞书(因为我公司用的是飞书,所以是发送到飞书机器人). 本次实践搞 ...

  4. 观察者模式与Google Guava EventBus实现

    概述 观察者模式又被称为发布-订阅(Publish/Subscribe)模式,属于行为型模式的一种. 它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态变化时,会 ...

  5. 项目完成 - 基于Django3.x版本 - 开发部署小结

    前言 最近因为政企部门的工作失误,导致我们的项目差点挂掉,客户意见很大,然后我们只能被动进入007加班状态,忙得嗷嗷叫,直到今天才勉强把项目改完交付,是时候写一个小结. 技术 因为前期需求不明确,数据 ...

  6. FreeRTOS --(15)信号量之概述

    转载自 https://blog.csdn.net/zhoutaopower/article/details/107359095 在裸机编程中这样使用过一个变量:用于标记某个事件是否发生,或者标志一下 ...

  7. redo log 和 binlog 的一些总结

    1 redo log 和 binlog 的区别 redo log 是 InnoDB 引擎特有的:binlog 是 MySQL 的 Server 层实现的,所有引擎都可以使用. redo log 是物理 ...

  8. 1.Docker简介

    Docker是个什么东西 假定您在开发一个项目,您使用的是一台笔记本电脑而且您的开发环境具有特定的配置.其他开发人员身处的环境配置也各有不同.您正在开发的应用依赖于您当前的配置且还要依赖于某些配置文件 ...

  9. pytorch入门--土堆深度学习快速入门教程

    工具函数 dir函数,让我们直到工具箱,以及工具箱中的分隔区有什么东西 help函数,让我们直到每个工具是如何使用的,工具的使用方法 示例:在pycharm的console环境,输入 import t ...

  10. 一窥 AJAX

    一窥 AJAX 本文写于 2020 年 6 月 7 日 AJAX 这个词非常常见,如果使初学者,说不定还会非常害怕这个名字看起来非常高端.非常难的技术. AJAX,全称 Async JavaScrip ...