vue rem了解适配原理

最新推荐文章于 2024-02-26 17:11:02 发布
最新推荐文章于 2024-02-26 17:11:02 发布
阅读量257 收藏
点赞数
分类专栏： rem适配原理 文章标签： vue html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/icon_Lx/article/details/120055918
版权
本文介绍了在Vue项目中使用postcss-pxtorem和lib-flexible实现rem适配的原理与步骤。通过将px转换为rem，结合动态设置html字体大小，达到响应式布局的效果，适应不同设备的屏幕。
摘要由CSDN通过智能技术生成

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具:

  • postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
  • lib-flexible 用于设置 rem 基准值，

  • 安装并引入插件

    1.安装依赖

        也可能会出现版本过低的现象建议使用新版接口 

        

 2. main.js 导入

PostCSS 配置

1.创建.postcssrc.js

下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改

rem是相对于根元素（html标签）的字体大小的单位。 核心思想：百分比布局可实现响应式布局，而rem相当于百分比布局。 实现手段：动态获取当前视口宽度width，除以一个固定的数n，得到rem的值。 表达式为rem = width / n

        

江涛入海夜通潮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于vue-cli3移动端样式rem适配（面试常问）
weixin_45699072的博客
03-26 417
在当今移动端设备普及的时代，对我们前端开发来说移动端开发是必不可少的，而如此参差不齐设备屏幕和分辨率无疑对前端开发是非常不友好的，我们的页面会在五花八门的手机有完全不同的展示，甚至直接扭曲掉。移动端适配就是来避免这种情况的。 简单介绍三种适配方式 1.rem适配（常用） 2。百分比适配（古老） 3.视口适配（见下方代码） (function(){ var targetW = 640; var scale = document.documentElemen.
rem自适应布局的回顾总结
06-27 256
使用rem实现自适应布局，应该算是当前移动前端的一大趋势，有些人对此还有点迷惑，搞不懂rem是如何实现自适应布局，如何根据设计稿来调整rem的值？rem布局如何用雪碧背景图片？rem一定要加载JS吗？rem的根html font-size设置为多少合适？看看这篇文章，也许能帮到你。 这些问题整理来自之前发表过的文章，细心的读者也可以自己翻翻之前的内容找到答案，本文统一给个回复，如果对你...
vue的rem适配
liyi_mowu的博客
02-26 321
安装 npm install px2rem-loader lib-flexible --save 引入 //在main.js中引入 import 'lib-flexible/flexible.js' 在build下的 utils.js中，找到generateLoaders 方法 ，在generateLoaders 上面添加以下代码 const px2remLoader = { lo...
淘宝、网易移动端 px 转换 rem 原理，Vue-cli 实现 px 转换 rem
weixin_34026276的博客
06-22 309
   在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配。秉着求知的思想，今天决定对他的原理进行分析。目前网上比较主流使用的就是淘宝方案和网易的解决方案，所以今天我就从这两方面入手深度了解这两个方案。本着互联网分享的精神我会将我所理解的内容分享给大家。Remember me. My name is '铅笔画不出的黑白'    我在...
rem自适应原理
weixin_44389107的博客
03-29 373
原文链接：http://caibaojian.com/rem-responsive-2.html rem自适应原理 rem是根据html的font-size大小来变化，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局。更多介绍请看这篇文章：rem是如何实现自适应布局的。 rem的值 目前有两种，一种是根据js来调整html的字号，另一种则是...
vue使用rem实现 移动端屏幕适配
12-01
要想移动端适配 并使用 rem 您需要先看这篇文章，配置好less :right_arrow_selector: 在vue 中使用 less，就可以使用rem了 如果项目已经开发的差不多了，没有用到rem 又要使用rem，您用这招。 postcss-pxtorem：...
vue中的适配px2rem示例代码
10-17
在开发移动端应用时，适配不同的屏幕尺寸是一项重要的任务。Vue.js 作为一款流行的前端框架，也提供了多种适配策略。...如果你有更多关于 Vue、`px2rem` 或移动端适配的问题，欢迎继续提问，共同探讨前端适配的奥秘。
vue项目移动端适配rem
m0_65331985的博客
10-20 512
vue项目移动端适配rem
Rem 自适应原理与应用
最新发布
chenyajundd的博客
02-26 1564
实现 rem 单位自适应，需要借助 postcss-pxtorem 这款插件将 px 转换为 rem，需要检测窗口的变化去设置根元素的字体大小，从而实现 rem 自动计算，实现自适应。
vue移动端屏幕适配详解
10-17
主要介绍了vue移动端屏幕适配，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用Rem布局实现自适应
11-21
之前写过一篇移动端适配的文章，很长，内容太多，看得容易凌乱，重新写个通熟易懂版的。 为什么要自适应？ 比如，对于一个移动端页面，设计师给的视觉稿画布宽 750，视觉稿中的一个黄色区块的尺寸是 702 x 300，并在画板中居中。我们希望在任何一个设备中的呈现比例都与视觉稿中一样，根据布局视口宽度等比缩放。 在移动端我们一般会设置布局视口宽度=设备宽度，即内容呈现的区域在设备屏幕内。 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 但不同设备的宽度不同，因而让布局视口的宽度也不同。比如 iPhone
Vue用Rem实现自适应布局
weixin_42839080的博客
10-17 4242
一 什么是rem rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。 二 为什么使用rem及原理 2.1 为什么使用r...
rem自适应布局小结001
weixin_30241919的博客
12-20 205
在最近的移动端布局当中，最炙手可热的方式便是使用rem进行元素的布局。以下便是从最近的文章中所总结出来的一点东西。 首先，我们必须有以下的疑问： rem的本质是什么？ rem如何实现自适应布局？ 如何根据设计稿来调整rem的值？ rem布局是能纯CSS还是必须JS进行辅助？ 接着，我们来稍微解答或者解决以上的问题 一.rem的自适应原理 rem（font size of the r...
rem实现原理
weixin_43837268的博客
08-17 931
// 原始配置 function setRem () { let doc = document.documentElement let width = doc.getBoundingClientRect().width let rem = width / 75 doc.style.fontSize = rem + 'px' } // 监听窗口变化 addEventListener...
vue - 常见的移动端rem适配方案
qq_43886365的博客
05-05 3676
rem是一个相对单位。 是相对于根元素html的font-size宽度值。大多数浏览器默认字体宽度是16px(如果没有设置过)，也就是 1rem = 16px;
rem自适应布局用法及详解
热门推荐
前端~锋小张
04-26 1万+
对于很多新同学来说，rem还是比较熟悉而又陌生的， 熟悉呢是因为rem时常出现在耳边，陌生呢是因为又搞不清原理。今天咱们一起来弄清楚rem到底是怎么一回事！原理：css3规定：1rem的大小就是根元素&lt;html&gt;的font-size的值。通过设置 根元素&lt;html&gt;的font-size的大小，来控制整个html文档内的字体大小、元素宽高、内外边距等， ...
场景化分析rem布局原理
花森酱JioJio
10-03 5527
vue项目适配rem布局 rem的原理将物理像素px分为一百份，每一份就是1rem，例如当你的手机是苹果6s，物理像素是375px，那么转化成rem就是37.5px。插件设置html根标签的字体属性font-size变为1rem，通过转换将css中的px转换成对应的rem。当屏幕发生大小缩放的时候，更改html下的font-size的大小，就能实现了其他标签的大小距离也随比例缩放，达到rem自适应布局。 1）安装依赖 npm i lib-flexible postcss-px2rem --save 2）删
vue学习-vue的rem布局
qq_43368682的博客
09-02 274
vue的rem布局 rem就是以当前html的字体大小为一个单位，利用rem可以让页面使应不同屏幕宽度的机型。 rem.js 使用立即执行函数，在页面调整和dom加载完毕时，根据设计稿和现屏幕宽度换算出当前字体大小。 (function(){ function resize(){ var baseFontSize=100;//设计稿100px是1rem，750px-->7.5rem var designWidth=750;//设计稿宽度 var
vue使用rem适配
05-24
Vue使用rem适配可以通过以下步骤实现： 1. 在index.html中设置页面的基准字体大小，一般为16px： ```html <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My App</title> <style> html { font-size: 16px; } </style> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> ``` 2. 安装并引入postcss-pxtorem插件，该插件可以将CSS中的px单位自动转换为rem单位： ```sh npm install postcss-pxtorem -D ``` 3. 在项目根目录下创建postcss.config.js文件，并在其中配置插件： ```javascript module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 16, // 基准字体大小 propList: ['*'], // 需要转换的属性，*表示所有 minPixelValue: 2 // 最小转换单位的像素值 } } } ``` 4. 在vue.config.js中配置使用postcss: ```javascript module.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue: 16, propList: ['*'], minPixelValue: 2 }) ] } } } } ``` 5. 在CSS中使用rem单位，例如： ```css .container { width: 10rem; height: 6rem; font-size: 1.6rem; } ``` 以上就是Vue使用rem适配的步骤，这样可以根据设备的不同自动适配页面的大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值