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 1629
移动端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 8471
(function(doc, win) {     var docEl = doc.documentElement,         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',         recalc = function() {             var
Vue中750设计稿px自动转化成rem
xiamoziqian的博客
09-30 1916
一、下载 postcss-pxtorem 运行 npm install postcss-pxtorem 完成下载之后，在package.json文件中添加这段代码 "postcss": { // 新添加的 "plugins": { "autoprefixer": {}, "postcss-pxtorem": { "rootValue": 37.5, "propList": [ "*" ] } } }, "browserslis
设计稿750px 配置rem
酱子
08-01 3378
设计稿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 6895
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 2534
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 1349
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 331
使用 vue-cli 构建项目完成后，在index.html文件内添加如下代码： //兼容UC竖屏转横屏出现的BUG //自定义设计稿的宽度：designWidth //最大宽度:maxWidth //这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750) ; (function (designWidth, maxWidth) { var doc = document, w
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 2306
在vue项目中使用rem的完整步骤
移动端适配解决方案rem的js换算（非font-size:31.25vw,非font-size:62.5%）
xiasohuai的博客
11-11 835
在这之前做web app开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的宽高也是取平衡值写死，然后部分样式通过媒体查询来设置，例如背景图的多倍图、基础字体大小、图标宽高。 这样做的弊端很明显： 1. 做出来的页面在各种手机端看起来的物理大小（高度...
解决Rem的适配问题
asfasfaf122的博客
01-29 1869
关于Rem的适配问题
移动端顶部和底部做法
VanChaoi的博客
11-24 785
用户的的设备太宽会导致图片失真的做法: max-width 最大宽度 :当屏幕宽度大于等于750px的时候,body的宽度是750px,当屏幕宽度小于750px的时候,body的宽度和屏幕一样 body { width:100%; max-width:750px; margin:0 auto } 移动端顶部和底部固定定位的做法: .head { position:fixed; /*一般情况下,绝对定位和固定定位如果没有加便宜,还在原来的位置*/ width:100%; ..
初学者--bootstrap（一）--在路上（1）
小尾巴的梦
12-10 258
bootstrap： 是目前最受欢迎的前端框架，并基于HTML、CSS、JAVASCRIPT ，而且他是为了适应并兼容各个电子设备，是对媒体查询的封装。 1.so，什么是媒体查询呢？ 他是响应式布局的方法之一，使我们的网页适配于各种设备。 2..媒体查询的写法和格式？    思想：使用分割法分析和解决问题    （1）确认把屏幕分成几种样式 （1200px 900px 600px）
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、付费专栏及课程。

余额充值