如何让我的 div 及其元素变得响应？答案

【问题标题】：How to do my div and its elements become responsive?如何让我的 div 及其元素变得响应？
【发布时间】：2014-04-17 00:08:04
【问题描述】：

我有一个 div 用作 PopUp 来使用网络摄像头拍照，在我的显示器 (1366x768) 上非常完美，但是在较小的屏幕上，div 是可怕

HTML：

<div id="light" class="white_content">
    <a id="close_ic" href = "javascript:void(0)" onclick ="closediv()" >x</a>
    <canvas id="canvas" width="500"height="375">  </canvas>  
    <video autoplay id="videoElement"></video>
    <input type="button" value="Capturar Foto" id="save" class="cam_btn_canvas" />
</div>

CSS：

.white_content 
{
    display: none;
    position: fixed;
    top: 15%;
    left: 17.5%;
    width: 65%;
    height: 62%;
    border-style: solid;
    border-width: 1px;
    border-color: #474747;
    background-color: white;
    z-index: 1002;
    overflow: auto;
    border-radius: 10px;
    min-height: 398px;
    min-width: 657px;
}
.cam_btn_canvas 
{
    font-weight: bolder; 
    left: 46%;
    top: 75%;
    position: inherit;
}
#videoElement {
    width: 32%;
    height: 48.5%;
    background-color: #666; 
    z-index: 1102;
    left: 50%;
    top: 139px;
    position: inherit;
}
#canvas 
{
    width: 32%;
    height: 48.5%;
    background-color: #666;
    z-index: 1102;
    left: 18%;
    top: 139px;
    position: inherit;
}
#close_id
{
    font-size: 15pt;
    font-weight: bolder; 
    position: inherit; 
    left: 80%;
    top: 106px;
}

我想知道如何让我的窗口和里面的元素即使在屏幕较小的情况下也能保持比例

感谢关注！

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

不直接回答您的问题，但这里有两个解决您的问题的方法。

媒体查询

media query 由一种媒体类型和至少一个表达式组成，该表达式通过使用媒体特征（例如宽度、高度和颜色）来限制样式表的范围。开发人员在使他们的网站更具响应性时使用这些。

这是一个让我的容器响应的示例。

 @media (min-width: 768px) {
  .container {
    max-width: 730px;
  }
}

引导

Bootstrap 是一个框架，专为在网络上创建移动优先项目而设计。自从我使用 Bootstrap 以来，我从未回头。您可以通过使用带有标记和 css 的预设类轻松地使您的网站具有响应性。它使您永远不会真正遇到您现在遇到的问题。

查看 Bootstrap 或任何其他前端框架。他们很棒。

【讨论】：

+1 表示@media 规则，-1 表示引导。我认为学习媒体的一个概念会比处理一堆巨大的 CSS 规则（引导程序）容易得多。

【解决方案2】：

你可能会发现我的 jQuery 插件 here 很有用，它允许你只定位弹出 div 并根据 div 的宽度为其中的项目设置不同的布局。虽然您避免使用带有媒体查询的脚本，但您只能使用它们根据整个屏幕的宽度而不是容器的宽度来更改布局。

【讨论】：