带有文本和按钮的响应式 header

Question

我正在制作一个带有文本和按钮的简单 header，但是当我使用移动设备时，一切都没有响应。我尝试使用 %'s 但没有任何效果。当我在移动设备上滚动时，我的 CSS 会上下跳动。这是codepen，https://codepen.io/Religion/pen/ZEQerQZ。下面是 CSS 。 HTML 你可以查看代码笔，因为 post 说它主要是代码。 CSS:

@media only screen and (max-width: 767px) {
.header1{
  padding: 15%;
  text-align: center;

  background-image: url('https://manchesterdental.org/img/dentalimg/welcomenote.jpg');
   background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  font-size: 30px;
  position: relative;

}
.header-text1 h2{
  margin-top:20%;
  font-size:1.8rem;
  width:45vh; 
  margin-left:-20%;
  color:white;



 
}
.header-text1 p{
 
    font-size:1.1rem;
  width:44vh; 
  margin-left:-20%;
  padding-top:40px;
  color:white;
  font-weight: 500;



}
.header-text{
   position: absolute;
   bottom:0;
   left:0;

   
   
   width:1px;



}
.button {
  background-color: #00aeef; /* Green */
  
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  margin-left: 2%;
  width:95%;
  margin-bottom: 20px;
  
}
}

@media (min-width:900px) {
  .header1{
  padding: 60px;
  text-align: center;

  background-image: url("{% static 'dentist/img/bg-img/header.jpg' %}");
   background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  font-size: 30px;
  height:80vh;
 
}
.header-text1 h2{
  margin-top:10%;
  color:white;
font-size: 3rem;


 
}
.header-text1 p{
 padding-top:40px;
 font-size:1.5rem;
 max-width:80%;
 margin-left:10%;
 
 
  color:white;
  font-weight: 500;



}
.button {
  background-color: #00aeef; /* Green */
  
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  margin-left: 2%;
  width:45%;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-weight:800;

  
}
}

HTML:

<div class="header1">
  <div class = "header-text1">
  <h2>We Believe Everyone Should Have Easy Access To Great Dental Care</h2>
  <p >As a leading industry innovater, * Dental Business* is opening up exciting new opportunities for dental professionals, investors, employees & suppliers. Contact us to find out what we have to offer you.</p>
  <br>
 <a href="{% url 'contact' %}"><button class="button button1">Contact Us!</button></a>

  </div>
</div>

Answer 1

您目前正在将 margin-top 属性设置为按钮本身高度的 20%。

如果你想让边距响应视口的宽度，那么使用类似的东西：

margin-top: 2vw; // 2% of the viewport width

但是，对于 margin-top 属性，我建议像这样使用视口的高度：

margin-top: 1vh; // 1% of the viewport height (1% should be enough)

Answer 2

要使文本元素在 div 中居中，您可以使用 flexbox。只需在媒体查询之前将以下代码添加到 CSS 文件的顶部：

.header-text1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
 
  width: 100%;

}

此外，无需将此包含在您的媒体查询中，因为 flexbox 将处理所有内容，无论视口大小如何。

此 Codepen 更新了代码 - 还更改了第二个媒体查询，因此 CSS 不会像以前那样在 767px 和 900px 之间中断。

带有文本和按钮的响应式 header

Responsive header with text and button

html

css

responsive