vue的css取消滑动条，适应在不同的屏幕上

众所周知，当我们的页面开发完成后，在不同的屏幕上，会呈现出不一样的效果。
故我们应该去适配好不同德界面。

①首先，也是最简单的应当用百分比%去设置width和height，而不是用px将其写死。其次，内部元素盒子的布局，也应该用类似于 width:calc(100% - 180px);这样的方法去动态设置，以应对不同的界面。

②其次，当面对不同分辨率时，可以采用css中@media方法。

@media only screen and (min-width: 1766px) {
			.main-big{
			background-color: blue;				
			height :95%;
			width: 90%;
			overflow:hidden;
			background-repeat: no-repeat;
			background-position: center center;
			background-attachment: fixed;
			background-size: cover;
			box-shadow: 0px -1px 1px 0 rgba(0,0,0,0.12);		
		}
	}	
	@media only screen and (max-width: 1766px) {
			.main-big{
			background-color: wheat;
			height :120%;
			width: 80%;
			overflow:hidden;
			background-repeat: no-repeat;
			background-position: center center;
			background-attachment: fixed;
			background-size: cover;
			box-shadow: 0px -1px 1px 0 rgba(0,0,0,0.12);					
		}
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

可以看出，当宽度大于1766，就用第二个main-big的样式；当宽度小于或等于1766px就用第一个main-big的样式.。
同时可以通过控制width,height的百分比去消除各自的滑动条。
当然你也可以选择JS/jQuery动态设置或者一些前端框架（如Bootstrap)去达到类似目的。

③利用vue的一些安装包达到目的
这个是对应的参考链接

---

也可以参照上述链接，改一下自己的配置
在新建一个vue.config.js中，可以如下配置，引入stylus文件

module.exports = {
    // 基本的路径
    publicPath: '/xxx/',
    // 输出的文件目录
    outputDir: 'dist',
    configureWebpack: {
        devtool: 'cheap-module-source-map'//'cheap-source-map'//'source-map'//'cheap-module-eval-source-map'//'cheap-source-map'//
    },
    css: {
        loaderOptions: {
          stylus: {
            import: "~@/assets/stylus/mainvar.styl"
          }
        }
      }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在mainvar.styl文件中，可以配置固定参数

$main-width = 1588px//px值按需求而定
1

再在APP.vue的style标签中，引入设置的css变量

 .main-width{
	main-width $main-width
 }
1
2
3

在APP.vue的template中，绑定这个css

<template>
	<div id="app" :class="[isMobile==false?'main-width':'']">
		<main ：class="main-big">
			<router-view />
		</main>
	</div>
</template>
1
2
3
4
5
6
7