前端自适应屏幕分辨率

常见的vw vh rem 的常规方法这里不做过多赘述

用css的缩放transform:scale(当前分辨率/标准尺寸)

适用按照标准设计图开发,避免使用vw vh rem 之类的单位

(function selfAdaption(_w, force = 0) {const Html = document.querySelector("html");const Body = document.querySelector("body");(function init() {//初始化执行一次,撑满整个屏幕Html.style.width = _w + "px";Body.style.width = _w + "px";Body.style.overflowX = "hidden";Body.style.overflowY = "auto";Html.style.transform = `scale(${Html.clientWidth / _w})`;Html.style.transformOrigin = "left top";})();if (force) {let time = null;//避免触发过于频繁,做节流function _j() {if (time) clearTimeout(time);time = setTimeout(() => {Html.style.transform = `scale(${Html.clientWidth / _w})`;time = null}, force);}window.onresize = function () {//监听全屏分辨率的变化_j();};}
})(800);//第一个参数是标准尺寸的宽度,接收一个number 第二个选传接收number,节流的时间,接收第二个参数后强制全屏撑满 鼠标滚轮缩放也不好用

前端自适应屏幕分辨率相关推荐

js自动缩放页面自适应屏幕分辨率
js自动缩放页面自适应屏幕分辨率欢迎使用Markdown编辑器欢迎使用Markdown编辑器当开发前端页面在分辨率1920的情况下,需要切换到小屏,有种方法是可以对屏幕比例进行缩放,通过css3 ...
字体大小自适应屏幕分辨率 CSS解决方案
字体大小自适应屏幕分辨率 CSS解决方案参考文章: (1)字体大小自适应屏幕分辨率 CSS解决方案 (2)https://www.cnblogs.com/love0618/p/4020752.htm ...
LabVIEW自适应屏幕分辨率缩放
文章目录前言一.子vi百度网盘自取二.子vi使用方法三.窗口大小设置四.总结前言在使用 LabVIEW进行上位机项目开发的时候软件的分辨率是根据我们所开发的电脑所决定的,但是当开发完的上 ...
Qt Creator软件界面配置——自适应屏幕分辨率
为了使Qt Creator软件自身界面自适应屏幕分辨率,需要对默认设置进行修改,否则不便于软件的使用. 修改内容如下图所示: 软件修改前后的对比如下两图所示:
js设置字体大小自适应屏幕分辨率
js可以通过 screen.width获取屏幕分辨率的大小. var conf_div = document.createElement('div'); //创建div conf_div.style. ...
vue数据大屏自适应屏幕分辨率js
vue数据大屏自适应屏幕分辨率js 最近在写vue数据大屏的时候想到屏幕分辨率要自适应问题,按照设计图的百分比写感觉太麻烦,宽高甚至字体大小都要用百分比,就在想有没有其他的方案能实现,相信都用过rem ...
H5自适应屏幕分辨率大小
说明: ①:H5自适应不同分辨率的设备,其实主要就一句 <meta name="viewport" content="width=device-width,init ...
cocos2d-x 2.0版本自适应屏幕分辨率 .
转载请注明来自:Alex Zhou的程序世界,本文链接:http://codingnow.cn/cocos2d-x/975.html 我使用的版本是cocos2d-2.0-x-2.0.4,cocos2 ...
NGUI自适应屏幕分辨率
一.当下移动设备的主流分辨率(数据来自"腾讯分析移动设备屏幕分辨率分析报告") 1.1 iOS设备的分辨率主要有: 宽高宽高比 960 640 1.5 1136 640 1.7 ...
linux qt程序窗口大小变化,Linux-Qt - 程序界面大小自适应屏幕分辨率
来源: http://blog.163.com/dingmz_frcmyblog/blog/static/2173040232013251021450/ 方法一:针对当前背景图片.控件坐标等等都已经提 ...

前端自适应屏幕分辨率

前端自适应屏幕分辨率相关推荐

最新文章

热门文章