图片_按钮自适应-css变量控制

最新推荐文章于 2022-06-26 22:06:57 发布

令月十一

最新推荐文章于 2022-06-26 22:06:57 发布

阅读量170

点赞数

分类专栏： vue 图片文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_44234050/article/details/120024468

版权

图片同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

vue

13 篇文章 0 订阅

订阅专栏

CSS 变量教程

https://www.ruanyifeng.com/blog/2017/05/css-variables.html

在js中改变css中的变量

https://blog.csdn.net/mycocoo/article/details/109274916

在使用过程中发现：

pc端会出现无法对齐按钮的情况=>存在滚动条导致页面宽度不定
因此在页面宽度选择上应该是当时页面可视宽度

个人小问题:

移动端浏览器在滑动时最上方的搜索栏 (是浏览器的，不是自己页面上的) 是怎么固定的?
因为我看elementui弹窗在移动端的时候上方的搜索栏是锁定状态的，有大佬知道的话望留言，感激不尽！
项目：

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>天涯明月刀</title>
		<link rel="stylesheet" type="text/css" href="index.css" />
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body :class="{hid:dialogVisible}">
		<div id="index" >
			<div class="bg_main" >
				<button @click="open()" class="but1">启动游戏</button>
				<button @click="open()" class="but2">立即提现</button>
				<div class="dic1">
					<ul class="ul_1">
						<li>
							<button @click="open()">邀请好友</button>
						</li>
						<li>
							<button @click="open()">新人注册</button>
						</li>
					</ul>
				</div>
				<ul class="ul_2">
					<li>
						<button @click="open()">领取现金</button>
					</li>
					<li>
						<button @click="open()">领取现金</button>
					</li>
					<li>
						<button @click="open()">领取现金</button>
					</li>
					<li>
						<button @click="open()">领取现金</button>
					</li>
					<li>
						<button @click="open()">领取现金</button>
					</li>
				</ul>
			</div>
			<img src="img/index.png">
			<div class="dialog__wrapper" :class="{active:dialogVisible}">
				<div class="dialog">
					<button @click="close()" class="close">关闭</button>
					<img class="popup" src="img/popup.png">
				</div>
			</div>
			<div class="modal"></div>
		</div>
	</body>
	<script src="index.js" type="text/javascript" charset="utf-8"></script>
</html>

index.js

let Main = {
	data() {
		return {
			dialogVisible: false
		}
	},
	methods: {
		open() {
			this.dialogVisible = true;
			document.querySelector('body').setAttribute('style', 'overflow: hidden');
		},
		close() {
			this.dialogVisible = false;
			document.querySelector('body').setAttribute('style', 'overflow: none');
			
		},
		Scale() {
			let fullWidth = document.body.clientWidth //获取可视区域宽度(带滑动条宽度回影响覆盖)
			let scaleV = fullWidth / 750;
			document.documentElement.style.setProperty('--scale', scaleV)
		}
	},
	mounted() {
		this.Scale()
	}
}
let Ctor = Vue.extend(Main);
new Ctor().$mount('#index');

css

[v-cloak] {
	display: none !important;
}

:root {
	--scale: 0;
}

* {
	padding: 0;
	margin: 0;
}


img {
	width: 100%;
	object-fit: cover;
}

ul {
	list-style: none;
	position: absolute;
}

button {
	border: 0;
	opacity: 0;
	outline: none;
	color: transparent;
	position: absolute;
}


.but1 {
	top: calc(var(--scale) * 620px);
	left: calc(var(--scale) * 162px);
	width: calc(var(--scale) * 426px);
	height: calc(var(--scale) * 146px);
	border-radius: calc(var(--scale) * 64px);
}

.but2 {
	top: calc(var(--scale) * 1574px);
	left: calc(var(--scale) * 186px);
	width: calc(var(--scale) * 376px);
	height: calc(var(--scale) * 126px);
	border-radius: calc(var(--scale) * 61px);
}

.dic1 {
	display: flex;
	position: absolute;
	justify-content: center;
	top: calc(var(--scale) * 1774px);
	width: calc(var(--scale) * 750px);
	height: calc(var(--scale) * 104px);
}

.ul_1 {
	display: flex;
	justify-content: space-between;
	width: calc(var(--scale) * 614px);
	height: calc(var(--scale) * 104px);
}

.ul_1 li {
	display: block;
	width: calc(var(--scale) * 290px);
	height: calc(var(--scale) * 104px);
}

.ul_1 li button {
	width: calc(var(--scale) * 290px);
	height: calc(var(--scale) * 104px);
	border-radius: calc(var(--scale) * 67px);
}

.ul_2 {
	top: calc(var(--scale) * 2320px);
	left: calc(var(--scale) * 490px);
	width: calc(var(--scale) * 237px);
	height: calc(var(--scale) * 834px);
}

.ul_2 li {
	display: block;
	width: calc(var(--scale) * 237px);
	height: calc(var(--scale) * 91px);
	margin-bottom: calc(var(--scale) * 95px);
}

.ul_2 li button {
	display: block;
	width: calc(var(--scale) * 237px);
	height: calc(var(--scale) * 92px);
	border-radius: calc(var(--scale) * 40px);
}

/* 弹出框 */
.modal,
.dialog__wrapper {
	top: 0;
	left: 0;
	right: 0;
	display: none;
	height: 2000px;
	position: fixed;
}

.dialog {
	top: 50%;
	left: 50%;
	width: 662px;
	position: fixed;
	transform: translate(-50%, -50%);
}


.dialog__wrapper.active {
	z-index: 100;
	display: block;
}

.dialog__wrapper.active+.modal {
	opacity: .8;
	z-index: 99;
	display: block;
	background: #000;
}

.close {
	left: 50%;
	bottom: 21px;
	height: 110px;
	width: 110px;
	border-radius: 50%;
	transform: translateX(-50%);
}