Question

我在论坛上没有找到任何东西，这个问题可能很愚蠢，但我是新手。我正在尝试做一个“按钮”，当我点击它时，会发生一些事情。但这不是问题。我不知道如何将按钮保持在页面中央，任何缩放，在PC和移动设备上。我想用一张图片，但是如果我需要的话，我还是想问一下如何做到这一点。

代码很简单，但有两个问题我不知道怎么做修复：当我放大或缩小时，框保持不变，但字体尺寸变化。我不知道如何使它静止;
在移动设备上，一切都是错误的，我真的不知道该怎么做

			#div{
				height:10%;
				width:50%;
				border:0.01em solid black;
				background-color:lightblue;
				border-radius:500em;
				position:absolute;
				left:25%;
				top:45%;
			}

			#p{
				text-align:center;
				margin:0px;
				position:relative;
				height:50%;
				top:25%;
                /*not sure if this is how to center the text*/
						
				font-size:1em; /*not sure*/
			}

<!DOCTYPE html>
<html>
	<head>
		<title>Bottone inutile</title>
		<script>
          /*...*/
		</script>
		<style>
          /*...*/
		</style>
	</head>
	<body>
		<div id="div" onclick="something()">
			<p id="p">text</p>
		</div>
	</body>
</html>

Answer 1

纯CSS方法

我不确定这是否会为您提供帮助，但我开发的在线设计师必须保持一切响应和适当的位置。像图像这样的东西通常都没问题，因为我将容器设置为100％，并且它上面的所有层都以％表示宽度和高度，以便完美地缩放。

另一方面，文字并不容易，但可以很容易地完成。

我所做的不是使用px，而是pt，em或rem只是使用vw。

vw：视口宽度的百分之一。 vh：视口的百分之一高度。 vmin：视口宽度较小的百分之一或高度。 vmax：视口中较大者的百分之一宽度或高度。

这基本上使它响应，每个1vw是视口宽度的1％。根据需要，您可能需要为不同的断点创建一些@media代码。

可选的JS方法。（如果适用）一个很棒的插件，用于调整所有文本的大小：http://simplefocus.com/flowtype/

注意：我不参与simplefocus。

使用不同的缩放保持相同的大小

1 个答案: