移动端配置好后做pc端将px转成了rem这样做pc对开发来说很不友好如何更改

最新推荐文章于 2023-10-10 10:59:42 发布
最新推荐文章于 2023-10-10 10:59:42 发布
阅读量659 收藏
点赞数
分类专栏： 配置 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jjw_zyfx/article/details/101780778
版权
前端 同时被 2 个专栏收录
296 篇文章 0 订阅
订阅专栏
配置
50 篇文章 0 订阅
订阅专栏 
做移动端postcss-px2rem需要安装此插件但是有一种需求是公司让现在做pc端但是不想更改重新搭建环境以免以后重新做移动端后再重新搭建环境，这样来回换，比较麻烦，那么做pc端时如何避免移动端px转rem呢

一种解决方法就是，写px的时候讲所有的px都转成大写即PX即可

 

jjw_zyfx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE PC端项目px转为rem适应屏幕
张杰伦的博客
11-05 484
安装lib-flexible和postcss-pxtorem，这两个版本亲测可用 npm install --save autoprefixer@^9 npm install postcss-pxtorem@5.1.1 在main.js中引入 import 'lib-flexible/flexible' 修改node_modules中的lib-flexible/flexible文件中 原来的是适配移动端，修改为下面这样 function refreshRem(){ var w
PC端页面适配px转rem
sch695241721的博客
08-04 1776
rem是相对长度单位，页面布局需要在不同比例的pc端显示同样大小的页面，不希望在分辨率比较高的屏幕上页面就很小。 一般设计稿都是px单位，在开发的时候也会用到px单位。如果在开发前，可以利用vscode的cssrem插件边写边转化。如果是开发完成了，则需要用postcss-pxtorem插件将px单位转化成rem单位。具体操作如下： 1、在 Vue 项目的 src 文件夹下创建一个 config 文件夹： 2、在 config 文件夹中创建 rem.js： 3、将以下代码复制到 rem.js 中 const
手机端的屏幕自适应(一)
weixin_30674525的博客
11-28 194
通过rem布局 只要引入这个代码： (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { ...
flexible.js适配pc端、移动端并自动将px转换rem 或者PC端px自动转vw
xiaoqin5的博客
10-10 1766
flexible.js适配pc端、移动端并自动将px转换rem 或者PC端px自动转vw
vue项目px自动转rem适用于pc端
weixin_46175155的博客
08-17 1683
vue项目px自动转rem适用于pc端 第一步 首先安装：autoprefixer postcss-pxtorem lib-flexible 三个依赖 npm cnpm yarn 都可以 postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位 安装命令： npm install postcss-pxtorem -D lib-flexible是淘宝团队总结出来的移动端弹性布局适配方案 Autoprefixer是一款自动管理浏览器前缀的插件，可以解析css文件并且添加前
html pc端能用rem吗,web开发是用px还是rem
weixin_32192681的博客
06-28 3064
px是用于固定尺寸的单位，多用于pc端页面；而rem是一个相对于html根元素的单位，适合用于简单的移动端页面。在项目中还是要根据具体开发要求来选择最适合的长度单位在前端开发中，CSS中的长度单位是必不可少的，因为在CSS中的众多属性都需要依赖长度单位来显示各种页面元素及效果，接下来将在文章中为大家具体介绍两种常用的长度单位rem和px,希望对大家有所帮助【推荐课程：CSS教程】pxpx意为像素，...
移动端适配 使px自动转换rem
12-14
先安装postcss-pxtorem： npm install postcss-pxtorem –save-dev 进行安装 通过屏幕的变化，设置动态根元素 font-size ：   我写在vue的html中 function setRem () { let htmlWidth = document....
gulp-px2rem-plugin：将px转换成rem
02-03
用rem来做响应式开发的时候，将px转换成rem值的时候，是每一个程序员头大的事情。 起初，我使用sublime的cssrem插件，效果挺好，避免了我重复使用小学学习的除法技能。但是，我们能感知的长度大小，还是可以，全部...
vue打包的时候自动将px转成rem的操作方法
12-04
在前端开发中，为了实现移动端适配，常常需要将像素单位（px）转换为相对单位（rem）。在Vue项目中，这一过程可以通过`px2rem-loader`和`lib-flexible`库来自动化完成。以下是对这个操作方法的详细说明： 首先，...
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
安装它：`npm i px2rem-loader -D`，然后在`vue.config.js`中配置，将.css文件通过`px2rem-loader`转换，指定`remUnit`，如`75`，代表1rem等于75px。 ```javascript module.exports = { chainWebpack: config => {...
移动端前端项目px自动转换为rem
weixin_34260991的博客
12-11 729
注：不转换的px用大写PX代替 复制代码lib-flexible 作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备 安装：cnpm i lib-flexible --save 引入：入口文件main.js中：import 'lib-flexible/flexible' 安装：cnpm install px2rem-lo...
rem移动端适配时 pc端也要能够正常显示
hzxOnlineOk的博客
12-12 773
rem移动端适配下可能会出现这种情况，即，由于移动端h5我们通过js设置了html的font-size会根据dpr（设备像素比）大小而自适应变化，但是pc端的font-size固定是12px 这时就可能会出现pc端由于整个项目都是由rem作为单位的，移动端html的font-size都很大，在100px左右，而pc则是12px 下面贴上移动端适配代码，此段代码放在index.html中： ...
vue实现自适应和px转rem
一个超爱喝可乐的web前端攻城狮
06-08 1178
vue实现自适应和px转rem 1,安装依赖 安装阿里可伸缩布局依赖lib-flexible npm i lib-flexible -S 安装px转rem依赖px2rem npm install px2rem-loader -s 2,在main.js中引入 3,因为依赖中当屏幕宽度大于540后，width固定写死了，需要修改依赖文件lib-flexible/flexible.js 改成width 4,完成rem即可进行布局 5,px布局到页面展示为rem 在vue项目中build下的 utils.j
前端怎么把px单位换成rem单位解决项目页面适配问题
热门推荐
qq_920189602的博客
10-20 1万+
使用案例简单明了说明怎么把px单位换成rem单位，达到适配使网页自适应，简要说明rpx、px、rem、em的区别
react使用 postcss-px-to-viewport 适配移动端px或者pc端自动转vw
刻痕
01-14 7050
react使用 postcss-px-to-viewport 适配移动端px或者pc端自动转vw
uniapp尺寸单位 px转rpx
hnyanzijun1的博客
07-16 1万+
uniapp尺寸单位 uni-app 支持的通用 css 单位 包括 px、rpx px即屏幕像素 rpx即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大，但在APP端和H5端屏幕宽度达到960px时，默认按照 375px 的屏幕宽度进行计算，具体配置参考：rpx计算配置。 rpx计算配置 uni-app屏幕基准宽度 uni-app规定屏幕基准宽度为750rpx 开发者可以通过设计稿基准宽度计算页面元素 rpx
数据可视化大屏适配方案（vue+px2rem）
Refuelefforts的博客
02-22 657
转载自[数据可视化大屏适配方案（vue+px2rem）]老哥ID为：专注数据可视化 (https://blog.csdn.net/lemon_0227/article/details/112977711) 配置前沿 项目构建：基于vue-cli3构建，使用postcss-px2rem px2rem-loader进行rem适配 实现原理：每次打包，webpack通过使用插件postcss-px2rem，帮我们自动将px单位转换成rem单位 前方有坑：UI框架部分组件使用JavaScript将css作为内联样式
PC端与移动端的适配->rem
qq_31313939的博客
03-23 696
PC端与移动端的适配->rem 使用方式 在html页面开头，引入下面的原生js代码： (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', r...
pc端 移动端 适配 rem
weixin_53461605的博客
09-11 555
3:右侧配置区域,向下拉菜单->px转换为rem比例,填写您设置好的比例值(例如,您的设计稿宽度是375px，您在flexible.js分为10份那么就是375/10 = 37.5px)node_modules下lib-flexible下flexible.js。1:打开HBulderX->工具->设置。中引入lib-flexible。
pc端px可以转换成rem吗
最新发布
03-06
是的，PC端的px可以转换成rem单位。px是像素单位，而rem是相对于根元素（通常是html元素）字体大小的单位。通过设置根元素的字体大小，可以实现px到rem的转换。 具体的转换公式为：rem = px / 根元素的字体大小 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值