首页 > 其他分享 >js自动缩放页面自适应屏幕分辨率

js自动缩放页面自适应屏幕分辨率

时间:2024-01-16 13:44:43浏览次数:33  
标签:body style 缩放 分辨率 js window document 页面

1. 简单版:

s = window.screen.width / 1920;
document.body.style.zoom = s;

2. 当开发前端页面在分辨率1920的情况下,需要切换到小屏,有种方法是可以对屏幕比例进行缩放,通过css3属性transform可以自适应屏幕分辨率大小

var s;
function resize() {
  s = window.screen.width / 1920;
  document.body.style.transformOrigin = '0 0';
  document.body.style.transform = 'scale(' + s + ',' + s + ')';
  document.body.style.width = window.innerWidth / s + 'px';
  document.body.style.height = window.innerHeight / s + 'px';
}
window.onresize = function () {
  resize();
}
resize();

  

标签:body,style,缩放,分辨率,js,window,document,页面
From: https://www.cnblogs.com/sishahu/p/17967483

相关文章

  • 《nodejs安装篇》nodejs卸载及重装
    参考链接:https://blog.csdn.net/strawberry_x/article/details/113648770?spm=1001.2014.3001.5501卸载首先在控制面板的程序中卸载nodejs然后删除这两个文件夹然后检查是否有一下文件夹,若有,就删除c://user/xxx/node_modelsc://ProgramFiels/nodejsc://user/xxx/AppData/......
  • 《nodejs安装篇》nodejs安装windows详细版
    参考链接:https://www.cnblogs.com/feiye512/p/12539306.html安装1、下载安装包下载地址:https://nodejs.org/zh-cn/download/根据自己电脑系统及位数选择,我这里选择windows64位.msi格式安装包.msi和.zip格式区别:1、.msi是Windowsinstaller开发出来的程序安装文件,它可以让你......
  • 《nodejs新建篇》nvm安装
    参考链接:https://www.cnblogs.com/jing-tian/p/11225123.html介绍nvm是node.js的版本管理工具,可以运行在多种操作系统上。nvmforwindows是使用go语言编写的软件。我电脑使用的是Windows操作系统,所以我要记录下在此操作系统上nvm的安装和使用。下载nvm-windows最新下载......
  • 《nodejs安装篇》nodejs安装
    安装参考链接:https://www.runoob.com/nodejs/nodejs-install-setup.html本安装教程以Node.jsv4.4.3LTS(长期支持版本)版本为例。Node.js安装包及源码下载地址为:https://nodejs.org/zh-cn/download/。你可以根据不同平台系统选择你需要的Node.js安装包。Node.js历史版......
  • 《nodejs概念篇》ES6
    ES6简介参考链接:https://www.cnblogs.com/itzlg/p/11854386.htmlECMAScript6.0(简称ES6),是JavaScript语言的下一代标准。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。es6入门文档:http://caibaojian.com/es6/ES6的新特性参考链接:https://w......
  • 解决 Idea HttpClient 无法读取 http-client.env.json 配置的问题
    前言byd就我遇到了这种情况是吧,百度搜的全是nm复制粘贴的垃圾文章步骤创建一个.http文件,使用idea工具栏创建一个env.json,内容无所谓按理说现在应该就能正常使用了,但是如果到这一步还没法读取到这个环境的话,继续向下看右键env.json看看有没有这个,如果没......
  • easyui datebox 周选择器 结合moment.js获取一周的时间范围
    项目里用的easyui,用weekpicker的话需要与easyui代码有冲突会导致页面报错,所以直接改造一下easyui的datebox实现这一功能1<inputtype="text"class="easyui-datebox"data-options="formatter:myformatter,parser:myparser,onSelect:onSelect"id="S_Week">1......
  • vue入门页面,搭建localhost官方默认页面
    按照提示操作可以做出下图效果:idea中的vue目录层级为:1.下载node.js(nodes.js是前端的运行环境,类似于后端中的jdk,没有node.js后续操作无法进行,具体流程百度)2.新建文件夹(这个文件夹就是你之后vue的目录)点进去新建的文件夹3.输入cmd回车4.输入命令:npmconfigsetreistryht......
  • JSON注解自定义格式解析
    在SpringBoot中,你可以通过自定义注解来格式化或转换属性值。以下是一个示例代码,演示如何实现这个过程:首先,定义一个注解@CustomFormat,用于标注需要格式化或转换的属性。该注解可以包含一个参数,用于指定格式化或转换的方式。importjava.lang.annotation.*;@Target(ElementType......
  • js对象属性名表达式
    let propKey='foo'; let obj={  [propKey]:true,  ['a' +'bc']:123};通过先定义变量,在字面量对象中添加属性时,属性名为变量时加上中括号包裹,也可以为表达式来表示......