我正在为桌面和移动的屏幕的网站。桌面屏幕上没有错误。但是当我在移动的屏幕上显示。我的设计缩水了。而且它不适合在移动的屏幕上。我使用的Bootstrap版本号是5。但我试着使用宽度：100%，但它不工作。另外，我正在制作.net Web应用程序。我该怎么解决？
你可以检查一下：
期望：（iPad版）
下面是我的代码：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header class="head navigation fixed-top ">
<img />
<nav class="navigation">
<a href="Index">Main Page</a>
<a href="blog">Blog</a>
<a href="https://api.whatsapp.com/send?phone=905304500247&text=&source=&data=">Contact</a>
</nav>
</header>
<br />
<div style="width: 100%; height: 750px; background-color: yellow; ">
<div class="example">
<img style="width: 100%; height: 750px;" class="background-image" src="~/Img/web_site.png">
<div class="overlay-text">
<h1>Welcome to our Web Page</h1>
<p> </p>
</div>
</div>
</div>
<div style="width: 100%; height: 450px; background-color: black; padding-left: 20px; text-align: center; ">
<br />
<br />
<br />
<br />
<br />
<br />
<h2 style="color: white; top: 50%; right: 50%; ">We're happy to be a leading software</h2>
<h2 style="color: white; top: 50%; right: 50%;">company in İstanbul</h2>
<h2 style="color: white; top: 50%; right: 50%;">solutions for today's enterprise companies.</h2>
<br />
<br />
<a href="https://api.whatsapp.com/send?phone=905304500247&text=&source=&data="><button onclick="window.location.href='/Home/login_page'" class="btncomminicate">Contact Us</button></a>
</div>CSS代码：
@@media only screen and (max-width: 600px) {
.body {
margin: 0;
padding: 0;
}
}
}
html, body {
margin: 0px;
height: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
.example {
position: relative;
}
.overlay-text {
background-color: rgba(255, 255, 255, 0.5);
padding: 20px;
text-align: center;
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
.head {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
height: 70px;
background-color: #000000;
display: flex;
/* justify-content: center; */
justify-content: center;
align-items: center;
z-index: 99;
}
.navigation a {
position: relative;
font-size: 1.1em;
color: white;
text-decoration: none;
font-weight: 500;
margin-left: 40px;
}
.navigation a::after {
content: '';
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 3px;
background: white;
border-radius: 5px;
transform-origin: right;
transform: scaleX(0);
transition: transform .5s;
}
.navigation a:hover::after {
transform-origin: left;
transform: scaleX(1);
}
.btncomminicate {
width: 500px;
height: 50px;
background: transparent;
border: 2px solid yellow;
outline: none;
border-radius: 6px;
cursor: pointer;
font-size: 1.1em;
color: yellow;
font-weight: 500;
margin-left: 40px;
}
.btncomminicate:hover {
width: 500px;
height: 50px;
background: yellow;
border: 2px solid yellow;
outline: none;
border-radius: 6px;
cursor: pointer;
font-size: 1.1em;
color: black;
font-weight: 500;
margin-left: 40px;
}
1条答案
按热度按时间mnemlml81#
发生这种情况是因为一旦你小于500px宽，“联系我们”按钮，这是设置为500px宽宽比100%宽，并创建在右边的死区。
特别是这些行：
您可以将其调整为百分比宽度（
width: 75%）或通过自动计算宽度（删除上面的两行）。就我个人而言，我通常处理按钮的方式是添加填充，而不是设置宽度和高度（如果你使用这种方法，你的
height: 50px可以被删除）：