精华内容
下载资源
问答
  • 根据浏览器屏幕大小高度自适应
  • 将document.body.clientWidth赋值给data中自定义的变量 data:{ screenHeight: document.body.clientHeight } 第二步: 在页面mounted时,挂载window.onresize方法 mounted () { const that = this window.onresize =...

    网页可见区域宽:document.body.clientWidth

    网页可见区域高:document.body.clientHeight

    网页可见区域宽:document.body.offsetWidth (包括边线的宽)

    网页可见区域高:document.body.offsetHeight (包括边线的宽)

    第一步: 将document.body.clientWidth赋值给data中自定义的变量

    data:{ screenHeight: document.body.clientHeight }

    第二步: 在页面mounted时,挂载window.onresize方法

    mounted () {

    const that = this

    window.onresize = () => {

    return (() => {

    window.screenHeight = document.body.clientHeight

    that.screenHeight = window.screenHeight

    })()

    }

    }

    第三步: 监听screenWidth属性值的变化,打印并观察screenWidth发生变化的值

    watch: {

    screenHeight (val) {

    // 为了避免频繁触发resize函数导致页面卡顿,使用定时器

    if (!this.timer) {

    // 一旦监听到的screenWidth值改变,就将其重新赋给data里的screenWidth

    this.screenHeight = val

    this.timer = true

    let that = this

    setTimeout(function () {

    // 打印screenWidth变化的值

    console.log(that.screenHeight)

    that.timer = false

    }, 400)

    }

    }

    }

    第四步: 在元素上赋值

    ....

    版权声明:本文为CSDN博主「云凝汐辰」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

    原文链接:https://blog.csdn.net/qq_39865491/java/article/details/88050596

    展开全文
  • Vue 实现大屏页面屏幕自适应

    千次阅读 2020-12-22 02:48:33
    app.Vue 在mounted函数引入 import {pageResize} from './utils/resetScreenSize' export default { name: 'App', data(){ return{ } }, mounted(){ pageResize(); console.log('pageResize'); } } 组件中样式 ...

    1. 在配置文件设置大屏设计的尺寸1920*1080

    //appConfig.js

    export default{

    screen:{

    width:1920,

    height:1080,

    scale:20

    }//大屏设计宽高

    }

    2. 定义resetScreenSize.js

    import appConfig from '../config/base'

    export function pageResize(callback) {

    let init = () => {

    console.log(window.innerHeight + "," + window.innerWidth);

    let _el = document.getElementById('app');

    let hScale = window.innerHeight / appConfig.screen.height;

    let wScale = window.innerWidth / appConfig.screen.width;

    let pageH = window.innerHeight;

    let pageW = window.innerWidth;

    let isWider = (window.innerWidth / window.innerHeight) >= (appConfig.screen.width / appConfig.screen.height);

    console.log(isWider);

    if (isWider) {

    _el.style.height = window.innerHeight+'px';// '100%';

    _el.style.width = pageH * appConfig.screen.width / appConfig.screen.height + 'px';

    _el.style.top='0px';

    _el.style.left=(window.innerWidth -pageH * appConfig.screen.width / appConfig.screen.height)*0.5+'px';

    console.log(_el.style.width + "," + _el.style.height)

    }

    else {

    _el.style.width = window.innerWidth+'px';// '100%';

    _el.style.height = pageW * appConfig.screen.height / appConfig.screen.width + 'px';

    _el.style.top= 0.5*(window.innerHeight-pageW * appConfig.screen.height / appConfig.screen.width)+'px';

    _el.style.left='0px';

    console.log(_el.style.height);

    console.log(_el.style.top);

    }

    document.documentElement.style.fontSize = (_el.clientWidth / appConfig.screen.scale) + 'px';

    }

    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

    window.addEventListener(resizeEvt, init, false);

    document.documentElement.addEventListener('DOMContentLoaded', init, false);

    init()

    }

    3 使用方式

    main.js 引入

    import appConfig from './config/base.js';

    Vue.prototype.appConfig=appConfig;

    app.Vue  在mounted函数引入

    import {pageResize} from './utils/resetScreenSize'

    export default {

    name: 'App',

    data(){

    return{

    }

    },

    mounted(){

    pageResize();

    console.log('pageResize');

    }

    }

    组件中样式 lang="stylus"

    .mc{

    display :flex;

    flex-direction :column;

    align-content :center;

    justify-content :center;

    display: flex;

    flex: 1 1 auto;

    flex-direction: column;

    padding:(15/96)rem;

    }

    .leftC{

    width :(410/96)rem;

    }

    .centerC{

    width :(1060/96)rem;

    }

    .rightC{

    width :(450/96)rem;

    }

    其中 96为 配置文件中1920/20得来,这样不用在进行各种换算了

    展开全文
  • vue项目自适应屏幕和浏览器

    千次阅读 2020-12-24 17:26:28
    1.安装依赖npm i lib-flexible -Snpm i px2rem-loader -D2.在src文件夹下新建utils文件夹,在utils文件夹下新建flexible.js,其代码如下(function() {// flexible.cssvar cssText ='' +'@charset "utf-8";...

    1.安装依赖

    npm i lib-flexible -S

    npm i px2rem-loader -D

    2.在src文件夹下新建utils文件夹,在utils文件夹下新建flexible.js,其代码如下

    (function() {

    // flexible.css

    var cssText =

    '' +

    '@charset "utf-8";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-overflow-scrolling:touch}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:transparent}body,html{font-family:"Microsoft YaHei",sans-serif,Tahoma,Arial}article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}

    展开全文
  • vue屏幕长宽自适应

    千次阅读 2020-08-25 14:47:08
    vue 自适应屏幕的宽高度 通过定义属性进行双向绑定改变body的高度,watch监测窗口大小变化时触发,改变属性值达到预期效果,代码贴上 <template> <div class="bgColor" :style="'height:'+full...

    vue 自适应屏幕的宽高度

     

    在这里插入图片描述
    通过定义属性进行双向绑定改变body的高度,watch监测窗口大小变化时触发,改变属性值达到预期效果,代码贴上

     

    <template>
    	<div class="bgColor" :style="'height:'+fullHeight+'px;'">
    		<div class="login-wrap">
    			<h1 class="login-title">评测管理员</h1>
    			<div class="login-type-wrap">
    				<router-link to="/login" class="logintype">登录</router-link>
    				<router-link to="/registered" class="logintype">注册</router-link>
    			</div>
    			<router-view></router-view>
    		</div>
    	</div>
    </template>
    <script>
    	export default{
    		name:"Login",
    		data () {
    			return {
    				fullHeight: document.documentElement.clientHeight
    			}
    		},
    		watch: {
    			fullHeight (val) {//监控浏览器高度变化
    				if(!this.timer) {
    					this.fullHeight = val
    					this.timer = true
    					let that = this
    					setTimeout(function (){
    						that.timer = false
    					},400)
    				}
    				
    			}
    		},
    		mounted () {
    			this.get_bodyHeight()
    		},
    		methods :{
    			get_bodyHeight () {//动态获取浏览器高度
    				const that = this
    				window.onresize = () => {
    					return (() => {
    						window.fullHeight = document.documentElement.clientHeight
    						that.fullHeight = window.fullHeight
    					})()
    				}
    			}
    		}
    	}
    </script>
    
    <style scoped>
    @import '../../assets/style/auth/loginOrReg.css';
    </style>

     

    对于整个适应的背景图不让其平铺 ,宽高100%就ok

    	background: url('../image/2.jpg') no-repeat center;
        background-size: 100% 100%;

     

    展开全文
  • 自适应方案核心: 阿里可伸缩布局方案 lib-flexible px转rem:px2rem,它有webpack的loader px2rem npm i lib-flexible -S npm i px2rem-loader -D 二、在vue.config.js配置,这里我是按照1920*1080缩放 css: { ...
  • 但是作为一个百分比的弹窗,在不同屏幕下表现不同,所以需要做自适应vue中,新建一个resize.js文件 import { debounce } from '@/utils' export default { data() { return { $_sidebarElm: null, $_...
  • Vue-实现自适应屏幕高度的方法

    千次阅读 2020-05-26 17:00:36
    项目中使用的element-ui的table组件,让它的高度自适应屏幕的高度,代码如下: html: <div class="tablebox" v-bind:style="'height:' + (bodyHeight - 170) + 'px'"> <el-table :data="tableData" ...
  • vue 自适应屏幕的宽高度

    千次阅读 2020-08-03 17:53:30
    通过定义属性进行双向绑定改变body的高度,watch监测窗口大小变化时触发,改变属性值达到预期效果,代码贴上 <template> <div class="bgColor" :style="'height:'+fullHeight+'px;'"> <div class=...
  • /* 屏幕小于1440px */ @media screen and (max-width: 1439px) { .add{ width: 260px; } } /* 屏幕等于1440px */ @media screen and (max-width: 1440px) and (min-width: 1440px) { .add { width: 348px; } ...
  • 如果你做了一个vue的pc端项目,但是需要适应不同的分辨率和屏幕大小,你会发现在1080p*1920下开发的页面,把分辨率切换到1366或者其他的时候,页面会变得非常丑,字体变得超级大,还会换行等等,也许有很多公司都...
  • 1. <div id="screen-content" > <div id="main"> <...--这里放内容-->... screenWidth: document.documentElement.clientWidth,//屏幕宽度 screenHeight: document.documentElement.
  • 有如下页面需求:在一个页面展示多个echarts图表,并且根据屏幕大小变化而变化。 实例 可以封装成组件使用,以增加代码复用性 // myCharts.vue <div class=charts-comps ref=charts></div> [removed] import ...
  • vue Echarts 随着屏幕尺寸的大小而自适应图形 mouted () { this.init() } init () { let chartDom = document.getElementById(this.idName) ... // 监听屏幕大小,当屏幕变化时而重写echarts window.ad
  • Vue+Element UI 高度实时自适应

    千次阅读 2021-01-13 07:05:40
    所以用了它的布局就可以做到宽度实时自适应,当我想试试高度是否自适应时发现一个问题,它的高度无法实时自适应!高度实时自适应这个问题让我研究了好久,因为我做的是一个后台管理系统左边是一个竖着的导航栏右边是...
  • vue组件中在mouted钩子里先调用初始化echarts的方法,然后再添加window事件resize,让window监控屏幕大小变化,从而用定时器setTimeout每隔100毫秒执行echart.resize()事件。 ...
  • vue-cli3实现屏幕自适应(两步搞定)

    千次阅读 2020-07-10 18:32:01
    项目演示代码 <template> <div class="big"> ...其他分辨率(1024 * 640) 参考资料 vue-cli2自适应参考:https://www.jianshu.com/p/a7c4ff4ed14c cli3:https://www.cnblogs.com/liuXiaoDi/p/13188052.html
  • 页面添加此代码 //浏览器表格自适应显示 created(){ window.addEventListener('resize', this.initTableHeight); //注册监听器 }, destroyed(){ window.removeEventListener('resize', this.initTableHeight); ...
  • 开发中用到了echart图表,需要图表自适应大小resize,一开始使用的方法是: window.onresize = function () { this.myChart.resize(); }; 但是又遇到一个问题,点击侧边栏的展开收起的时候,图表的大小没有自适应...
  • vue项目做屏幕自适应处理

    万次阅读 2019-03-12 13:22:46
    项目基于vue-cli搭建,之前项目采用less的功能函数集合媒体查询做的屏幕适配,但是由于JavaScript的对浮点数据处理,这个语言本身的bug问题,总是会出现一些计算误差,这里重新做的项目采用淘宝的lib-flexible的库,来做...
  • 1.用npm/cnpm/yarn安装sass...在vue页面中引入base.scss @import “…/…/assets/sass/base.scss”;(style标签内引入) 5.如上图所示使用calculateSize()方法转换达到屏幕适配。 (只是其中一种简单写法,仅作参考)
  • 根据屏幕大小的变化自动缩放元素的宽高,达到可以适应任何屏幕大小的效果。 这边通过一个mixins.js文件混入到组件内直接使用就行,只需要改一下ref的名字 示例结构 这里只需要看下我的结构大概示例和引入mixins文件...
  • Ant Design vue table 自适应页面高度

    千次阅读 2021-03-07 15:30:29
    表格(table)可能是在业务开发的时候,用到的最多的组件,Ant Design vue table 也有着一套十分强大的API,而其中有一项开发时,可能希望表格可以随着当前页面的分辨率,来动态调整表格的固定高度,使整个页面更加...
  • [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader] 六、重启服务(到此步骤自适应功能已实现) 以上步骤全部完成之后,重启服务,已经宽高都已能够实现自适应。但是发现两边出现了滚动条: ...
  • 一 , 在config文件夹下新建一个rem... 所以这里font-size就是75) 四 , 回到.vue文件中写css样式 , 输完px , 右下角会自动弹出换算好的rem值 , 点击即可 , 之后所有样式的px值都用rem表示 , 会自动根据屏幕宽度自适应 
  • vue-echarts图表自适应用到了vue-resize 完整流程为: 1、下载vue-resize npm i vue-resize -S 2、main.js中引入 import { ResizeObserver } from 'vue-resize'; import 'vue-resize/dist/vue-resize.css'; Vue....
  • 1. npm i lib-flexible-computer -S //根节点会根据页面视口变化而变化font-size大小 2. npm i px2rem-loader -D//自动将px转换为rem 3. npm i postcss-px2rem//将代码中px自动转化成对应的rem的一

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,078
精华内容 831
关键字:

vue页面自适应屏幕大小

vue 订阅