不同分辨率下页面自适应方法

于 2024-09-04 15:04:20 发布
阅读量339 收藏
点赞数 1
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46579829/article/details/141894260
版权

首先在utils文件下新建一个js文件命名为screenSize.js
在这里插入图片描述
然后在需要做自适应的页面文件中引入import {screenSize} from ‘@/utils/screenSize’
最外层div中用ref命名在这里插入图片描述
最后在mounted中使用该方法在这里插入图片描述
记得style中给login宽1920px,高1080px
在这里插入图片描述

风铭雪
关注
js实现自适应界面分辨率
日暮斜阳
09-19 1997
最近由于业务需求需要进行前端的开发，所以，最近更新一下前端开发中所遇到的问题。首先最直接遇到的问题是，如果我们在css中将div的width和height写死的话，那么我们所遇到的问题就是当换一个不同的分辨率的显示器进行显示的时候，那么就会出现界面的样式不能适应当前分辨率的界面，所以，自适应是很重要的，javascript提供了很多功能我们可以很好的使用，话不多说，直接上代码： <div&g...
封装一个页面自适应方法
vfjcgg的博客
06-03 368
在上述示例中，getPageSize 方法返回一个对象，包含了页面的宽度、高度、宽高比、以及是否为移动端、平板端或桌面端的标识。你可以根据这些信息在组件中动态调整页面的布局和样式。你可以将上述代码保存为一个单独的文件，例如 utils.js。然后在你的 Vue 组件中导入并使用该方法来获取页面的自适应信息。在 Vue 中，你可以封装一个页面自适应的方法来根据屏幕大小动态调整页面的布局和样式。
前端简单的数据可视化分辨率自适应js
07-02
用于web前端数据可视化分辨率自适应，将数据可视化内容包裹在#best-box div中，引入下载的js即可
js计算屏幕的分辨率，来完成移动端的页面自适应
.
01-26 5464
/* *代码如下 *其中的参数1080根据自己的实际情况进行修改，这里的1080代表设计页面的原始宽度，可以参考psd的标准宽度，这是后字体使用rem也有了标准，psd上的字号如：40点 对应css中的rem的换算方式为40/100=0.4rem。 */ (function (doc, win) { var docEl = doc.documentElement, resiz
关于js的屏幕分辨率适配
eric1984的专栏
10-17 2103
5、显示效果：默认js不做任何自适应的时候（位置和大小都是固定像素值），os放大控件大小时，os的控件都放大了，chrome全屏时自己做了自适应，保证不会超出屏幕。html的渲染区域变大了，html里面的字体放大了，相对位置变大了，但是屏幕分辨率不变，所以导致部分内容会超出屏幕范围，需要左右拖拽来显示。3、操作系统的控件大小伸缩：操作系统会在默认屏幕分辨率的基础上，做大小的伸缩，操作系统提供的控件会做伸缩的自适应：分辨率变大时，字体和控件会等比例放大。2、显示器分辨率 硬件的分辨率，不一定和大小正相关。
css判断不同分辨率显示不同宽度布局实现自适应宽度
12-13
随着发展，越来越多的电脑用户显示屏分辨率越来越高，但有的用户还是使用1024px的分辨率的显示屏（根据几个浏览器分辨率统计平台得到数据现在使用1200分辨率以下用户极少，但我们CSS布局时仍然需要至少考虑1024px...
jq设置页面多分辨率自适应 agent.js
10-01
jq设置页面多分辨率自适应，核心思想： function resize() { //window.screen.display=3; if(window.screen.display == 2) { resizeCenter();//居中模式，垂直填充 } else if(window.screen.display == 3) { ...
rem布局实现不同分辨率移动终端的自适应、整体缩放
08-16
REM布局是一种在Web开发中广泛使用的响应式设计技术，它能够帮助开发者实现页面在不同分辨率的移动设备上自适应显示，确保用户界面在各种屏幕尺寸下都能保持良好的可读性和视觉一致性。REM（Root Em）是以根元素...
css绝对定位如何在不同分辨率下的电脑正常显示定位位置？(一定要看！)
09-24
不同分辨率的显示效果差异显著，小分辨率设备会呈现出大分辨率页面的缩放效果。为了避免这种问题，设计师通常会创建一个“安全宽度”，例如1200px，确保内容在所有设备上居中显示。这样，即使分辨率变化，内容仍能...
js获取屏幕分辨率的方法
11-28
js获取屏幕分辨率的方法有利于div自适应窗口大小。
pyqt界面屏幕分辨率自适应_后台系统界面设计踩过的那些坑
weixin_42367233的博客
12-31 1169
源起由于之前曾经在后台系统开发公司工作过的缘故，所以有些后台管理系统界面的产出。后来虽然从那家公司离职，但也接到过一些后台界面设计和优化的项目，前前后后也快十来个了。这里想分享下一些关于后台界面设计的观点(tucao)。1，定义好表格规范强于为每个表格出设计稿表格是构成后台使用界面的重要组成之一，聚合了众多信息并提供操作入口。并且后台系统中一般会需要数量众多的表格。这种情况下如果每张表格...
js大屏自适应(附源码)
BelongPanda的博客
04-26 931
关于大屏自适应屏幕的一个方法，让元素保持原有的宽高比例 ，在屏幕居中显示。
高分辨率屏幕自适应适配
最新发布
懮俍的博客
07-18 227
【代码】高分辨率屏幕自适应适配。
Rem.js 适配不同分辨率终端设置
大灰狼的小绵羊哥哥的博客
09-02 3253
代码一 window.onload = function(){ /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是 为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/ getRem(720,100) }; window.onresize = function(){...
根据 JS 自动定义页面缩放比（根据分辨率进行适配）
weixin_33881050的博客
11-06 1732
2019独角兽企业重金招聘Python工程师标准>>> ...
【网页不同分辨率适配rem】
Shiki2147的博客
03-14 383
【网页不同分辨率适配rem】
使用jq写的普通1920*1080页面适配4k电视屏幕
w203_666的博客
06-13 317
写好的老页面jq兼容4k或以上高分辨率的方法-记录
不同屏幕、不同分辨率自适应
qq_42657934的博客
10-31 1136
这个方法可以通过缩放页面内容来适应不同的屏幕尺寸，但要注意的是，这种方法可能会导致图像和文本的模糊，因此需要谨慎使用。4、使用Grid布局： CSS Grid布局也提供了强大的自适应布局功能，可以根据网格的定义自动调整元素的位置和大小。根据不同的项目需求，可以选择其中一种或多种方法来实现自适应布局。3、使用Flexbox布局： Flexbox布局是一种强大的方法，可以实现灵活的布局，适应不同屏幕大小。6、Vue.js中的动态样式：在Vue.js中，可以使用动态绑定样式来根据组件的状态或属性来改变样式。
el-table不同分辨率自适应高度
02-22
el-table 是 Element UI 中的一个表格组件，它可以根据不同的分辨率自适应高度。下面是 el-table 不同分辨率自适应高度的介绍： 1. 固定高度：可以通过设置固定的高度来显示表格内容，不会根据分辨率变化而改变高度。这种方式适用于在页面中固定显示表格的情况。 2. 自适应高度：el-table 也支持根据父容器的高度自适应表格的高度。可以通过设置 height 属性为 '100%' 来实现自适应高度。这样表格会根据父容器的高度自动调整自身的高度，适用于需要表格随着页面大小变化而自动调整高度的情况。 3. 最大高度：可以通过设置最大高度来限制表格的高度，当表格内容超过最大高度时，会出现滚动条。可以通过设置 max-height 属性来实现最大高度的限制。这种方式适用于在有限的空间内显示大量数据的情况。 需要注意的是，以上方法都是通过设置 el-table 的属性来实现不同分辨率下的自适应高度。具体使用方法可以参考 Element UI 的官方文档或者相关教程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值