首页 > 其他分享 >移动端 页面适配 原生js及lib-flexible 插件

移动端 页面适配 原生js及lib-flexible 插件

时间:2024-03-21 22:01:20浏览次数:29  
标签:remSize 插件 lib 适配 js flexible change

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
    等......

标签:remSize,插件,lib,适配,js,flexible,change
From: https://www.cnblogs.com/liliuyu/p/18088333

相关文章

  • 插件-js实现动态时钟效果
    <divid="updatetime"></div>constupdateTime=()=>{varnow=newDate();varyear=now.getFullYear();varmonth=now.getMonth()+1;//getMonth()返回0-11varday=now.getDate();varhours=now.getHour......
  • 用户界面插件
    用户界面插件使用用户界面插件,可以将附加功能添加到StableDiffusionUI的用户界面中。注意:插件尚未经过恶意代码审查。请仅使用您信任的插件。安装插件如果插件描述中没有另外说明,请右键单击插件链接并将插件保存到C:\EasyDiffusion\plugins\ui(或分别安装到的驱动器)。文件......
  • python statlic lib embedding
    pythonstaticlib因为默认没有编译内置库,因此需要配置setup.local文件,把内置库编译到staticlib。参考:https://wiki.python.org/moin/BuildStatically。(./configure--disable-shared即可)注意是Setup.local,不是Setup.dist*static*#GNUreadline.UnlikepreviousPythoni......
  • 魔兽世界LUA插件开发与示例
    魔兽世界LUA插件开发1.创建插件1.1创建插件文件夹打开WorldofWarcraft\Interface\AddOns文件下,在该文件夹下创建一个插件名文件夹用来存放插件,如Makubex1.2创建插件文件在该文件夹下创建俩个文件,一个是用来给魔兽世界引入的toc头文件,一个是你自己的lua脚本文......
  • vue项目中使用html2canvas插件
    一、生成海报图vue项目中使用html2canvas插件,实现将编写的html代码转成可以保存的图片,只需要以下四步。1、在vue项目中安装插件npmihtml2canvas 2、在需要使用到的页面引入html2canvas插件importhtml2canvasfrom“html2canvas”; 3、按照设计图编写html代码<d......
  • chrome拓展-chrome插件-强制copy
    方法:浏览器扩展最简单也是最省事的方法,直接安装解除复制限制的扩展完事儿。下面推荐两款扩展:SimpleAllowCopy:Chrome&Edge(Chromium系的应该都可以)AbsoluteEnableRightClick&Copy:Chrome&Edge&Firefox使用方法也很简单,在有复制限制或者右键限制的网站上,点击扩展......
  • hashlib模块
    hashlib模块importhashlib一堆加密算法的集合体,哈希算法的加密方式不止一种哈希算法也叫摘要算法,相同的数据始终得到相同的输出,不同的数据得到不同的输出。哈希将不可变的任意长度的数据,变成具有固定长度的唯一值字典的键和集合的值是通过哈希计算存储的,存储的数据......
  • VsCode中高效书写Vue3代码的插件
    Vue-Official(原Volar)就是原先的Volar,现已弃用。Vue-Official提供的功能:语法高亮:Vue-Official扩展可以为Vue单文件组件(.vue文件)中的HTML、CSS和JavaScript部分提供语法高亮,使代码更易于阅读和编写。代码片段:Vue-Official扩展提供了丰富的Vue.js相关的......
  • 得嘞,分页插件PageHelper返回记录总数total竟然出错了!
    问题描述分页返回的记录总数total和每页数量pageSize一致,数据库统计的数量大于当前返回的总记录数total,以下是相关代码问题分析sql错误导致返回信息有误?检查结果:经过数据执行日志中生成的sql,sql正常并且数据总条数也正确PageHelper使用方式错误,导致数据错误检查结果:通过与......
  • Photoshop2024(PS)和Lightroom(LR)设计的智能磨皮插件Portraiture下载
     打造完美肤质,PortraiturePS/LR专用智能磨皮插件让你的照片焕发魅力副标题:让你的照片告别粗糙皮肤和毛孔,展现自然细腻的肤质在摄影后期处理中,给照片进行磨皮和肤质优化是一项必不可少的步骤。而今天,我们为你带来了一款专为Photoshop(PS)和Lightroom(LR)设计的智能磨皮插件——......