Vue项目中750设计稿px自动转化成rem方法（小白一个，记录自己遇到的小白问题，大家勿怪）

最新推荐文章于 2023-01-29 13:25:29 发布
最新推荐文章于 2023-01-29 13:25:29 发布
阅读量1.9k 收藏 7
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TheDevil__/article/details/106278157
版权

一、首先下载 postcss-pxtorem

运行npm install postcss-pxtorem
完成下载之后，在package.json文件中添加这段代码

“postcss”: {
   
	“plugins”: {
   
		“autoprefixer”: {
   },
		“postcss-pxtorem”: {
   
			“rootValue”: 37.5, // 根元素大小1rem = 16px
			“propList”: [<
最低0.47元/天 解锁文章
TheDevil__
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端rem单位换算
肉多
11-20 1622
移动端px单位换算rem 1、第一种； 如果UI设计整体效果图的宽是750px,那我们写移动端计算rem值的时候就要先除以2，然后在除以10就是该元素的rem值 例如：20px = 20px/2/10=1rem; // 写移动端的时候rem单位换算px <meta name="viewport" content="width=device-width, initial-scale=1....
设计稿是750px时的,rem设置
Coding and Coding
08-09 1万+
<script> + function() { remLayout(); function remLayout() { var w = document.documentElement.clientWidth; w = w > 768 ? 76...
手机端设计稿640px和750px不同设计稿下，px值转化成rem值
Hferje的博客
01-08 8468
(function(doc, win) {     var docEl = doc.documentElement,         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',         recalc = function() {             var
Vue中750设计稿px自动转化成rem
xiamoziqian的博客
09-30 1914
一、下载 postcss-pxtorem 运行 npm install postcss-pxtorem 完成下载之后，在package.json文件中添加这段代码 "postcss": { // 新添加的 "plugins": { "autoprefixer": {}, "postcss-pxtorem": { "rootValue": 37.5, "propList": [ "*" ] } } }, "browserslis
设计稿750px 配置rem
酱子
08-01 3346
设计稿750px 配置rem 获取设备宽度 750 等于750 <320 等于320 设置字体大小 设备宽度/7.5 1rem=100像素 // 设计稿是750px // 设置1半的宽度，就是375px // 1rem == 100px的设计稿宽度 // 整个屏幕750px宽度7.5rem，屏幕一半的宽度375px就是3.75rem，100px等于1rem 调用 window.onresize = function(){ 调用 } function remSize() {
设计稿750px移动端自适应，100px=1rem
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
11-09 6893
var kk=document.documentElement.clientWidth; if(kk&gt;750){ kk=750 } document.documentElement.style.fontSize=kk/7.5+"px"
Vue项目自动转换 px 为 rem的实现方法
01-19
而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。 技术栈 vue-cli：使用脚手架工具创建项目。 postcss-pxtorem：转换px为rem的插件。 自动设置根节点...
vue打包的时候自动将px转成rem的操作方法
12-04
在Vue项目中，这一过程可以通过`px2rem-loader`和`lib-flexible`库来自动化完成。以下是对这个操作方法的详细说明： 首先，确保你的项目已经初始化并配置了Vue。接下来，我们需要安装必要的依赖包。 1. 安装`lib-...
vue3.0中使用postcss-pxtorem的具体方法
10-15
在Vue 3.0框架中，使用`postcss-pxtorem`是一个有效的方法，可以帮助开发者将CSS中的像素单位（px）转换为相对单位（rem），从而实现响应式布局，特别是在移动端设备上。`postcss-pxtorem`是一个PostCSS插件，它的...
Vue适配移动端，动态计算rem
林中明月间丶
07-30 2527
https://www.jianshu.com/p/3163bc9f7e47 //引入rem.js,在assets中创建rem文件夹引入： import rem from './assets/rem/rem' 或者直接在 index.html 下面加 <script></script>里(我就不引入了) (function (doc, win) { var ...
Vue中如何正确的使用rem适配移动端页面[手把手教]
qq_30378295的博客
07-24 1337
rem介绍 rem（font size of the root element）是指相对于根元素的字体大小的单位 使用方法 /*浏览器中html font-size默认值为16px,*/ div{ width: 3rem; /*48px*/ height: 3rem; /*48px*/ } 因此只要计算html的font-size rem能等比例适配所有分辨率屏幕 (rem的俩种计算方式JS与CSS) 进入主题 计算尺寸参照的标准尺寸 750px rem布局换算1rem=100px，设计图上1
vue 项目使用 rem 布局
qq_38796823的博客
04-06 327
使用 vue-cli 构建项目完成后，在index.html文件内添加如下代码： //兼容UC竖屏转横屏出现的BUG //自定义设计稿的宽度：designWidth //最大宽度:maxWidth //这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750) ; (function (designWidth, maxWidth) { var doc = document, w
vue中rem适配方案
lb191258514的博客
05-18 561
解决vue移动端适配问题 目标一 、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了vw，对，就是这个意思；——最大程度在各个尺寸屏幕上还原设计稿 目标二、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；——最大程度减少工作 1.下载postcss-pxtorem工具包 postcss-pxtorem: postcss的一个插件，主要是帮你把px转换成对应的rem； 然后：还要用js代码去动态算根目录应该有
VUE当中移动端的rem设置 使用px2rem
HarryHY的博客
09-11 992
安装px2rem的依赖 npm install px2rem-loader --save-dev 在你的index.html部分 <script> (function (n, e) { var t = n.documentElement, i = "orientationchange" in window ? "orientationchang...
在vue项目中使用rem的完整步骤
YY的博客
12-30 2302
在vue项目中使用rem的完整步骤
移动端适配解决方案rem的js换算（非font-size:31.25vw,非font-size:62.5%）
xiasohuai的博客
11-11 828
在这之前做web app开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的宽高也是取平衡值写死，然后部分样式通过媒体查询来设置，例如背景图的多倍图、基础字体大小、图标宽高。 这样做的弊端很明显： 1. 做出来的页面在各种手机端看起来的物理大小（高度...
解决Rem的适配问题
asfasfaf122的博客
01-29 1857
关于Rem的适配问题
移动端顶部和底部做法
VanChaoi的博客
11-24 784
用户的的设备太宽会导致图片失真的做法: max-width 最大宽度 :当屏幕宽度大于等于750px的时候,body的宽度是750px,当屏幕宽度小于750px的时候,body的宽度和屏幕一样 body { width:100%; max-width:750px; margin:0 auto } 移动端顶部和底部固定定位的做法: .head { position:fixed; /*一般情况下,绝对定位和固定定位如果没有加便宜,还在原来的位置*/ width:100%; ..
vue cli3中使用postcss-pxtorem进行适配(亲测有效!)
热门推荐
JunRoyal
05-13 1万+
温馨提示：对行内样式无效喔~ 下载依赖 npm install postcss-pxtorem -D postcss.config.js module.exports = { plugins: { // 兼容浏览器，添加前缀 autoprefixer: { overrideBrowserslist: [ "Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 3
如何在Vue项目中配置postcss-pxtorem插件？
最新发布
01-17
在Vue项目中配置postcss-pxtorem插件的方法如下： 1. 首先，确保你的Vue项目已经安装了postcss和postcss-pxtorem插件。如果没有安装，可以使用以下命令进行安装： ```shell npm install postcss postcss-pxtorem --...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值