调整浏览器大小时，html组件的比例大小

Proportial size of html components while the browser is being resized

本文关键字：组件 html 浏览器 小时 调整      更新时间：2023-09-26

我正在制作一个页面，其中我正在显示一些html组件(令人惊讶的是:p)。

要求所有这些html组件的大小根据浏览器窗口的大小或客户端分辨率的变化而变化。

举个例子，如果我把浏览器窗口的大小减少了一半，我如何让组件自动减少一半呢?

任何指向这一点的指示都是有帮助的。

编辑:需要的是组件保持相同的从左到右的顺序，即在需要时引入水平滚动条。

假设您希望在不使用JavaScript的情况下尽可能轻松地完成此操作。在你的css中，确保任何你想要调整大小的宽度和高度属性都是百分比而不是像素。另外，如果你需要一个子组件的大小调整，也把它设为一个百分比。

例如

如果是你的html

其中容器div是你想要自动调整大小的html组件

<div class="container">
    <h1> some heading</h1>
    <p>some paragraph text</p>
    <div class="childContainer">
        <p>some more text</p>
    </div>
</div>
在你的css中 
.container
{
    width: 80%;
}
.someChildContainer
{
   width: 50%;
}

不是这个

.container
{
     width: 800px;
}

在这个例子中使用百分比，比如说你的浏览器总宽度最初是1000px;容器类div显示为800px, childContainer显示为400px。如果用户将浏览器的宽度缩小为500px，则容器类将缩小为400px, childContainer将缩小为200px;

换句话说，任何子容器的宽度百分比基于当前与父容器的宽度。如果没有父容器，百分比宽度是相对于html正文标签，大多数情况下是整个浏览器窗口的宽度。

下面是基于示例

的标记
    <html>
<body>
<style type="text/css">
    .alignLeft{ 
            float:left;
        }
    .container
    {
        width: 80%; 
        background-color:#ccc;
        float: left;
    }
    .fixedContainer
    {
        width: 900px;
        float: left;
        background-color:#aaa;
    }
    table
    {
       width: 300px;
       float: left;
    }
</style>
<div class="container">
<div class="fixedContainer">
<table class="searchCriteria alignLeft" cellpadding="1%"> 
 <tr> 
 <td><label for="proposalRefNum">Proposal Id :</label></td>
 <td><input type="text" name="proposalRefNum" onchange="removeSearchResults()" class="searchControl" value="" id="proposalRefNum" title="Type the Proposal RefNum you are looking for"></td> 
 </tr> 
  <tr> 
 <td><label for="proposalName">Name :</label></td> 
 <td><input type="text" name="Proposal Name" onchange="removeSearchResults()" value="" id="proposalName" class="searchControl" title="Type the Proposal description you are looking for"></td> 
 </tr> 
 <tr> 
 <td><label for="proposalDescription">Description :</label></td> 
 <td><textarea rows="2" name="Proposal description" onchange="removeSearchResults()" id="proposalDescription" class="searchControl" title="Type the Proposal description you are looking for"></textarea></td> 
 </tr> 
 <tr> 
 <td><label for="proposalApplication">Application :</label></td> 
 <td><select class="searchControl" name="application" id="proposalApplication" onchange="removeSearchResults()" title="Select the application for which you are searching the proposals">
    <option value="_ANY" selected="selected">ANY</option>
</select></td>
 </tr> 
</table>

<table class="searchCriteria alignLeft" cellpadding="10px"> 
 <tr> 
 <td><label for="proposalReleaseCandidateRefNum">Release Candidate Id :</label></td>
 <td><input type="text" name="releaseCandidateRefNum" onchange="removeSearchResults()" class="searchControl"value="" id="proposalReleaseCandidateRefNum" title="Type the release Candidate RefNum you are looking for"></td> 
 </tr> 
<tr> 
 <td><label for="proposalCreator">Creator :</label></td> 
 <td><input type="text" name="Proposal creator" onchange="removeSearchResults()"value="" id="proposalCreator" class="searchControl" title="Creator of the proposals you are looking for"></td> 
 </tr> 
 <tr> 
 <td><label for="proposalOwner">Owner :</label></td> 
 <td><input type="text" name="Proposal Owner" onchange="removeSearchResults()"value="" id="proposalOwner" class="searchControl" title="Owner of the proposals you are looking for"></td> 
 </tr> 
 <tr> 
 <td><label for="proposalLastUpdatedBy">LastUpdatedBy :</label></td> 
 <td><input type="text" name="Proposal Last Updated By" onchange="removeSearchResults()"value="" id="proposalLastUpdatedBy" class="searchControl" title="Users who last updated the proposals you are looking for"></td> 
 </tr> 
<tr> 
 <td><label for="proposalStatus" >Status:</label></td> 
 <td><select class="searchControl" onchange="removeSearchResults()" name="status" id="proposalStatus" title="Status of the proposals you are looking for">
     <option value="_ANY" selected="selected">ANY</option>
</select></td>
 </tr>
</table> 
</div>
</div>
</body>
</html>

在这里你会经常听到这个:jQuery。有一个resize事件，你可以给它附加一个函数来调整所有组件的大小，例如

$(window).resize(function() {
    //resize the components.
});

正如@pat8719所说，要有高度和宽度的比例，你可以在CSS中将它们设置为百分比，这只会在你想要改变某些阈值的字体/边框大小或有一些花哨的东西，如在屏幕尺寸太小时折叠组件时有用。

相关文章：