在实际业务中，我们常用图表来做数据统计，数据展示，数据可视化等比较直观的方式来达到一目了然的数据查看，但在大屏开发过程中，常会因为适配不同屏幕而感到困扰，下面我们来解决一下这个不算难题的难题
废话不多说，先上图
[上传失败(image-6ca2f3-1648048125368)]
可以看到，我们通过等比例缩放的方式，实现了自适应，同时我们也为此发布了 vue 组件 v-scale-screen
v-scale-screen 使用css属性transform实现缩放效果，进行等比例计算，达到等比例缩放的效果，同时我们也支持铺满全屏，宽度等比，高度等比，等自适应方案
1、style 中设置竖屏时的屏幕处理 @media screen and (orientation:portrait)
@media screen and (orientation: portrait) {
/竖屏样式/
body {
transform-origin: 0 0;
transform: rotateZ(90deg) translateY(-100%);
}
}
2、在页面加载的时候，进行必要的页面宽高处理
forceLandscapeScreenHandle() {
const body = documentgetElementsByTagName('body')[0];
const html = documentgetElementsByTagName('html')[0];
const width = htmlclientWidth;
const height = htmlclientHeight;
const max = width > height width : height;
const min = width > height height : width;
bodystylewidth = max + "px";
bodystyleheight = min + "px";
}
三、注意事项
1、添加窗口变化的重新 宽高处理
onWindowSizeChanged() {
windowaddEventListener("resize", thisforceLandscapeScreenHandle)
}
2、为了页面的变化太多，可以设置屏幕的最大最小比例
<!-- 这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面-->
<!-- 目的是 让界面显示 更加适应 手机屏幕-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=10, maximum-scale=10, minimum-scale=10">
四、效果预览
五、实现步骤
这里构建 Vue 工程，可参见
Web 前端 之 Vue vue cli 环境的搭建简单整理（简单的一些注意事项）_仙魁XAN的博客-CSDN博客
1、打开 Vue 工程，在 public/indexhtml 中添加如下 meta 标签处理，屏幕比例的限制处理
<!-- 这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面-->
<!-- 目的是 让界面显示 更加适应 手机屏幕-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=10, maximum-scale=10, minimum-scale=10">
2、在 src/Appvue 中添加测试的内容
3、添加 style 样式，关键处理竖屏时的页面，相关如下
4、在页面加载进行 宽高处理
5、最后运行工程，效果如下
六、关键代码
1、public/Indexhtml
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta >
12px/36px:68px:block;
font;//将a设置为块级元素
widtha标签的CSS设置<pre t="code" l="css">a{
display
符
在Vue中，可以使用CSS属性`margin: 0 auto`来实现分辨率居中。首先，在Vue组件的样式部分添加`margin: 0 auto`，然后设置元素的宽度，最后设置`max-width`属性，将元素的最大宽度设置为屏幕宽度，即可实现居中。
前端的童鞋们可能会遇到这样一个问题，UI设计师给出了一套设计图，我们需要自适应各种屏幕，且各个元素的大小和字体大小也随之缩放。
看到这个需求，本人首先会想到之前的思路是媒体查询，检测不同范围的屏幕宽度，写不同的样式来改变排版，以适应pc、ipad和移动端等。
假设屏幕大于999px都属于pc端，pc 分为大屏超大屏，我们需要响应大屏到超大屏之间的适应，举个栗子：
例如：媒体查询 （屏幕999~1200 divtitle 都是 200px 宽，1200~1440。。。）
也就是说某个区间内，divtitle 的宽度是不变的，当然你要设成百分比也不是可变的，那字体是否也可变呢？想要实时响应字体大小和元素大小又该如何解决呢
这里我们可以使用一个插件，可以很轻松的解决掉这个实时响应等比缩放的问题： px2rem 插件。
安装
配置
需要结合 remjs 配置
到这里配置完成啦，看下效果
配置前
配置后
哇哦，是不是很简单，是不是很神奇，小伙伴们赶快试试吧 ~~
点赞 ~~ 转发 ~~
还有两款插件，分别为：
postcss-plugin-px2rem 和 postcss-pxtorem
postcss-plugin-px2rem 在 vueconfing 中常用配置为：
postcss-pxtorem 在 vueconfing 中常用配置为：
以上就是关于Vue 大屏自适应全部的内容，包括:Vue 大屏自适应、vue禁止横屏、vue 表如何设置自由控制高宽像Excel中一样自由控制高度和宽度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）