web前端|js教程
vue
web前端-js教程
本篇文章给大家带来的内容是关于vue如何使用rem进行移动端屏幕适配（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
爱情表白网站源码,ubuntu服务端,python爬虫获取小说,php 代码 < php,sigua seo comlzw
要想移动端适配 并使用 rem 您需要先看这篇文章，配置好less就可以使用rem了
php 旅游门户网站源码,ubuntu设备空间不够,tomcat有守护进程吗,爬虫组档案,对数组逆向排序php,霸王seolzw
如果项目已经开发的差不多了，没有用到rem 又要使用rem，您用这招。
活动场地预定网站源码,ubuntu没有终端切换,tomcat日志是哪个文件,发卡网爬虫,saas技术架构php交流,外贸seo作用lzw
postcss-pxtorem：转换px为rem的插件
安装postcss-pxtorem
npm install postcss-pxtorem --save
新建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()// 改变窗口大小时重新设置 remwindow.onresize = function () { setRem()}
并引用进main.js文件内
import ./rem
修改.postcssrc.js文件
在.postcssrc.js文件内的plugins 添加以下配置，配后就可以在开发中直接使用px单位开发了
"postcss-pxtorem": {"rootValue": 32,"propList": ["*"] }
helloworld.vue
test
export default { name: HelloWorld, data() {return { msg: Welcome to Your Vue.js App} } } .hello { text-align: center; font-size: 20px; width: 300px; height: 400px; background:red; }
效果
如果觉得《vue如何使用rem进行移动端屏幕适配(code)》对你有帮助，请点赞、收藏，并留下你的观点哦！
