移动端 页面适配 原生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

  1. 在main.js中 引入lib-flexible
    等......
posted @ 2024-03-21 21:54  打个大大西瓜  阅读(76)  评论(0编辑  收藏  举报