PC端页面适配px转rem

rem是相对长度单位，页面布局需要在不同比例的pc端显示同样大小的页面，不希望在分辨率比较高的屏幕上页面就很小。
一般设计稿都是px单位，在开发的时候也会用到px单位。如果在开发前，可以利用vscode的cssrem插件边写边转化。如果是开发完成了，则需要用postcss-pxtorem插件将px单位转化成rem单位。具体操作如下：
1、在 Vue 项目的 src 文件夹下创建一个 config 文件夹：
2、在 config 文件夹中创建 rem.js：
3、将以下代码复制到 rem.js 中

const baseSize = 32
// 设置 rem 函数
function setRem () {// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。const scale = document.documentElement.clientWidth / 750// 设置页面根节点字体大小document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {setRem()
}

4、在 src 文件夹下的 main.js 中引入：

import './config/rem'

5、在 Vue 项目根目录终端引入：

npm install postcss-pxtorem

6、在 Vue 项目文件夹下的 postcss.config.js 中加入：

module.exports = {plugins: {autoprefixer: {},"postcss-pxtorem": {"rootValue": 16,"propList": ["*"]}}
}

如果运行报错，则看看是否postcss-pxtorem安装完成，有时候会显示版本问题，只需要指定版本安装即可：

npm install postcss-pxtorem@5.1.1

此外，如果要让有些属性不转化，则写成Px;

PC端页面适配px转rem相关推荐

pc端rem适配_聊聊PC端页面适配
目前pc并没有像移动端那样,可以用rem单位这种一站式解决方案,因为pc需要考虑低级浏览器,媒体查询和background-size这些新属性都不能用. 设计稿:1920/(1080-190) = 2 ...
一段代码把PC端页面适配手机端
在PC端的代码中加入这段代码,及实现手机端页面的自适应,是个人目前觉得最好用的方法! <script type="text/javascript"> ...
手机端与pc端页面html5,浅谈pc和移动端的响应式的使用
身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下: 1.响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的. 自适应是最早 ...
python四大软件-传智播客解析Python之移动端页面适配四大方式
前端在制作移动端页面时,会碰到适配各种手机屏幕的问题,而且还包括平板电脑,这么多种分辨率的屏幕,如何做到适配呢?传智播客为此总结了四种方式,具体如下: 传智播客解析Python之移动端页面适配四大方式 ...
PC端页面调用QQ聊天 - 封装篇
PC端页面调用QQ聊天 - 封装篇今天收到网页留言,说因为兼容性的问题,他提供了有新的调用QQ代码的方式. 这里苏查了一下别人的源码,研究学习了一下.剥离贴出来,供大家参考学习. 来自用户tyj10 ...
PC端页面在手机端完整显示
PC端页面在手机端完整显示页面最后生效的是最后加载的,通过$.load加载的页面内的<meta name="viewport">会覆盖父页面的<meta nam ...
oracle里子连接查询,pc端页面滚动到底部加载更多数据......
场景:pc端页面鼠标滚动到底部时,通过ajax加载更多的数据,实现分页功能,封装成了一个函数,自己根据实际情况调用即可. 说明:discussList是放加载内容的div容器 // 加载更多评价的函数 ...
pc端页面在移动端等比例缩放
pc端页面在移动端等比例缩放两步: 1.替换head标签内 name="viewport"的 meta标签  <met ...
css pc和mobile,初识pc端和mobile端CSS适配利器—vw+rem+CSS locks
前言大概五月份的时候,我下定决心写自己的博客系统,于是断断续续花了近一个月的时间琢磨Nestjs,写完了接口部分.六月份因为工作的原因就搁置了,说来也惭愧,直到九月中旬,才将它拾起.半个月后,后台部 ...

PC端页面适配px转rem

PC端页面适配px转rem相关推荐

最新文章

热门文章