html - 如何让它响应？

Question

我正在努力改进自己的按钮设计，我尝试了许多 css 功能，但我无法制作我想要的模板。桌面版对我有好处你可以检查下面的代码，我想将桌面设计保留在移动设备上。有人可以告诉我@media 查询...................................................... ............

    <div id="ana_div">
    <a href="url1">
        <div class="divi" id="div">
            <button class="btnnn"> but</button>
        </div>
    </a>
    <a href="url2">
        <div class="divi" id="div2">
            <button class="btnnn"> but</button>
        </div>
    </a>
    <a href="url3">
        <div class="divi" id="div3">
            <button class="btnnn"> but</button>
        </div>
    </a>
    <a href="url4">
        <div class="divi" id="div4">
            <button class="btnnn"> but</button>
        </div>
    </a>
    <a href="url5">
        <div class="divi" id="div5">
            <button class="btnnn"> but</button>
        </div>
    </a>
</div>

<style>
    
#ana_div {
    
    height: 200px;
    width: 710px;
    margin: auto;
}

.ikon
{
visibility:none;
}

.divi {
    height: 100px;
    width: 310px;
    cursor: pointer;
 

}
.btnnn {
  border: 3px solid black;
  border-image:linear-gradient(to right, black,#1ebd9d ) 30;
  color: black;
    height: 80px;
 width: 300px;
  font-size: 19px; 
  cursor: pointer;
  background-color: #fff;

  
}
.btnnn:hover {
   background-image: linear-gradient(to right,black,#1ebd9d);
     box-shadow: 2px 2px 10px 2px #1ebd9d;
  transition: background-image .3s linear;
  transition: box-shadow .3s linear;

}

</style>

                                     
                                     
                                     
                                     

标签： htmlcssresponsive-designresponsive

Answer 1

.btnn我建议您使用填充而不是 中的宽度和高度。填充使您的按钮在所有屏幕上都有响应。利用

padding: 1rem 1.5rem;

或使用

@media (max-width){

/* Your styles (reduce the width and height) */

}

你想排列按钮吗？

display :flex;将和添加flex-direction: column;到整个父 div