我是新手,这是我的第一个项目! 我将为您提供5天以来为适应性所做的所有工作,并重写代码。
除了这360px以外,一切都很棒!
如果为360px,则很小。如果是460像素,则不是。 如果320px很大! 所有代码都无法传播
问: 如何删除此白色矩形?取决于窗口的大小::с
@media screen and (min-width: 360px) {
html, body {
width: 100%;
}
.b1 {
width: 100%;
height: 100%;
background: url(First.jpg) repeat;
}
.b1 h1 {
font-size: 60px;
}
.b2 {
width: 100%;
height: 100%;
background: url(Third.jpg);
background-size: cover;
}
.b2 h2 {
font-size: 25px;
padding-top: 70px;
}
.video {
width: 300px;
height: 300px;
}
.b3 {
width: 100%;
height: 100%;
display: flex;
background: url(five.jpg);
background-size: cover;
justify-content: center;
}
.b3 h2 {
font-size:40px;
padding-top: 70px;
}
.video2 {
width: 300px;
height: 300px;
}
.b4 {
width: 100%;
height: 200%;
background: url(four1.jpg);
background-size: cover;
}
.b4 h2 {
font-size: 40px;
}
.allMusic {
display: flex;
flex-direction: column;
padding-right: 70px;
}
.audio1 {
display: flex;
flex-direction: column;
width: 200px;
padding-left: 100px;
}
.audio2{
display: flex;
flex-direction: column;
width: 200px;
}
.audio3{
display: flex;
flex-direction: column;
width: 200px;
padding-left: 100px;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="b1">
<div class="content1">
<h1>This is my first public work</h1>
<a class="btn" href="#Stop" onclick="slowScroll('#Stop')">See more</a>
<a class="btn" href="contactform.html">Contact with me</a>
</div>
</section>