一、安装

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. JDBC 4.0 开始Java操作数据库不用再使用 Class.forName加载驱动类了

    JDBC 4.0 开始Java操作数据库不用再使用 Class.forName加载驱动类了 代码示例 转自 https://docs.oracle.com/javase/tutorial/jdbc/o ...

  2. No package XXX available 解决方法

    当前yum源找不到所需包,安装epel源即可 yum install -y epel-release EPEL 的全称叫 Extra Packages for Enterprise Linux.EPE ...

  3. 日志、第三方模块(openpyxl模块)

    目录 1.日志模块 2.第三方模块 内容 日志模块 1.日志模块的主要组成部分 1.logger对象:产生日志 无包装的产品 import logging logger = logging.getLo ...

  4. FastDFS分布式的文件系统从小白入门到企业实践打怪之路系列笔记 【运维实践】

    描述: FastDFS 是阿里的余庆大佬用 C 语言编写的一款开源的分布式文件系统(个人项目),它对文件进行管理.功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,适合中小文件(4KB ...

  5. Confluent之Kafka Connector初体验

    概述 背景 Apache Kafka 是最大.最成功的开源项目之一,可以说是无人不知无人不晓,在前面的文章<Apache Kafka分布式流处理平台及大厂面试宝典>我们也充分认识了Kafk ...

  6. Spring的3级缓存和循环引用的理解

    此处是我自己的一个理解,防止以后忘记,如若那个地方理解不对,欢迎指出. 一.背景 在我们写代码的过程中一般会使用 @Autowired 来注入另外的一个对象,但有些时候发生了 循环依赖,但是我们的代码 ...

  7. 0基础学习docker

    进入docker容器命令 docker exec -it 容器id bash 获取镜像 # 1.获取镜像,镜像托管仓库 docker search centos # 查询centos镜像 docker ...

  8. 解决go-micro与其它gRPC框架之间的通信问题

    在之前的文章中分别介绍了使用gRPC官方插件和go-micro插件开发gRPC应用程序的方式,都能正常走通.不过当两者混合使用的时候,互相访问就成了问题.比如使用go-micro插件生成的gRPC客户 ...

  9. rocketmq消息及流程

    1.为什么用mq 优势 主要有3个: 应用解耦(降低微服务之间的关联). 异步提速(微服务拿到mq消息后同时工作). 削峰填谷(可以消息堆积) 劣势 系统可用性降低(MQ一旦宕机整个系统不可用) 复杂 ...

  10. XCTF练习题---CRYPTO---不仅仅是Morse

    XCTF练习题---CRYPTO---不仅仅是Morse flag:cyberpeace{attackanddefenceworldisinteresting} 解题步骤: 1.观察题目,下载附件 2 ...