我正在设计一个网站,并且希望在移动设备上加载网站时将名为card的div加载到标题下方,但是当我降低卡片在页面上的位置时,它也会在桌面版本上应用相同的重新定位。
页面在桌面上的外观:
页面在移动视图上的外观:
这是我正在使用的代码:
body {
padding-top: 10px;
}
.header {
font-family: Dubai;
width: 100%;
top: 0;
left: 0;
position: fixed;
padding-left: 3.5%;
display: flex;
background: linear-gradient(to right, #000000 280px, #808080 280px);
z-index: 2;
}
.header ul {
list-style-type: none;
margin-right: 7%;
overflow: hidden;
margin-left: 5%;
}
.header li {
float: right;
font-size: 100%;
}
.header li a {
color: white;
display: block;
padding: 8px 16px;
text-decoration: none;
}
.header li a:hover {
background-color: #575757;
}
.header img {
width: 140px;
height: 60px;
margin-top: 7px;
}
#banner {
background-image: url('../../static/mainbanner.jpg');
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-top: 70px;
position: static;
}
.background-image {
background-size: cover;
background-repeat: no-repeat;
position: fixed;
left: 0;
right: 0;
z-index: -1;
width: 100%;
min-height: 100%;
}
#card {
margin-top: 100px;
padding-top: 0.5%;
padding-bottom: 2%;
display: flex;
flex-direction: column;
justify-content: center;
background-color: white;
width: 50%;
height: 50%;
box-sizing: border-box;
position: relative;
z-index: 1;
border-radius: 10px;
text-align: left;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
}
这就是您所拥有的 CSS 中的预期功能。您会缺少一个媒体查询,告诉浏览器仅加载特定大小的 CSS。例如,如果您想为宽度为 640 及以下的所有设备添加样式,您可以添加下面的代码并将其从常规 #card 样式中删除。另请注意,同等特异性的样式会覆盖其上方的样式。因此最好将其添加到原始#card 样式下方。
@media screen and (max-width:640px){
#card{
margin-top: 100px;
}
}