vue中rem的配置

最新推荐文章于 2024-06-05 20:15:12 发布
最新推荐文章于 2024-06-05 20:15:12 发布
阅读量3.6k 收藏 4
点赞数 1
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ws19900201/article/details/98481069
版权
在Vue移动端项目中，采用rem作为单位进行布局。配置过程包括创建size.js文件，并在main.js中引入。在size.js中，根据设计稿的640尺寸，将100/750的比例调整为100/640来适配。
摘要由CSDN通过智能技术生成

vue 写手机端单位rem 这样配置：

新建 size.js 文件 将 size.js 文件引入到 main.js 文件中；

size.js :

fnResize();
window.onresize = function () {
   
  fnResize();
}

function fnResize(
最低0.47元/天 解锁文章
幽幽靖
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中rem的配置的方法示例
10-18
本篇文章将详细介绍在Vue项目中配置`rem`的方法。 首先，我们需要在JavaScript中统一计算并设置HTML元素的字体大小。以下是一个简单的示例： ```javascript // utils.js export default function() { const ...
vue中自适应rem的设置及vant组件库px自动修改为相对大小的方法两则（postcss-pxtorem和postcss-px-to-viewport）
weixin_41990749的博客
09-18 2830
在使用vant组件时，vant采用的都是px的绝对宽度，其设计稿是视口宽度为375px作为基准值。我们在开发时，为了自适应宽度，往往采用rem或vm或百分比等相对单位作为宽度。但vant组件写死了，我们如何在代码中不修改vant原生的style，也能让页面在运行时做到自适应变化呢。此时重新启动服务，发现原来vant组件，或原页面中使用的px值，全部自适应为rem了。步骤4：在main.js中引入import '@/libs/rem.js'步骤3：新建文件src/libs/rem.js。
vue项目 移动端适配——rem
weixin_51382988的博客
02-09 4260
vue项目，使用rem解决移动端适配问题，插件。
vue2中rem适配方案
最新发布
qq_51035159的博客
06-05 255
【代码】vue2中rem适配方案。
vue 中安装插件实现 rem 适配以及 js 常用适配代码
来杯卡布奇诺的博客
03-09 1034
amfe-flexible 可伸缩布局方案替代了原先的 lib-flexible 选用了当前众多浏览器兼容的 viewport。postcss-pxtorem 是 PostCSS 的插件，用于将像素单元生成 rem 单位。vue 项目实现页面自适应，可以安装插件实现。autoprefixer 浏览器前缀处理插件。
vite安装postcss-pxtorem+amfe-flexible进行移动端自适应
qq_29715077的博客
12-11 1931
一、安装依赖走起 npm install postcss-pxtorem --save-dev npm install amfe-flexible --save-dev 安装成功 ，我的相关版本是 "amfe-flexible": "^2.2.1", "postcss-pxtorem": "^6.0.0", 二、配置 在mian.js中 引入amfe-flexible import 'amfe-flexible' 在vite.config.js中配置postcss-pxtorem ..
【Vue】屏幕适配（rem响应式布局）
热门推荐
Qxn530的博客
09-01 2万+
使用postcss-px2rem----修改单位、flexible.js+vscode的插件cssrem----修改字体大小、并且配合媒体查询完成不同屏幕的适配
vue中使用rem布局代码详解
12-13
然后，我们需要在`package.json`的`postcss`配置中添加`postcss-px2rem`，并设定`remUnit`的值，例如，将1px转换为26.7rem： ```json { "postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem": { ...
vue使用rem实现 移动端屏幕适配
12-01
要想移动端适配 并使用 rem 您需要先看这篇文章，配置好less :right_arrow_selector: 在vue 中使用 less，就可以使用rem了 如果项目已经开发的差不多了，没有用到rem 又要使用rem，您用这招。 postcss-pxtorem：...
vue rem配置
weixin_49692963的博客
11-27 543
1.在utils中创建rem,js /** * 配置 rem 缩放比例 */ (function (doc, win) { resizeEvt = 'orientationcyunhange' in window ? 'orientationchange' : 'resize', recalc = function () { // 获取当前设备的窗口宽度 var clientWidth = doc.documentElement.clie...
【Vue中使用Echarts】响应式布局flexible.js+rem适配方案
一个非常Cool的人
01-05 2839
在进行网页设计的时候由于屏幕大小并不是一定的，所以需要考虑到许多尺寸方面的因素，像素、em、rem三种单位均是常会用到的单位，对他们有一定理解后可以使我们设计出来的网页组件与组件之间契合度更高，展示出来更好看。本篇博客会使用flexible+rem实现vue项目中的响应式布局。
vue2.x 的移动端适配
wangjiezhizun的博客
12-03 964
vue2.0的移动端适配 1. 安装postcss-loader npm i postcss-loader@3.0.0 2. 安装postcss-pxtorem npm i postcss-pxtorem@5.1.1 3. 创建postcss.config.js: 如下 4. 在 /src/libs/ 创建 rem.js 如下 5. 在 main.js 中 引入 import '@/libs/rem.js' // postcss.config.js module.exports = { p
Vue3页面如何设置rem单位的依据“根font-size”的两种方式
STATICHIT静砸的博客
12-13 3056
最近在对项目做整体的自适应。我们可以通过设置meta的viewport属性设置屏幕的缩放，但有时候，屏幕缩放了但字体大小也需要做相应的调整才能达到更好的自适应效果。我们很容易想到使用媒体查询+rem来实现字体的自适应。rem单位：“rem” 是 “root em” 的缩写，表示相对于根元素（html元素）的字体大小。如果根元素的字体大小为16px，1rem就相当于16px。如果根元素字体大小更改，那么所有使用rem单位的元素的大小都会相应地调整。首先，简单说说使用'rem'单位的目的和必要性。
Vue-cli3.X、Vue-cli4.X项目中使用px2rem
发育中的前端
03-19 3895
文章目录第一步：安装postcss-px2rem第二步：在 vue.config.js 中添加配置第三步：添加 rem.js文件第四步：引入rem.js文件第五步：重启服务 第一步：安装postcss-px2rem npm add postcss-px2rem 第二步：在 vue.config.js 中添加配置 const px2rem = require('postcss-px2rem') const postcss = px2rem({ remUnit: 32 //基准大小 baseSiz
vue项目中如何配置rem
weixin_53944118的博客
01-11 1506
1、在项目根目录下中岛src文件夹，在src文件下中找到assets文件夹，在assets文件夹下新建一个js文件夹，在js文件新建一个rem.js,在rem.js中写 (function (draftWidth, n) { function getRem() { var html = document.querySelector("html"); var w = document.body.clientWidth || document.documentElement.clientWidt
vue中如何使用rem
weixin_44283589的博客
08-16 2126
方法一、在Vue中实现跨浏览器的rem适配，可以借助postcss-pxtorem插件和lib-flexible库来实现。
vue的自定义布局（rem）
AyayaOVO的博客
07-10 2269
目录 1. px与视口 2. % 3. 媒体查询 4. rem 5. vm/vh 1. rem单位 首先来看，什么是rem单位。rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。默认情况下，html元素的font-size为12px，所以： 1 rem = 12px 为了计算方便，通常可以将html的font-size设置成： html{ font-size: 67.5% } 这种情况下：
如何在vue项目中使用rem布局
SH744的博客
11-08 9725
在我们开发移动端项目中，实现手机页面布局，需要使用rem布局，那么该如何使用呢？本文就详细的讲解了在vue项目中使用rem布局的整个过程，可以仔细阅读哦！（1）使用lib-flexbile（2）使用postcss-pxtorem两种方法选其一使用哦，避免冲突！!!
rem在vue中的使用
lwx931449660的博客
08-12 5757
rem是什么？ 它是一个相对单位，像px，vh，vw等一样，可以用来表示尺寸单位。 rem之所以可以用于自适应布局，是因为rem是一个相对尺寸，它只相对于html根元素来进行计算 所以，在不同的页面大小中，只要改变html根元素的大小，其他所有元素便会跟着改变 首先要知道，浏览器的默认字体高都是16px，所以可以这样理解，1rem 就等于 16px (1rem = 16px) 因为其他元素要相对于跟元素的大小来进行计算，所以为了方便使用就有了如下操作： html{ ...
vue rem配置大屏开发
05-01
vue是一款流行的前端框架，提供了便捷的开发体验和良好的用户体验。在大屏开发中，我们需要考虑多种因素，如屏幕宽度、字体大小等。rem作为一种相对单位，可以根据不同屏幕的宽度来调整字体大小等元素的尺寸，是大屏开发中不可或缺的配置。 在vue项目中，要配置rem可以使用一些第三方库，如lib-flexible和postcss-pxtorem。使用lib-flexible可以动态设置html的font-size，从而实现rem单位的自适应。而postcss-pxtorem则可以将所有的css单位转换为rem单位。 我们可以在vue项目中安装这些库，并进行配置。先安装lib-flexible库，然后在main.js中引入并执行flexible函数。在vue.config.js中，可以进行postcss-pxtorem的配置，具体包括：设置rootValue，表示1rem对应的像素值；设置propList，指定需要转换的属性名；设置exclude，排除某些文件不进行转换等。配置完成后，我们就可以在项目中使用rem单位了。 在使用rem单位时，需要在设计时考虑大屏的宽高比和字体大小。一般使用12px作为基准，根据设计的规格，在代码中使用rem单位。但是要注意，在使用rem单位时，要避免嵌套过深，否则会导致计算错误。 总之，vue rem配置是大屏开发中必不可少的一部分，通过使用合适的库和配置，可以提供更优秀的用户体验和开发体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值