vue移动端使用rem适配手机

比较懒,不喜欢引入,所以直接在main.js里加一些代码

定义方法

function setRem() {
    var whRk = 100 / 750; // 表示750的设计图,使用100PX的默认值
    var bodyWidth = document.body.clientWidth; // 当前窗口的宽度
    var rem = bodyWidth * whRk; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
    document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
}
window.addEventListener('load', setRem);
window.addEventListener('resize', setRem);

在mounted里使用方法

new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>',
    mounted() {
        setRem();
    }
})
Vue移动端使用Element UI进行适配rem时,主要是为了保证组件的尺寸在各种屏幕大小下都能自适应。以下是一些步骤和注意事项: 1. **引入依赖**:首先,在项目中安装Element UI,然后在main.js或其他入口文件中引入并注册它。 ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 2. **设置全局样式**:为了基于设备像素比(dpr)动态计算rem值,你可以创建一个自定义的`px2rem`函数,将px转换为rem,并应用到全局样式表或Vue的根组件上。 ```javascript const px2Rem = (value, basePx) => { // 假设basePx为设计稿的像素基础,比如750px return value / basePx * document.documentElement.getBoundingClientRect().width / window.devicePixelRatio; }; Vue.config.productionTip = false; Vue.prototype.$px2rem = px2Rem; ``` 3. **CSS rem单位**:在编写Element UI的CSS时,尽量使用相对单位(如`rem`),而不是绝对单位(如`px`)。例如,修改Element UI组件的宽度、高度等属性: ```css .el-button { width: ${this.$px2rem(160)} !important; /* 按照设计稿160px */ } ``` 4. **响应式布局**:利用Element UI提供的响应式布局工具,如栅格系统(`el-row`, `el-col`),配合媒体查询调整布局。 5. **测试**:在实际项目中,确保在不同分辨率和设备上测试组件的显示效果,对需要特别处理的地方进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值