css - 如何制作响应式 div？

Question

我正在使用 HTML 中的 CSS 和 div 制作一个应用程序，它是一个餐厅菜单，我有一个必须遵守的线框，所以我在 CSS 中使用像素定位而不是百分比，所以在打开网站时最大化状态看起来像：

但是当最小化它的诅咒时，它的大小和位置不会对此做出反应：

这是小提琴

****编码：**

*CSS：

    .buttonClass {
    width: 381px;
    height: auto;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -webkit-linear-gradient(top,#FFF 0%,#91BDD6 100%);
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    background-image: -ms-linear-gradient(top,#FFF,#91BDD6);
    background-image: -o-linear-gradient(top,#FFF,#91BDD6);
    background-image: linear-gradient(top,#FFF,#91BDD6);
    border: solid #91BDD6 5px;
    box-shadow: 0px 0px 0px 5px #fff, 5px 3px 12px #000000;
    position: absolute;
    right:0;
    bottom:0;
}

.totalClass {
    width: 376px;
    height: 30px;
    padding: 10px 10px;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    position: absolute;
    right: 0;
    top: 700px;
}

*分区：

<div id="confirm" class="buttonClass">
  <div align="center">Confirm</div>
</div>    

<div id="total" class="totalClass">
  <div align="left"></div>
</div>      

Answer 1

The easiest way i can think of is: change the width:381px to max-width:381px and add a width:100%. In this way if there is enough place for the button it will be 381px wide and, if there is no place it will fit the given width.

The CSS code would be:

    .buttonClass {
    max-width: 381px;
    width:100%;
    height: auto;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -webkit-linear-gradient(top, #FFF 0%, #91BDD6 100%);
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    background-image: -ms-linear-gradient(top, #FFF, #91BDD6);
    background-image: -o-linear-gradient(top, #FFF, #91BDD6);
    background-image: linear-gradient(top, #FFF, #91BDD6);
    border: solid #91BDD6 5px;
    box-shadow: 0px 0px 0px 5px #fff, 5px 3px 12px #000000;
    position: absolute;
    right:0;
    bottom:0;
}
.totalClass {
    width: 376px;
    height: 30px;
    padding: 10px 10px;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    position: absolute;
    right: 0;
    top: 700px;
}

Answer 2

当您想更改宽度或高度 onclick="" 时，您不妨使用 javascript 来更改尺寸。Javascript 还可以更改对象的位置 - 查看它。

HTML

<div id="sidebar"></div>
<button onclick="hide_sidebar()" />

CSS

#sidebar {
width:200px;
height:100%;
float:right;
margin:0 0 0 0;
transition:0.25s
}

JS

function hide_sidebar() {
document.getElementById("sidebar").style.width="0";
}

Answer 3

这不是一个大问题，只需以像素为单位提供该 div 并为该按钮放置一个 ID 并为该按钮提供 100% 的宽度

前任：

button div id
{
width:20px;
height:20px;
}

#button
{
width:100%;
height:20px;
}

然后继续享受你的编码