Question

我有一个div用作 PopUp 来使用WebCam拍照，在我的显示器（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;
}

我想知道如何让我的窗户和里面的元素保持比例，即使屏幕较小

感谢您的关注！

Answer 1

不直接回答您的问题，但这里有两个针对您的问题的修复程序。

媒体查询

media query由媒体类型和至少一个限制样式表的表达式组成。范围使用媒体功能，如宽度，高度和颜色。开发人员在使他们的网站更具响应性时使用这些。

以下是使我的容器响应的示例。

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

<强>自举

Bootstrap是一个用于在网络上创建移动优先项目的框架。因为我一直在使用Bootstrap，所以我从未回过头来。通过使用带有标记和CSS的预设类，您可以轻松地使您的网站响应。它使你永远不会遇到像你现在遇到的那样的问题。

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

Answer 2

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

如何做我的div及其元素变得敏感？

2 个答案: