This是它在 pc 上的样子。 This是它在手机上的样子。我希望手机上的按钮更小(自动调整到屏幕尺寸)。
这是页面的 HTML 和 CSS:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 100%;
}
.container img {
width: 100%;
height: auto;
right: 0;
top: 0;
}
.container .btn {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 20px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btt {
position: absolute;
top: 45%;
left: 24%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 20px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btc {
position: absolute;
top: 45%;
left: 76%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 20px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: white;
color: black;
}
.container .btt:hover {
background-color: white;
color: black;
}
.container .btc:hover {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div class="container">
<img src="some img" alt="" class="alignnone size-full wp-image-1660" />
<a href="some ref" <button class="btn">ER DU ARRANGØR?</button></a>
<a href="some ref" <button class="btt">ER DU MARKEDSFØRER?</button></a>
<a href="some ref" <button class="btc">KONTAKT OSS!</button></a></div>
</body>
</html>我假设，如果可能的话，解决方案是更改按钮的 .container .btx。我找不到执行此操作的方法。
最佳答案
你绝对应该看看media queries .
它们允许您在由各种参数(宽度、高度、方向)定义的不同屏幕上工作。
@media (max-width: 800px) {
//your code goes here
}
我想这就是您要找的。
另请查看 viewport width and height允许您根据窗口大小调整元素大小的单位(vh 和 vw)。
div{
height: 50vh;//50% of the viewport (window) height
width: 40vw;//40% of the viewport (window) width
}
关于html - 自动调整到窗口大小的 CSS 按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51950248/