时间戳

首页 > 解决方案 > 浏览器缩小时使用 flexbox 缩小元素

html - 浏览器缩小时使用 flexbox 缩小元素

问题描述

我在使用 flexbox 时遇到了一个烦人的问题（我是初学者）。

正如你在这里看到的：https ://codepen.io/guy-ben-yeshaya/pen/NeqjbG

1）是否有可能，在将浏览器缩小到某个点时，红色框和文本会一起缩小（没有将文本大小设置为 VW，因为它在移动尺寸上变得太小），而不是元素进入彼此？

2）为什么将浏览器缩小到手机大小时，文本没有响应？

非常感谢您的阅读和帮助！

.section-1{

    margin-top: 200px;
    display:flex;

    text-align: left;
    justify-content: space-around;
    flex-wrap: wrap;
}


.headertext1{
    font-family: 'Raleway';
    color: #1CD2D5;
    font-size: 80px;
}

.headersubtext{
    font-family: 'Raleway';
    color: black;
    font-size: 25px;
}



.btn{
    border-radius: 0px;
    border-color: #1CD2D5;
    background: #1CD2D5;
    color: black;
    font-family: 'dosis';
    padding: 10px 25px;
    font-size: 15px;
}


.box{
    width: 300px;
    height: 300px;
    background-color: red;
}
<html>
  <body>
    
  <div class="container">
    <div class="section-1">
          <div class="1 flex1">
            <h1 class="headertext1"><b>BARAN</b>GLOBAL</h1>
            <h3 class="headersubtext">Real Estate and consultant agency. <br>A link to your future thourgh intelligent investing.</h3>
           
              <a href="#section-2" class="btn"><b>Learn More</b></a>
          </div>
          <div class="2 flex1">
              <div class="box"></div>
             
          </div>
    </div>
  </div>
  </body>
</html>

标签： htmlcss

解决方案

推荐阅读