移动端 页面适配 原生js及lib-flexible 插件
1.js 原生
;(function(win, doc) {
change()
function change() {
var remSize = window.innerWidth / 7.5 || 50 /*设计稿是以width = 750px 为基准的*/
document.querySelector('html').style.fontSize = (remSize > 100 ? 100 : remSize) + 'px'
}
win.addEventListener('resize', change, false)
win.addEventListener(
'orientationchange',
change,
false
) /* 这个是移动端设备横屏、竖屏转换时触发的事件处理函数 */
})(window, document)
这个在vue项目中也可使用,直接在主入口文件index.html中写入,或者你可以将其封装为一个js方法,在mian.js文中引入
import 'XX.js' /必须放在最前面引入/
2.使用插件 lib-flexible
1.安装插件 lib-flexible
npm i lib-flexible --save
- 在main.js中 引入lib-flexible
等......
爱生活、爱编程!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!